Svg rendering issue

[adamgamble]

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

Notice the difference in the gradient on the S.

[kasbah]

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

[adamgamble]

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]

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]

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

Here is safari's output:

[domenic]

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]

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]

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]

@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]

@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!