{"id":76,"date":"2005-04-02T08:30:31","date_gmt":"2005-04-02T14:30:31","guid":{"rendered":"\/?p=76"},"modified":"2005-04-02T08:30:31","modified_gmt":"2005-04-02T14:30:31","slug":"the-state-of-svg-2005-04-02","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2005\/04\/02\/the-state-of-svg-2005-04-02\/","title":{"rendered":"The State of SVG (2005-04-02)"},"content":{"rendered":"

I learned yesterday that someone had made the Firefox<\/a> logo available as a SVG<\/a> file for the purposes of putting onto T-Shirts, etc. I decided I'd use this opportunity to gauge the state of SVG renderers available to me, the average lay-person. <\/p>\n

<\/object><\/div>\n

For my little impromptu test, I chose 5 platforms: The Adobe SVG Viewer<\/a> Plugin for IE\/Firefox (the de-facto standard), The GIMP 2.2<\/a>, the latest Mozilla+SVG<\/a> Build, Amaya 9<\/a> and Opera 8<\/a> Beta 3 (which supports the SVG Tiny<\/a> profile only). The results speak for themselves...prepare to stretch your browser window width though as I used large images for the rendering (sorry).<\/p>\n

First, the version of the Firefox logo as rendered by Adobe's SVG Viewer plugin (in Internet Explorer and Firefox 1.02):<\/p>\n\n\n
\"Actual<\/td>\n\"Firefox<\/td>\n<\/tr>\n<\/table>\n

Pretty much as I expected, Adobe SVG Viewer renders the logo nearly flawlessly. A couple minor things: Colour of the SVG image is darker than the rasterized version. Also, the drop-shadow seems murky and a little too light in Adobe's version. Finally, look at the \"spotlight\" glow at the top of the globe. The rasterized version clearly shows the glow's arc beneath the tail while Adobe's version of the arc is lost amidst the darkening shadow. Personally I like the Adobe SVG version better. Btw, reading the SVG source, the image was built and rasterized in Adobe Illustrator 10, so it's interesting that there are differences between two different products from the same company.<\/p>\n

Next up at bat is The GIMP 2.2 :<\/p>\n\n\n
\"Actual<\/td>\n\"Firefox<\/td>\n<\/tr>\n<\/table>\n

I was really surprised and pleased with GIMP's ability to render the image, something which I only learned about today. Unfortunately, it doesn't get the globe's contents right at all in terms of shading and it fails to render a drop-shadow. Despite these flaws, it's really too bad The GIMP can't save\/export an image as SVG as it might be a viable means for me to create some SVGs for my web pages, etc...<\/p>\n

Third, we have the latest Mozilla+SVG Build:<\/p>\n\n\n
\"Actual<\/td>\n\"Firefox<\/td>\n<\/tr>\n<\/table>\n

You can see that the native implementation of SVG within Mozilla is really coming along, but the biggest glaring problem with this image is that it oddly clips the fox to the globe. The lighting model is also off (though not as bad as The Gimp's).<\/p>\n

I attempted to render the SVG in Opera Beta 8 and I didn't expect much, since it is a Beta and only has implemented the Tiny SVG profile. What came out was the outline of the logo with everything filled in as black. What was more surprising was that Amaya 9 rendered things identically to Opera, yet I had thought Amaya was supposed to be a pretty standards-comformant browser. This all makes me question if the SVG of the FF logo is not standards-comformant...<\/p>\n

I'd be really curious what other renderers out there are capable of, specifically Batik SVG<\/a> or KSVG<\/a>. If you want the actual SVG file that I used you can get it here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

I learned yesterday that someone had made the Firefox logo available as a SVG file for the purposes of putting onto T-Shirts, etc. I decided I’d use this opportunity to gauge the state of SVG renderers available to me, the average lay-person.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}