Re: Detecting SVG-in-HTML capabilities

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).

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

Thanks,
Jeff

Received on Thursday, 23 July 2009 11:52:40 UTC