Re: Detecting SVG-in-HTML capabilities

On Thu, 23 Jul 2009 13:51:53 +0200, Jeff Schiller <codedread@gmail.com>  
wrote:

> On Thu, Jul 23, 2009 at 4:21 AM, Geoffrey Sneddon<gsneddon@opera.com>  
> wrote:
>> I'm not sure we want to advocate use of hasFeature, as it seems better  
>> to
>> check for capability rather than some claim to support.
>>
>> Given an HTML-with-SVG document, you could just:
>>
>> var svg = document.getElementsByTagName("svg")[0];
>> var supported = svg.namespaceURI == "http://www.w3.org/2000/svg";
>>
>
> It just seems odd to me that the value of the 'supported' variable
> above will depend on whether the first <svg> element in the HTML doc
> was created programmatically (true for most browsers today) or
> declaratively (false for all browsers today).

You can do:

    var div = document.createElement('div');
    div.innerHTML='<svg></svg>';
    var supported = div.firstChild.namespaceURI ==  
'http://www.w3.org/2000/svg';


> Of course if it's my document maybe I always know that.
>
> On a slightly different note, it's also always bugged me that I cannot
> reliably provide fallback content for inline SVG without using script.
>  Can we figure out a way to do this declaratively?  A <nosvg> tag? :)
> Unfortunately that's only part of the problem because browsers that
> don't understand SVG elements will still try to display text nodes and
> <a> elements.
>
> I suppose one solution would be something like:
>
> <!DOCTYPE html>
> <html>
> <head>
>   <style type="text/css">
>     @namespace svg "http://www.w3.org/2000/svg";
>     svg text, svg a { display: none; }
>     svg|svg svg|text, svg|svg svg|a { display: block; }
>   </style>
> </head>
> <body>
>   <svg>
>     <fallback>
>       <img src="fallback.png"></img>
>       <p>Please consider using a browser that supports SVG</p>
>     </fallback>
>     <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>
>
> Problems:
>
> 1) Other elements would have to be added to the CSS selectors: tspan,
> textPath, title, desc
> 2) The above assumes that a browser that supports SVG-in-HTML also
> must support CSS Namespaces

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>

Unfortunately Opera supports CDATA sections in HTML so the text will show  
up in Opera. The CSS solution would work for Opera though.

-- 
Simon Pieters
Opera Software

Received on Thursday, 23 July 2009 12:13:09 UTC