W3C home > Mailing lists > Public > www-svg@w3.org > July 2009

Re: Detecting SVG-in-HTML capabilities

From: Jeff Schiller <codedread@gmail.com>
Date: Thu, 23 Jul 2009 07:21:20 -0500
Message-ID: <da131fde0907230521sae7ad98le8c9d0a528695048@mail.gmail.com>
To: Simon Pieters <simonp@opera.com>
Cc: Geoffrey Sneddon <gsneddon@opera.com>, HTML WG <public-html@w3.org>, www-svg <www-svg@w3.org>
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
Received on Thursday, 23 July 2009 12:22:10 GMT

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