Display SVG in 97% of all Web Browsers

Inspired by a blog post by John Dowdell, who was raising the question if it would be possible to trigger a SVG rendering SWF to do the work in case the user’s browser is not SVG enabled, i sat down last night to figure out if this could be solved using mod_rewrite on the serverside in combination with DENG.

It actually is possible, with a few constraints. Check out these SVGs (and make sure you have at least the Flash Player 6 installed and enabled):

You should notice that although the SVGs are physically located in /stuff/svg/ on my server, your browser loads the DENG engine (75kb, and only the first time, as then it is cached), which then loads the original SVG and renders it.

To get the SVG without the redirect, append ?raw to the URLs above.

I am using mod_rewrite to redirect requests for SVGs to DENG:

<ifmodule mod_rewrite.c>
RewriteEngine On
Options FollowSymLinks
RewriteBase /stuff/svg/
RewriteCond %{QUERY_STRING} !(raw) [NC]
RewriteCond %{HTTP_ACCEPT} !(image/svg\+xml) [NC]
RewriteRule ([A-Za-z0-9-]+).svg$ deng/index.php?filename=/stuff/svg/$1.svg.orig [L,T=text/html]
RewriteRule ([A-Za-z0-9-]+).svg.orig$ $1.svg?raw [L]

I am in no way a mod_rewrite/Apache/whatever expert, so the rules may be simplified yet, i don’t know. Comments on that are welcome.

The constraints are:

  • I am checking the HTTP_ACCEPT header field for image/svg+xml and do not redirect in case it is set. Unfortunately, neither Opera 8 nor IE6 with the Adobe SVG control set this mime type, that’s why DENG is always triggered in those browsers. I don’t know how Firefox 1.1 is going to behave, but my guess is that this is actually going to work in Firefox.
  • This method obviously does not work if you want to embed SVG inline (like via <img src="flashenabled.svg"> or <object>
  • DENG1 is still somewhat limited, so if you want to have full SVG-T compliance, you’d have to wait for DENG2