domenic / svg2png

Converts SVGs to PNGs, using PhantomJS
Other
585 stars 134 forks source link

Allow setting background color for SVG file with transparent background #80

Closed ronnyroeller closed 7 years ago

domenic commented 7 years ago

Thanks for your interest! However, I'm not interested in adding arbitrary image-editing features to svg2png. A transparent SVG should generate a transparent PNG; if you want something different, you should edit your SVG or PNG before or after passing them through the straightforward conversion.

ronnyroeller commented 7 years ago

Thanks a lot for your feedback, @domenic. It's great that you keep svg2png focused & simple to use!


Might I ask you for your opinion on the underlying issue which caused the PR? My gulp plugin (https://github.com/Collaborne/gulp-mobile-splashscreens) creates various PNG splashscreens based on a - potentially transparent - SVG. Transparency of the SVG aside: svg2png will add transparent areas to at least some of the PNGs because the aspect ratios of the target PNGs are different (e.g. landscape vs. portrait).

Yet, iOS splashscreen images require a background color if the background should be different than black (which iOS automatically adds).

My initial idea was to create a new module following the svg2png pattern: use PhantomJS to add the background color. What spoke against it: The svg2png step is relatively expensive (adding ca. 20 sec on a state-of-the-art MacBook to create the PNGs for the 18 splashscreens). Hence, I feared that adding another PhantomJS-based step would create lots of overhead.

Do you have any advice how to add the background to the PNGs created by svg2png without adding too much overhead?

domenic commented 7 years ago

Well, one thing you could do is preprocess the SVG files ahead of time to add the background color. That doesn't require PhantomJS; you might be able to get away with simple string processing, but alternately you could use an XML parser + serializer if you wanted to be more robust.

ronnyroeller commented 7 years ago

preprocess the SVG files ahead of time to add the background color

That's indeed a good idea. But - as far as I can see - changing the SVG unfortunately won't help with the transparent areas that svg2png itself adds when the aspect ratio of the source SVG doesn't match the target PNGs.

domenic commented 7 years ago

It doesn't really "add" transparent areas; it just adds a width and height to the SVG. So if the SVG's overall background color is red, then it should always be red. I'd love to see an example where that fails.

kasbah commented 7 years ago

Just FYI, you can do this with Inkscape.

inkscape example.svg -z --export-background=red -e example.png
ronnyroeller commented 7 years ago

@domenic You are completely right. Looks like I made a mistake creating the SVG when testing this initially.