Embedding HTML in embedded SVG in HTML?

Question

It's allowed to embed SVG in HTML...

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hmmm....</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <text>Hello cruel world!</text>
        </svg>
    </body>
</html>

...and vice versa:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
    <foreignObject x="0" y="0" width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <h1>Goodbye cruel world...</h1>
        </body>
    </foreignObject>
</svg>

The specs say (23.2, third paragraph) (and I quote:) "If you want to embed SVG in XHTML in SVG in XHTML in SVG, it's okay...". I thought Wow, that's DEEP! and did this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Yeah!</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <foreignObject x="0" y="0" width="100%" height="100%">
                <body class="svgbody" xmlns="http://www.w3.org/1999/xhtml">
                    <h1>And hello again!</h1>
                </body>
            </foreignObject>
        </svg>
    </body>
</html>

But all browsers merge the body tag with the HTML5 body tag (the HTML5 body tag gets the svgbody class)... This is the fiddle (fullscreen); there's no body tag within the inline svg.

I don't know why, and I hope you can help me out! It might be solved by putting the SVG in a different file, but I don't want to hear about it. Why doesn't it work?

score 7 · Accepted Answer · answered Jun 07 '12 at 18:36

7

One thing to bear in mind is that the SVG document is discussing XHTML in SVG in an XML document. You are not using XML but HTML. It's a feature of the HTML parser that merges body tags in the way you see.

If you were using an XML parser, that merging wouldn't happen. To achieve this, you'd need to serve the document with an application/xhtml+xml content type. If you did that, you'd then need to fix other issues like adding a xmlns="http://www.w3.org/1999/xhtml" attribute to your html element.

It's much easier to follow robertc's advice.

answered Jun 07 '12 at 18:36

Alohci

78,296
16
112
156

Yep, I did some further reading and I found the XML namespace doesn't do anything. But is it valid to put a div tag right into the foreignObject? That would solve everything... – bopjesvla Jun 07 '12 at 19:25
`
` as the direct child of `` is fine. The validator doesn't seem happy with `` as the direct child of `
– Alohci Jun 07 '12 at 20:19
"It's a feature of the HTML parser that merges body tags in the way you see." Well that's interesting. – JAB Jun 08 '12 at 15:45
@JAB - If you want the gory details they're here: http://dev.w3.org/html5/spec/tree-construction.html#parsing-main-inbody. Search down for `A start tag whose tag name is "body"` and then the last paragraph in that section. FWIW, html tags are treated in a similar way. – Alohci Jun 08 '12 at 15:49
Hm, it seems kind of odd that using an `html` tag in such a way doesn't result in the `frameset-ok` flag being set to "not ok" but `body` tags do. What is the `frameset-ok` flag used for? The description of it there isn't very useful. – JAB Jun 08 '12 at 16:00
@JAB - It's used to determine whether a frameset tag should be processed or discarded. Web pages only work with either a frameset element or a body element, not both. If a body start tag has been seen, then the frameset tag should be discarded. However, the body start tag is optional, so the parser will infer it when necessary. If the body tag has been inferred, and then a frameset tag is seen, and the parser hasn't gone too far down the road, it backtracks and replaces the inferred body element with a frameset element. – Alohci Jun 08 '12 at 16:31

score 3 · Answer 2 · answered Jun 07 '12 at 17:36

Do you need the body element for something in particular? Why not just wrap your content with a non-privileged element:

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%">
        <foreignObject x="0" y="0" width="100%" height="100%">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div class="svgbody">
                    <h1>This sucks less</h1>
                </div>
            </body>
        </foreignObject>
    </svg>
</body>

Or even just omit the body tags inside the foreignObject altogether. They're not doing anything useful. — Alohci, Jun 07 '12 at 18:12

score 1 · Answer 3 · answered Dec 27 '12 at 12:41

If you want the html5 parser to ignore the svg and everything inside it () you could just put the svg into an comment; to let the svg parser ignore the html-note use cdata:

<html><body><svg>
<![CDATA[  <!--  ]]>
    <ForeingObject />
<![CDATA[   -->  ]]>
</svg></body></html>

http://www.w3schools.com/xml/xml_cdata.asp

try something like this...

score 0 · Answer 4 · edited May 23 '17 at 12:01

In HTML in SVG in HTML, I found the following example code. It works fine for me.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>

Still, note that support for inline SVG in HTML documents remains "quirky" at best, even today (March 2014).

@JeremyBanks : Thanks for pointing that out. As the link is 2 years old anyway, I just removed it... — John Slegers, Jun 09 '16 at 07:15

Embedding HTML in embedded SVG in HTML?

4 Answers4

Linked

Related