News Article

Playing with SVG

I've been playing a bit with displaying SVG (Scalable Vector Graphics) images on webpages. Particularly getting the best results accross browsers. I like SVGs because they're so small in file size and I can tweak them in a text editor. Also when you zoom in they don't distort.

There have been a few problems that I've had to overcome, and Googling didn't produce all of the answers, well not explicitly anyway. The options for displaying SVGs  within a webpage are either inline, or using one the following html tags: embed, object, iframe or img. And I wanted the default background of my image to be that of the page.

I like the idea of using the img tag best as displaying an image is what I want to to. It works for gif, png and jpg so adding svg to this list would be ideal. The problem with this is lack of support accross browsers. It works in Chrome, Safari and Firefox 4 (beta) but not in Firefix 3.x or IE. Actually, the only way to get it working in IE is with Adobe's SVG viewer plugin as there is no support for SVG at all, although it is coming in IE9.

Adobe recommends using the embed tag for SVGs, and as using the combination of embed and the custom wmode property set to 'tranparent' is the only way to get a transparent background using the SVG viewer I tried this.

It seemed pretty good until I started ctrl+mouse scrolling to zoom in and out. In both Chrome and Safari, scroll bars started to appear. Also, in Safari the background of the image was white and the only way I found to change this was to use a style attribute in the svg tag in the svg file to change the background colour. Now I can live with this, but it's not ideal as changing the background color only seems to effect Safari and as I don't use safari if I change the color I'm likely to forget to also change the image itself. Also if I wanted to put a background image accross the page, it just wouldn't work.

It seems the answer is to use the img tag for those that suppot it, the embed tag for those that don't and an alternative image for those that don't support SVG at all like my android browser or IE without the plug-in. I discounted object and iframe due to the background colours not being transparent and inline svg just makes my html too messy and isn't supported accross the board.

With the help of Google I managed to cobble some javascript together for svg support detection so I can present the best solution depending on capabilities. I used the img tag within the html as, in my opinion it worked the best, without scrolling or background problems in the browsers that support it. I then used javascript to detect support for svg, if not replace with PNG-24. If yes and adobe is being used or there is no svg img support change to an emed tag.

What's going on?

Welcome to our Blog & News page. Here you can keep up to date with what's going on at Web Marmalade.

You can use the keywords below to filter the articles shown.