{"id":86,"date":"2015-07-17T01:05:26","date_gmt":"2015-07-16T23:05:26","guid":{"rendered":"http:\/\/xpam.pl\/blog\/?p=86"},"modified":"2015-07-17T01:05:26","modified_gmt":"2015-07-16T23:05:26","slug":"the-state-of-svg-rendering","status":"publish","type":"post","link":"https:\/\/xpam.pl\/blog\/?p=86","title":{"rendered":"The state of SVG rendering"},"content":{"rendered":"<p>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.<\/p>\n<p>What caught my eye when I opened the <a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/en\/d\/df\/Freebsd_logo.svg\">image <\/a>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.<\/p>\n<p>For (assumingly) correct reference render we will take the logo from the freebsd.org:<\/p>\n<figure style=\"width: 485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/www.freebsd.org\/logo\/logo-full.png\" alt=\"\" width=\"485\" height=\"175\" \/><figcaption class=\"wp-caption-text\">Official FreeBSD logo as seen on freebsd.org<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>Now let's jump right into it..<\/h2>\n<figure id=\"attachment_88\" aria-describedby=\"caption-attachment-88\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/firefox_42.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-88\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/firefox_42-300x120.png\" alt=\"FreeBSD logo rendered by Firefox\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/firefox_42-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/firefox_42.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-88\" class=\"wp-caption-text\">FreeBSD logo rendered by Firefox<\/figcaption><\/figure>\n<p>Firefox render is very basic, lacks most of the highlights and internal details.<\/p>\n<figure id=\"attachment_87\" aria-describedby=\"caption-attachment-87\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/chrome_43.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-87\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/chrome_43-300x120.png\" alt=\"FreeBSD logo rendered by Chrome\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/chrome_43-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/chrome_43.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-87\" class=\"wp-caption-text\">FreeBSD logo rendered by Chrome<\/figcaption><\/figure>\n<p>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.<\/p>\n<figure id=\"attachment_90\" aria-describedby=\"caption-attachment-90\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/ie_11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-90\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/ie_11-300x120.png\" alt=\"FreeBSD logo rendered by IE\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/ie_11-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/ie_11.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-90\" class=\"wp-caption-text\">FreeBSD logo rendered by IE<\/figcaption><\/figure>\n<p>Internet Explorer manages to produce the worst render of all programs.<\/p>\n<figure id=\"attachment_94\" aria-describedby=\"caption-attachment-94\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/opera_29.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-94\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/opera_29-300x120.png\" alt=\"FreeBSD logo rendered by Opera\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/opera_29-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/opera_29.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-94\" class=\"wp-caption-text\">FreeBSD logo rendered by Opera<\/figcaption><\/figure>\n<p>Opera follows Chrome since they use the same underlying engine.<\/p>\n<figure id=\"attachment_95\" aria-describedby=\"caption-attachment-95\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/safari_5_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-95\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/safari_5_1-300x120.png\" alt=\"FreeBSD logo rendered by Safari\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/safari_5_1-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/safari_5_1.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-95\" class=\"wp-caption-text\">FreeBSD logo rendered by Safari<\/figcaption><\/figure>\n<p>Safari also falls into the Webkit family with Chrome and Opera.<\/p>\n<figure id=\"attachment_96\" aria-describedby=\"caption-attachment-96\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/svg-edit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-96\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/svg-edit-300x108.png\" alt=\"FreeBSD logo rendered by svg-edit\" width=\"300\" height=\"108\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/svg-edit-300x108.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/svg-edit.png 629w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-96\" class=\"wp-caption-text\">FreeBSD logo rendered by svg-edit<\/figcaption><\/figure>\n<p>Svg-edit is an online JavaScript based tool.<\/p>\n<figure id=\"attachment_91\" aria-describedby=\"caption-attachment-91\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/imagemagick.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-91\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/imagemagick-300x120.png\" alt=\"FreeBSD logo rendered by Imagemagick\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/imagemagick-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/imagemagick.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-91\" class=\"wp-caption-text\">FreeBSD logo rendered by ImageMagick<\/figcaption><\/figure>\n<p>ImageMagick is very close but it has an extra bright ring going through the middle which apparently shouldn't be there.<\/p>\n<figure id=\"attachment_92\" aria-describedby=\"caption-attachment-92\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/inkscape.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-92\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/inkscape-300x120.png\" alt=\"FreeBSD logo rendered by Inkscape\" width=\"300\" height=\"120\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/inkscape-300x120.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/inkscape.png 523w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-92\" class=\"wp-caption-text\">FreeBSD logo rendered by Inkscape<\/figcaption><\/figure>\n<p>Inkscape is the only tool in this test that produced a proper render.<\/p>\n<figure id=\"attachment_89\" aria-describedby=\"caption-attachment-89\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/gimp.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-89\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/gimp-300x116.png\" alt=\"FreeBSD logo rendered by Gimp\" width=\"300\" height=\"116\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/gimp-300x116.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/gimp.png 512w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-89\" class=\"wp-caption-text\">FreeBSD logo rendered by Gimp<\/figcaption><\/figure>\n<p>Gimp is also very close but has the same imperfection as ImageMagick.<\/p>\n<figure id=\"attachment_93\" aria-describedby=\"caption-attachment-93\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/irfanview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-93\" src=\"http:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/irfanview-300x103.png\" alt=\"FreeBSD logo rendered by IrfanView\" width=\"300\" height=\"103\" srcset=\"https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/irfanview-300x103.png 300w, https:\/\/xpam.pl\/blog\/wp-content\/uploads\/2015\/07\/irfanview.png 611w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-93\" class=\"wp-caption-text\">FreeBSD logo rendered by IrfanView<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<p>And there you have it, the piss poor state of SVG rendering as of July 2015.<\/p>\n<h2>SVG protip<\/h2>\n<p>If you want to resize an SVG image and produce a high resolution PNG, the easiest method is to use ImageMagick from command line:<\/p>\n<pre class=\"lang:default decode:true \">convert -density 600 Freebsd_logo.svg Freebsd_logo.png<\/pre>\n<p>Density is specified in dpi by default. You determine the dpi based on the size of the print you actually want to produce.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"wp-post-signature\">\r\n<br \/>\r\n<br \/>\r\n<img src='https:\/\/xpam.pl\/aaaaff.png' title='Moonie' \/> Cen<br \/>\r\n<a href='https:\/\/github.com\/cen1'>GitHub<\/a><br \/>\r\n<a href='https:\/\/eurobattle.net'>Eurobattle.net<\/a><br \/>\r\n<a href='https:\/\/lagabuse.com'>Lagabuse.com<\/a><br \/>\r\n<a href='https:\/\/bnetdocs.org'>Bnetdocs<\/a><br \/>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=86"}],"version-history":[{"count":3,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=\/wp\/v2\/posts\/86\/revisions\/523"}],"wp:attachment":[{"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xpam.pl\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}