SVG embed and performance

Tags:

Lately I've been able to look into SVG in web pages a bit deeper and while writing an article for my blog I decided to use SVG for the illustrations. It is possible to apply a solution where browsers supporting SVG get the SVG and browsers not supporting SVG will get a fallback to a PNG image of the SVG. It turned out this fallback solution come with a performance drawback in most browsers supporting SVG.

SVG is open, it's a W3C standard, it's possible to use JavaScript to interact with it and CSS can be applied to it. Since SVG are vector graphics it has huge advantages over pixel based graphic files such as PNG in many cases. To cut it short; often there is a lot to gain by using SVG. SVG rocks!

The support for SVG are at the moment good enough in most of the modern browsers. Opera, FireFox, Chrome and Safari handle the basic stuff in SVG so it's possible to do a lot already today. The drawback is no support at all in current versions of IE. IE9 seems to be shipped with SVG support so the future for SVG looks bright.

A List A Part has a nice tutorial on how to use and implement SVG in web pages. SVG can be embedded in web pages by several techniques and the most common way today is to use the <object> element like this: 


<object type="image/svg+xml" width="476" height="525" data="map.svg"> 

</object>

Inside the <object> element we can have a fallback solution which will kick in for browsers not supporting SVG. A PNG version of the SVG will I many cases work OK as a fallback. Users with non SVG supporting browsers will not get the full user experience but they will be presented with a nicely degraded version. I can live with that, and the code for such a fallback look like this: 


<object type="image/svg+xml" width="476" height="525" data="map.svg">
    <img src="map.png" width="476" height="525" />
</object>

This code is clean, simple and easy to apply. So fare so good.

A performance disappointment

This fallback solution take advantage of the <object> tag and it turns out that such a fallback solution comes with a sour taste when it comes to load performance. FireFox, Chrome and Safari, witch all support SVG, does load both the SVG applied to the <object> tag and the fallback PNG in the body of the <object> tag. In other words; if I use a PNG as fallback, these browsers load the PNG which never will be presented for the user and this affects the whole user experience.

Here is a small test I have run different browsers against. Here are some screenshots from each browsers profiler showing what is going on in each browser:

FireFox 3.6:

FireFox displaying a PNG beeing loaded inside a SVG embed tag

Chrome 5:

Google Chrome displaying a PNG beeing loaded inside a SVG embed tag

Safari:

Safari displaying a PNG beeing loaded inside a SVG embed tag

IE 9 Preview 1.9.7874:

IE9 displaying a PNG beeing loaded inside a SVG embed tag

Opera 10.60 is the only browser not loading the fallback:

Opera displaying a PNG not beeing loaded inside a SVG embed tag

Load performance is important so this should be considered when choosing SVG. Let's hope the day when we do not need a fallback soon will be a reality!

06.07.2010 09:27 - Posted by Trygve - Comments: 0 - Technical

Comments:

Post a Comment:

HTML Syntax: NOT allowed