Using SVG Logos

Update 1th November 2011: The Good, the Bad, and the Logo

If you visited this website recently you may have noticed the new logo/emblem that adorns the top centre of the design. For the last few days that logo was simply a PNG image. Well this evening I asked myself why? It’s obviously been designed as a vector graphic.

So that is what I made. I saved the logo as an SVG file from Adobe Illustrator and embedded that instead of a raster image. The file is around 20kb at its smallest (see problem below) which I can handle because it looks super sweet on my iPhone 3GS when I zoom in. Just think how it’ll look on the iPhone 4’s Retina display! Maybe I’ll do some browser testing in the Apple store, I got kicked out for that last time…

A small problem with objects

I’ve embedding an external SVG file using the <object> tag with my original PNG image as a fallback (I hope this works in Internet Explorer! will test tomorrow). The problem with this technique is that I don’t think it’s possible to have a transparent background – it defaults to a white square. The simple solution I found was to embed a background image within the SVG file. It works perfectly but doubles the file size.

If anyone knows a better solution let me know!

The other issue I came across was keeping the link back to my home page. Even with a jQuery click function the object tag doesn’t want to behave. I’m happy to let that go on this website, but with a more traditional top-left logo I’m not so sure.

Browser compatibility

Someone correct me if I’m wrong but this technique seems pretty fail safe to me as it just falls back to the PNG if there’s no SVG support. And I’m well aware that this website requires a modern browser to actually render properly at all, that’s the beauty of being my own client!

And if you’re wondering why I spent my evening obsessed with vectorising my website, see this article by Aral Balkan: “How to make your web content look stunning on the iPhone 4’s new Retina display” I found via twitter.