Re: Detecting SVG-in-HTML capabilities

Doug,

Your solution actually still has a problem:  text children and <a>
elements in the first child of the <switch> will still be rendered by
the non-SVG browser... bad!  You need some CSS. :)

Once you're in text/html land, I don't see a real strong reason to use
<foreignObject> for fallback, do you?  Just use CSS on a <g
class="fallback"> to trick out SVG-capable browsers as per my example.

Jeff


On Thu, Jul 23, 2009 at 9:05 AM, Doug Schepers<schepers@w3.org> wrote:
> 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:18:34 UTC