Svg rendering issue - Githubissues

domenic / svg2png

Converts SVGs to PNGs, using PhantomJS

Other

585 stars 134 forks source link

Svg rendering issue #81

Open adamgamble opened 7 years ago

adamgamble commented 7 years ago

I think this might be a phantomjs issue, but on the off chance it isn't i'll post it here.

This svg https://www.dropbox.com/s/q3rqixk6vxxuzqw/test.svg?dl=0 loses some of the gradient detail in the lettering.

Here is what it should look like

and here is the output from svg2png test

Notice the difference in the gradient on the S.

kasbah commented 7 years ago

This is what the SVG looks like for me on Linux Firefox 50.1

adamgamble commented 7 years ago

Interesting, its using webfonts and for some reason the fonts don't load for you. Can you try chrome? It renders for me on osx in chrome/safari/firefox fine.

domenic commented 7 years ago

The Dropbox viewer seems to give results similar to @kasbah's, but locally downloading the SVG gives results similar to the intended one on Windows Firefox/Edge/Chrome. It'd be interesting to test Safari given that WebKit is used by both PhantomJS and Safari...

adamgamble commented 7 years ago

Whoops sorry about that. Dropbox apparently can't render svgs well :)

Here is safari's output:

domenic commented 7 years ago

Hmm OK. Seems very likely to be a PhantomJS issue, but maybe some of the resizing/size attribute adding that svg2png does is changing dimensions in such a way as to mess up the gradients? Worth investigating a bit, but I'm not that hopeful unfortunately.

adamgamble commented 7 years ago

If it is a phantom js issue, do you know of any alternatives that might be able to do the same thing with?

BTW as a side note your script has made my life super easy, and I appreciate the work on it!

domenic commented 7 years ago

Thanks for the kind words!

In the future we might be able to investigate headless Chrome of some sort. You might also try the inkscape or graphicsmagick command-line tools; in general they give inferior results but maybe for this one they'd work better.

It appears on Windows 10 Edge you can right-click > save as png. It sounds like you're on Mac though.

kasbah commented 7 years ago

@adamgamble Inkscape is definitely an alternative worth investigating:

inkscape input.svg -z -e output.png

But webfonts won't work with it, for sure. The best approach might be to convert all fonts to paths first.

adamgamble commented 7 years ago

@domenic @kasbah so i've been able to sidestep the issue by using opentype.js to convert the fonts to paths first. Then it renders correctly.

So thanks for your help!