Re: Detecting SVG-in-HTML capabilities

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:42 GMT

On Thu, Jul 23, 2009 at 7:12 AM, Simon Pieters<simonp@opera.com> 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>
<html>
<head>
 <style type="text/css">
   @namespace svg "http://www.w3.org/2000/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; }
 </style>
</head>
<body>
 <svg>
   <g class="fallback">
     <img src="fallback.png"></img>
     <p>Please consider using a browser that supports SVG</p>
   </g>
   <circle cx="50" cy="50" r="30" fill="red"></circle>
   <a href="foo.html"><text y="100">This is SVG text</text></a>
 </svg>
</body></html>

Jeff