Question

I have just started using inline SVG to display images on a resource heavy website. However, I also have a fallback using switch and foreignobject tags so that older browsers should just display a png image in its place.

Here is the bare bones – there are more details at inline svg in html – how to degrade gracefully?

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xml:space='preserve'
  width="100" height="100">
<switch>
<g>
<!-- the svg goes here -->
</g>
<foreignObject width="100" height="100">
<img src="/some_image.png"/>
</foreignObject>
</switch>
</svg>

I thought that this would lighten the load on the server – e.g. for a page with 4 images, the browser gets everything in one hit, rather than making 5 trips to the server, 1 for the page and 1 for each img tag.

However, now that I have deployed this solution, I have discovered (by examining the server logs) that browsers are actually processing the img requests inside the foreignobject tag, regardless of whether they can handle SVG.

In other words, it’s increasing the load on the server since the page is much bigger (full of SVG) and the images are downloaded anyway, even though they are never displayed.

This seems crazy – I thought the idea of a switch was that the browser should process the first tag it understands (in my example, the g tag) and ignore the rest (the foreignobject in my example).

I have tested this in Firefox 17.0.1, Chrome 23.0.1271.95, Safari 5.1.7 and Opera 12.10 and they all do it.

Is there any way I can persuade the browsers that they really really don’t need to download the images?

Thanks

Chris

Answer 1

You can still make reference to the content of a <switch> child that isn’t directly displayed by using it in a <use> <filter> or <clipPath>. It’s only direct rendering of switch children that is suppressed.

The only way to stop downloading would be not to set the src attribute on the image unless you need it. You could check for SVG support using javascript e.g.

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")

and then set the src attributes if that returns true.