HTML in SVG in HTML

Question

I have a simple SVG file which views fine in Firefox - its some wrapped text in a box using a foreignObject to include some HTML - the text is wrapped in the div:

<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>

But no amount of firkling can make this work as an included <svg> element within an HTML document. The div always ends up just being flowed with other divs in the document.

Either this is fundamentally not possible or I'm making some mistake with namespaces or something. But can anyone wrap the above SVG in an HTML document and have it display the text in a box of the given width x height at the given position (relative to the SVG or its container, of course)?

I've not seen an example of HTML in SVG in HTML, which makes me think its me being stupid or its impossible - the examples out there on the internet seem to just be how to embed HTML in SVG as above. I'm going deeper.

I don't understand. Does this: http://alohci.net/text/html/html-in-svg-in-html.htm.ashx not do what you want? What am I missing? — Alohci, Sep 18 '11 at 01:09
Please clarify: Are you trying to embed SVG in HTML, or in XHTML? — robertc, Sep 18 '11 at 03:04

score 45 · Accepted Answer · answered Sep 18 '11 at 03:16

45

This 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>

answered Sep 18 '11 at 03:16

robertc

74,533
18
193
177

Great - that shows it can be done in practice, and I'm not barking up completely the wrong tree. I suspect my html tests had no doctype, or the wrong namespaces in the wrong places or something. I remember when you never had to bother with these things (but that was 1995). – Spacedman Sep 18 '11 at 07:37
1

Update: actually this doesn't work on Firefox 3.6.17 on my Ubuntu box, but does on a FF 6.0.2 and Chrome 12.0.x on Windows. #updateverythingtime – Spacedman Sep 18 '11 at 07:51
1

@Spacedman That's because support for SVG in HTML, as opposed to support for SVG in XHTML, wasn't added until Firefox 4 when the switch to an HTML5 parser was made. If you want to support older browsers then you have to serve the document as `application/xhtml+xml` instead of `text/html` (changing the file extension to `.xhtml` works for local files). – robertc Sep 18 '11 at 10:56
2

@Spacedman [Here's the browser support matrix](http://caniuse.com/#feat=svg-html5) – robertc Sep 18 '11 at 10:59
Very useful thanks. Now to figure out why the entire structure I've built that wants to use this fails on the latest builds :) There may be more questions coming later! – Spacedman Sep 18 '11 at 13:07
Crashes for me in both Chrome v18 and Firefox v12.0 both under Ubuntu. Any suggestions on what I could change? – CyberFonic May 09 '12 at 02:26
@CyberED What do you mean by 'crashes'? Works fine for me in Firefox 12 on Fedora. – robertc May 09 '12 at 07:57
Your sample code works on Chrome 26, but not on IE10, regardless of your browser support matrix link. In fact, on IE10, `` is not supported at all. – Cœur Apr 26 '13 at 14:38
@Cœur According to [this post](http://schmerg.com/svg-support-in-ie9-close-but-should-try-harde) there was a defect filed about `foreignObject` support. [This is the most complete chart of SVG support I know of](http://www.codedread.com/svg-support.php) but it's a little dated now. – robertc Apr 26 '13 at 20:40

HTML in SVG in HTML

1 Answers1

Linked