The state of SVG rendering

This is an interesting little experiment I did when I was searching for a FreeBSD SVG logo to put on a poster. As you might know, SVG format is for vector images, allowing for infinite scaling without pixelation, which is exactly what you need, if you are going to print something on a big quality poster. Either that or you need originals in huge sizes for downscaling.

What caught my eye when I opened the image with Firefox was the lack of detail inside the devil ball which should be visible. This sent me on a little crusade to find out which browsers and image programs are actually capable of rendering it correctly.

For (assumingly) correct reference render we will take the logo from the freebsd.org:

Official FreeBSD logo as seen on freebsd.org

 

Now let’s jump right into it..

FreeBSD logo rendered by Firefox
FreeBSD logo rendered by Firefox

Firefox render is very basic, lacks most of the highlights and internal details.

FreeBSD logo rendered by Chrome
FreeBSD logo rendered by Chrome

Chrome takes some artistic freedoms and completely screws up in the process. The elements are there but layered improperly plus the horns are now black. Obvious transparency and overlay issues.

FreeBSD logo rendered by IE
FreeBSD logo rendered by IE

Internet Explorer manages to produce the worst render of all programs.

FreeBSD logo rendered by Opera
FreeBSD logo rendered by Opera

Opera follows Chrome since they use the same underlying engine.

FreeBSD logo rendered by Safari
FreeBSD logo rendered by Safari

Safari also falls into the Webkit family with Chrome and Opera.

FreeBSD logo rendered by svg-edit
FreeBSD logo rendered by svg-edit

Svg-edit is an online JavaScript based tool.

FreeBSD logo rendered by Imagemagick
FreeBSD logo rendered by ImageMagick

ImageMagick is very close but it has an extra bright ring going through the middle which apparently shouldn’t be there.

FreeBSD logo rendered by Inkscape
FreeBSD logo rendered by Inkscape

Inkscape is the only tool in this test that produced a proper render.

FreeBSD logo rendered by Gimp
FreeBSD logo rendered by Gimp

Gimp is also very close but has the same imperfection as ImageMagick.

FreeBSD logo rendered by IrfanView
FreeBSD logo rendered by IrfanView

IrfanView uses an external plugin to render SVGs that is not free. If we ignore the overlay text for a moment, the image suffers from Chrome-like problems except it’s of absolute terrible quality.

 

And there you have it, the piss poor state of SVG rendering as of July 2015.

SVG protip

If you want to resize an SVG image and produce a high resolution PNG, the easiest method is to use ImageMagick from command line:

Density is specified in dpi by default. You determine the dpi based on the size of the print you actually want to produce.

 

Cen
GitHub
Eurobattle.net
Lagabuse.com
Bnetdocs