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

9 thoughts on “Display SVG in 97% of all Web Browsers

  1. I just noticed that the second RewriteRule could be completely omitted. The first one would have to look like this:
    RewriteRule ([A-Za-z0-9-]+).svg$ deng/index.php?filename=/stuff/svg/$1.svg?raw [L,T=text/html].
    Not tested, it’s saturday night, but should work.

  2. Unfortunately, it appears the HTTP_ACCEPT header is quite unreliable in this case. I tried your examples with Safari and Adobe SVG Viewer as well as Firefox with native SVG enabled, and both got me to the DENG-rendered versions. It seems to me the best way you’ll be able to tell if SVG isn’t already availble on the client’s browser is to run some Javascript detector.

    Cool to see you’re working on an SVG Tiny 1.1 compliant interpreter though!

  3. Unfortunately, it appears the HTTP_ACCEPT header is quite unreliable in this case

    Yeah as i said. I was hoping at least Firefox gets it right though.. However, as soon as DENG gets more mature, this would be a nice way of deploying SVG, as the SVG is deployed together with the renderer.

    Cool to see you’re working on an SVG Tiny 1.1 compliant interpreter though!

    Not yet, as both the new Flash Player and the compiler are not released yet. I do a lot of planning already, though.

  4. May I ask if you plan on implementing SMIL-based animation features? I think this is pretty much the hardest feature to implement, and using Flash Player for rendering does not make it any easier I think.

  5. Pingback: download free ringtones

Comments are closed.