Re: Detecting SVG-in-HTML capabilities

On Thu, Jul 23, 2009 at 7:12 AM, Simon Pieters<> wrote:
> You can do:
>   <svg>
>    <desc>
>     <img src="fallback.png" alt="...">
>    </desc>
>    <circle cx="50" cy="50" r="30" fill="red"></circle>
>    <a xlink:href="foo.html"><text y="100"><![CDATA[This is SVG
> text]]></text></a>
>   </svg>

Actually my original solution was indeed to use the <desc> element,
but that's a misuses of the element.  Of course creating my own markup
tag is also probably a misuse. ;)

Better to just use the svg:g element with a class:

<!DOCTYPE html>
 <style type="text/css">
   @namespace svg "";
   svg text, svg a, svg a { display: none; }
   svg|svg svg|g.fallback { display: none; }
   svg|svg svg|text, svg|svg svg|a { display: block; }
   <g class="fallback">
     <img src="fallback.png"></img>
     <p>Please consider using a browser that supports SVG</p>
   <circle cx="50" cy="50" r="30" fill="red"></circle>
   <a href="foo.html"><text y="100">This is SVG text</text></a>


Received on Thursday, 23 July 2009 12:22:10 UTC