{"id":22,"date":"2005-05-14T15:48:28","date_gmt":"2005-05-14T20:48:28","guid":{"rendered":"http:\/\/wahlers.com.br\/claus\/blog\/display-svg-in-97-of-all-web-browsers\/"},"modified":"2005-10-28T14:37:06","modified_gmt":"2005-10-28T19:37:06","slug":"display-svg-in-97-of-all-web-browsers","status":"publish","type":"post","link":"http:\/\/wahlers.com.br\/claus\/blog\/display-svg-in-97-of-all-web-browsers\/","title":{"rendered":"Display SVG in 97% of all Web Browsers"},"content":{"rendered":"<p>Inspired by a <a href=\"http:\/\/www.markme.com\/jd\/archives\/007645.cfm\" title=\"John Dowdell: SVG degradation\">blog post by John Dowdell<\/a>, who was raising the question if it would be possible to trigger a SVG rendering SWF to do the work in case the user&#8217;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.<\/p>\n<p>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):<\/p>\n<ul>\n<li><a href=\"http:\/\/codeazur.com.br\/stuff\/svg\/flashenabled.svg\">flashenabled.svg<\/a><\/li>\n<li><a href=\"http:\/\/codeazur.com.br\/stuff\/svg\/toucan.svg\">toucan.svg<\/a><\/li>\n<li><a href=\"http:\/\/codeazur.com.br\/stuff\/svg\/dani.svg\">dani.svg<\/a><\/li>\n<li><a href=\"http:\/\/codeazur.com.br\/stuff\/svg\/ad.svg\">ad.svg<\/a><\/li>\n<\/ul>\n<p>You should notice that although the SVGs are physically located in <code>\/stuff\/svg\/<\/code> 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.<\/p>\n<p>To get the SVG without the redirect, append  <code>?raw<\/code> to the URLs above.<\/p>\n<p>I am using mod_rewrite to redirect requests for SVGs to DENG:<\/p>\n<blockquote><p><code>&lt;ifmodule mod_rewrite.c&gt;<br \/>\nRewriteEngine On<br \/>\nOptions FollowSymLinks<br \/>\nRewriteBase \/stuff\/svg\/<br \/>\nRewriteCond %{QUERY_STRING} !(raw) [NC]<br \/>\nRewriteCond %{HTTP_ACCEPT} !(image\/svg\\+xml) [NC]<br \/>\nRewriteRule ([A-Za-z0-9-]+).svg$ deng\/index.php?filename=\/stuff\/svg\/$1.svg.orig [L,T=text\/html]<br \/>\nRewriteRule ([A-Za-z0-9-]+).svg.orig$ $1.svg?raw [L]<br \/>\n&lt;\/ifmodule&gt;<\/code><\/p><\/blockquote>\n<p>I am in no way a mod_rewrite\/Apache\/whatever expert, so the rules may be simplified yet, i don&#8217;t know. Comments on that are welcome.<\/p>\n<p>The constraints are:<\/p>\n<ul>\n<li>I am checking the HTTP_ACCEPT header field for <code>image\/svg+xml<\/code> 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&#8217;s why DENG is always triggered in those browsers. I don&#8217;t know how Firefox 1.1 is going to behave, but my guess is that this is actually going to work in Firefox.<\/li>\n<li>This method obviously does not work if you want to embed SVG inline (like via <code>&lt;img src=\"flashenabled.svg\"&gt;<\/code> or <code>&lt;object&gt;<\/code><\/li>\n<li>DENG1 is still somewhat limited, so if you want to have full SVG-T compliance, you&#8217;d have to wait for DENG2<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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) [&#8230;] <a href=\"http:\/\/wahlers.com.br\/claus\/blog\/display-svg-in-97-of-all-web-browsers\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7,4],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-css","category-deng","category-flash"],"_links":{"self":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":0,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"wp:attachment":[{"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wahlers.com.br\/claus\/blog\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}