Web Applications, Work

Using SVG in the modern website

Using SVG when you are putting together a new website is a pretty sound decision, it’s over a decade old, well-supported by browsers and the ability to scale images accurately via CSS is pretty compelling when you are rapidly trying out different layouts and proportions.

Of course until recently IE has been the bugbear but IE9 actually has pretty decent SVG support. It is now worth thinking of using SVG as the general case and IE8 as the exception which can be switched to PNG via Javascript. The first iteration of Wazoku Idea Spotlight used SVG exclusively and the second iteration will do a Modernizer based switchout for IE8 but essentially still be SVG based.

Therefore I was pretty confused when I was taking a random check at the app in IE9. Instead of displaying alt text or the images instead there was just whitespace. Quickly opening the images revealed that IE was quite happy to render them at full window size and that there was no issue with loading them.

After some confused Googling I found out that the issue was that the previous generation of SVGs were generated straight out of Adobe Illustrator where as this set are going through Inkscape where I am tweaking the colour, size and so on. Inkscape does not allow you by default to specify a property called the viewbox. Instead this is only created if you export your file as an Optimized or Plain SVG. It is an outstanding feature when you go looking through the Inkscape bug list but it is a really obscure bug (hence this blog) to track down. The reason the images were appearing as blank is that without a viewbox IE9 crops the image to the CSS dimensions rather than scaling it. Firefox and Chrome scale it as you would expect. Essentially I was seeing the top-left 32 pixels of an image that IE9 considered to be 640px square, overflow hidden.

Having found the problem I then converted a test image to Optimized SVG, who doesn’t love Optimized things after all? Well the answer to that is Chrome. Firefox (probably due to having the longest SVG heritage) did the right thing in both cases and IE9 was fine with the Optimized version. Chrome stretched the image out on the vertical and via the Developer tools it was possible to see that the Dimensions value for the image was completely incorrect with a letterbox set of dimensions rather than a square.

In the end the thing that worked everywhere was Inkscape’s Plain SVG format. Something I am fine to live with. It would be nice to be able to set a viewbox from Inkscape’s Document Properties though and I will be keeping an eye out for it on the release notes in future.


Google Chrome: what browses what?

Okay, so nearly a month after it lauched how is Google Chrome changing the way we browse? Well for Linux and OSX users, not very much. However on Windows, Chrome is finding a place into my day to day browsing. Firstly I have started to tend to use it with Google products. There’s nothing rational about this, it seems to be just brand fetishism.

I have also started to use it for any site that uses Gears. Since Gears is built in to the browser it just seems to make sense. I liked Gears a lot before Chrome and although I have it installed in Firefox I figure it is easier to use the features when they are integrated into the browser and have the advantage of the V8 Javascript engine.

I also use Google Chrome on sites where I actually expect a lot of Flash, script and Fail. Being able to kill poorly programmed sites while keeping on trucking with the browser is a pretty killer feature.

Finally I also use it to view links where I want to look at something briefly and then do nothing more with it. I don’t know whether it really makes a difference but I always wonder how much stuff Firefox caches when I am briefly checking a link for something a blog post.