8

I am trying to properly implement the switch tag for a foreignObject tag in SVG so that Internet Explorer can display something else (nothing new in IE, always leaving features out). The documentation is almost perfectly clear on how to do this:

<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
     evaluates to true (i.e., the user agent supports XHTML
     embedded within SVG). -->
<foreignObject width="100" height="50"
               requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
  <!-- XHTML content goes here -->
  <body xmlns="http://www.w3.org/1999/xhtml">
    <p>Here is a paragraph that requires word wrap</p>
  </body>
</foreignObject>
<!-- Else, process the following alternate SVG.
     Note that there are no testing attributes on the 'text' element.
     If no testing attributes are provided, it is as if there
     were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
  <tspan x="10" y="10">Here is a paragraph that</tspan>
  <tspan x="10" y="20">requires word wrap.</tspan>
</text>

The example is nice and clear and shows how to use the requiredExtensions attribute. However, the hyperlink "http://example.com/SVGExtensions/EmbeddedXHTML" is meaningless to me. What would I have to put in place of this in order to denote that XHTML is the requiredExtension for this foreignObject?

1

2 Answers 2

9

I have found the answer after much fiddling. The example should probably be added to the documentation... I have tested in IE, FF, and Chrome so far and all three have treated the switch properly:

Instead of using the "requiredExtensions" attribute, I used the "requiredFeatures" attribute and linked to "http://www.w3.org/TR/SVG11/feature#Extensibility"

So it would look like:

<switch>
  <foreignObject width="100" height="50" 
                 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
    <!-- whatever external user-agent stuff -->
  </foreignObject>

  <!-- Alternate SVG content if foreignObject is not supported -->
</switch>

This works for testing if foreignObject is supported by the user-agent, but it isn't perfect as you still aren't denoting which external namespace you plan to use in the foreignObject which that user-agent may not support. It works better than nothing though.

1
  • One warning: although this takes care of IE, which doesn't support foreignObject at all, it won't work when viewing an SVG in an environment (e.g., a custom graphics programs like Illustrator) that supports foreignObjects generically but not XHTML in particular.
    – AmeliaBR
    Commented Jul 4, 2014 at 18:48
0

Unfortunately, no standard says what to do but Firefox uses http://www.w3.org/1999/xhtml to indicate that it supports xhtml in foreignObject tags (and http://www.w3.org/1998/Math/MathML for mathml). I believe other UAs may have copied this but I haven't checked.

1
  • Although they use this in documentation, I haven't seen a browser that treats this right. See my answer that uses "requiredFeatures" instead of "requiredExtensions"
    – Marty
    Commented Oct 19, 2012 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.