*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.
9 Comments
Brad Neuberg
On the tag itself, try style=”bgcolor: none”. Inside the file on the root also try setting bgcolor to none (might not be needed). See if that works.
David Bushell
Hi Brad thanks for the tip I’ll be sure to test that when I get time.
Simon
Your design and web dev skills are going from strength to strength, Dave. I hope to work with you again some day.
David Bushell
Thanks mate! I’m sure we’ll cross paths again :) I’ve got a few projects in the pipeline but not enough free time.
Simon
Haven’t we all
Rachel
Have you found any particular advantages to using the SVG or, in particular, any drawbacks? It’s something I’ve been considering for my own website, however when I look at the code via Chrome’s “Inspect Element” it looks like it creates a HUGE amount of code for that one element.
Would this be affecting the page load time, or is it just generated as a way of encoding/displaying the SVG in a code format? ?The page loaded relatively quickly for me online, but on my iphone it’s taken around 25-30 seconds. Though, having said that, it does look pretty good!Sorry for the slightly novice questions, I’m just quite new to using SVG’s myself.
David Bushell
The big advantage is the ability to scale. Using a normal JPEG or PNG you’re stuck at 72ppi, most screens have a better resolution that this, iPhone 4 for example is over 300dpi. Zooming is natural on phones and normal images look terrible, vectors will always look perfectly crisp. Typically vector files like SVG should be smaller than an equivalent image (and can be compressed when sent to the browser).
Chrome’s Inspector is not a true representation of the HTML. Try viewing the source directly (right/control click > view source) you’ll see it’s just like using a normal image (a single tag). Chrome’s Inspector expands this into the raw XML so you can edit it.
Not sure why it’s slow on your iPhone but I doubt the SVG usage is to blame :) Could be hundreds of reasons.
Rachel
Just tried reloading the page on my iPhone 4 at home and it’s loaded within 3 seconds! Must have been bad reception at work. :) Having never used Chrome before Iw asn’t too sure why it generated that code! Thanks though. Definitely going to use the SVG myself then. :) It does look beautiful on the iPhone, that’s for sure!
David Bushell
Thanks Rachel, that’s good to here! Maybe I’ll do a post on all the pros and cons to consider. (If I ever get time to research more!)
Your Comment…