Re: Detecting SVG-in-HTML capabilities

Hi, Folks-

Jeff Schiller wrote (on 7/23/09 8:21 AM):
> 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.

Yes, yes it is. :)  I thank Henri for that fallback-in-<desc> chestnut.


> Of course creating my own markup tag is also probably a misuse. ;)

Here's some reasonable SVG that should work right:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <!-- stuff -->
</head>
<body>

   <p>Some HTML...</p>

   <svg xmlns="http://www.w3.org/2000/svg">
     <switch>
       <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG">
         <!-- some SVG content goes here -->
       </g>
       <foreignobject x="50" y="50" width="150" height="150">
         <div xmlns="http://www.w3.org/1999/xhtml">
           <img src="fallback.png"></img>
         </div>
       </foreignobject>
     </switch>
   </svg>

</body>
</html>

Since an SVG UA understands SVG (the required feature string), it should 
only render the first child (the <g>, and never the <foreignobject>.

Or, if you wanted to be trickier...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <!-- stuff -->
</head>
<body>

   <p>Some HTML...</p>

   <svg xmlns="http://www.w3.org/2000/svg">
     <foreignobject width="0" height="0">
       <div xmlns="http://www.w3.org/1999/xhtml">
         <img src="fallback.png"></img>
       </div>
     </foreignobject>

     <!-- some SVG content goes here -->
   </svg>

</body>
</html>

Since SVG doesn't render elements that have 0 width and height, the 
content of the <foreignobject> should never render in SVG, but would in 
a UA that.

I still favor a fallback container element in HTML that would work for 
any generic content [1], including SVG and MathML and anything else 
without requiring tricks or the existence of a fallback mechanism in the 
target language, but that didn't gain traction.


[1] http://wiki.whatwg.org/wiki/Extensions#Proposal_2:_Extensibility_Element

Regards-
-Doug Schepers
W3C Team Contact, SVG and WebApps WGs

Received on Thursday, 23 July 2009 14:05:42 UTC