What can be rendered in foreignObject element when SVG is embedded in HTML5?

Asked 27/7, 2011 at 18:16 Answered 30/11, 2023 at 14:10

HTML5 supports SVG via the svg element. Other languages can be embedded within SVG using the foreignObject element. HTML can be rendered in such, as can MathML. What else can be rendered with today's browsers? (Simple examples appreciated)

Example of HTML (canvas element) within the foreignObject element:

<!DOCTYPE html>
<html>
    <body>
        <svg id="svg1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <foreignObject x="0" y="0" width="200" height="100">
                <canvas id="myCanvas" width="200" height="100"></canvas>
            </foreignObject>
        </svg>
        <script>
            var canvas1 = document.getElementById("myCanvas");
            var context1 = canvas1.getContext("2d");
            context1.fillStyle = "lightblue";
            context1.fillRect(20, 40, 50, 50);
        </script>
    </body>
</html>

Example of MathML within the foreignObject element (use FF5):

<!DOCTYPE html>
<html>
    <body>
        <svg id="svg1" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
            <foreignObject x="50" y="50" width="100" height="100">
                <math xmlns="http://www.w3.org/1998/Math/MathML">
                    <mrow>
                        <mi>A</mi>
                        <mo>=</mo>
                        <mfenced open="[" close="]">
                            <mtable>
                                <mtr>
                                    <mtd><mi>x</mi></mtd>
                                    <mtd><mi>y</mi></mtd>
                                </mtr>
                                <mtr>
                                    <mtd><mi>z</mi></mtd>
                                    <mtd><mi>w</mi></mtd>
                                </mtr>
                            </mtable>
                        </mfenced>
                    </mrow>
                </math>
            </foreignObject>
        </svg>
    </body>
</html>

Noodlehead answered 27/7, 2011 at 18:16 Comment(0)

I prefer not to answer my own question, but it seems that the answer is: Nothing beyond HTML and MathML at this time (Aug 2011). When new info comes along, I'll remove my answer.

Noodlehead answered 15/8, 2011 at 18:40 Comment(0)

Technically, anything can go in a foreignObject tag. The question is whether or not the user agent will support it. For this, there seems to be no definitive answer. The SVG spec itself is quite (intentionally) vague on this:

The 'foreignObject' element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

Fortunately, the spec also defines the requiredExtensions attribute which accepts a space-delimited list of namespace URIs. This, in conjunction with a switch statement allows for semi-intelligent fallback logic based on the user-agent capabilities. Example:

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <!-- Render if extension is available -->
    <foreignObject width="100" height="50"
         requiredExtensions="http://example.com/foreign-object-spec-uri">
      <!-- Foreign object content -->
    </foreignObject>

    <!-- Else, do fallback logic -->
    <text x="0" y="20">Not available</text>
  </switch>
</svg>

What actually gets rendered seems to be entirely dependent on the user agent (browser, Batik, etc). So, similarly, the HTML5 spec has a short blurb, washing its hands on any non-HTML content found within foreignObjects.

The SVG specification includes requirements regarding the handling of elements in the DOM that are not in the SVG namespace, that are in SVG fragments, and that are not included in a foreignObject element. This specification does not define any processing for elements in SVG fragments that are not in the HTML namespace; they are considered neither conforming nor non-conforming from the perspective of this specification.

The original post states that "HTML can be rendered...as can MathML". Since <math> elements are now standard HTML5, I believe the browser is interpreting that code as HTML. Thus, it would be technically more correct to say the browser is rendering MathML as part of HTML.

And in my experience, sticking with [X]HTML will be the most compatible...and probably all you'll really need. Your examples above both work by using the parent HTML namespace. As you can see, you can insert HTML document fragments from both an SVG context or an HTML context, so it can be quite versatile.

Looper answered 4/8, 2011 at 16:15 Comment(3)

So on the one hand you're giving me a specification answer: The specs won't be definitive. Your response makes this case very well and is helpful. On the other hand, I'm looking for a pragmatic answer: What works today? And there are at least 2 languages that can be rendered, HTML and MathML. What else? – Noodlehead 9/8, 2011 at 12:45

@james, unfortunately I don't have a more definitive answer...I'm open to one if one actually exists. But I know 'what works today' depends on the browser. For example, the MathML in Chrome (13b) renders as plain text (as does ALL MathML). If you branch out into other parsers/renders (ie Batik), results will vary wildly. If you provide content that it doesn't know how to render, it should simply be ignored. I did, however, find reference to the requiredExtensions attribute (see updated post). This should at least give you a way to provide fallback logic. Hope this helps a little more... – Looper 9/8, 2011 at 16:15

Interesting. I had not seen the fallback option before. Thanks. – Noodlehead 9/8, 2011 at 16:58

How about HTML5 video and audio?

Demo: http://double.co.nz/video_test/video.svg

Obala answered 27/7, 2011 at 21:51 Comment(3)

Agree. But I've already listed HTML5. What else beyond HTML and MathML? – Noodlehead 28/7, 2011 at 1:45

I think the suite of standard web technologies supported by most browsers is HTML, CSS, JavaScript, SVG and Canvas. Some support MathML as well. I think that, beyond that, you start to move into plugins and browser-specific features. For example, you can probably embed Flash movies and Java applets inside of SVG using the HTML object tag, inside of a foreignObject tag. There's probably some weird, legacy Internet Explorer stuff you could put in there as well. What else do you have in mind? – Obala 28/7, 2011 at 17:2

Um, well, just what I asked. What languages can go in the foreignObject element that is in the svg element that is part of an HTML5 page that can be rendered by today's browsers. It may be that HTML and MathML are the only answers. If so, that's ok. – Noodlehead 28/7, 2011 at 17:21

I prefer not to answer my own question, but it seems that the answer is: Nothing beyond HTML and MathML at this time (Aug 2011). When new info comes along, I'll remove my answer.

Noodlehead answered 15/8, 2011 at 18:40 Comment(0)

-1

You may also embed XML (+ XSLT or CSS), XHTML (+ CSS) providing good xmlns...

Truck answered 30/11, 2023 at 14:10 Comment(0)

Recommended topics

Hot tags