How can I display HTML within an SVG document?

Question

I have SVG documents which I display directly in browsers (currently IE and Firefox) - by loading the *.svg directly into the browser. These documents contain text which I would like to display as "HTML", e.g. rendered in an HTML window/panel with word-wrap, subscripts and possibly scrolling. The SVG and HTML are well formed and managed under the correct namespaces.

A typical sort of element (without styles) might be:

<svg  xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="100" y="200" width="300" height="400"/>
    <h:p xmlns:h="http://www.w3.org/1999/xhtml">
This is an <h:i>italic</h:i> and a <h:sub>subscript</h:sub> in a ...
very long ... paragraph which will need word wrapping and maybe scrolling
    </h:p>
  </g>
</svg>

It would be nice to be able to locate the text within a given bounding box (e.g. the <rect/>)

Note that at present I do not want to embed SVG within an HTML document and there is no need for recursion (e.g. no SVG within the HTML).

UPDATE: Encouraged by @Sirko I found this article on the web it's 4 years old.

I think you'll have to take the HTML with inline SVG route if you want it to work in IE (and consistently across browsers). — Erik Dahlström, Jun 28 '12 at 15:10
@Erik you mean HTML contains SVG contains HTML? or HTML contains SVG contains refToParentHTML? Do if you have examples? Please add as answer if you do and I'll +1 it — peter.murray.rust, Jun 28 '12 at 15:22
The example code snippet in the question looks like it could be done with just HTML+CSS, or HTML with an svg background-image or some inline svg. Could you explain why you don't want to do it like that? — Erik Dahlström, Jun 28 '12 at 20:50

Sirko · Accepted Answer · 2012-06-28T11:59:12.030

7

In general the <foreignObject> shall be used for including different markups inside of SVG (see MDN docu on this). In your case this other markup would be XHTML.

<svg  xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="100" y="200" width="300" height="400" style="fill: none; stroke: black; stroke-width: 1px;"/>
    <foreignObject x="100" y="200" width="300" height="400">  
      <!-- XHTML content goes here -->  
      <body xmlns="http://www.w3.org/1999/xhtml">  
        <p>
            This is an <i>italic</i> and a <sub>subscript</sub> in a ...
            very long ... paragraph which will need word wrapping and maybe scrolling
        </p>
      </body>  
    </foreignObject>  

  </g>
</svg>

This, however, has quite some compatibility problems between the major browsers!

edited Jun 28 '12 at 11:59

answered Jun 28 '12 at 11:43

Sirko

72,589
19
149
183

What kind of compatibility problems? – Alohci Jun 28 '12 at 11:51
@Alohci Actually the above code seems to render only in FireFox and Chrome for me. Opera and IE9 do not show any text, but no errors either ... – Sirko Jun 28 '12 at 11:59
+1 @Sirko this is exactly the sort of thing I was wanting. It doesn't surprise me there are problems.I'll wait a bit to see if others have ideas and experience – peter.murray.rust Jun 28 '12 at 12:23
@Sirko works for me in firefox but not in IE (just as you indicated). The Firefox appears to clip without scrolling - but that's probably manageable as I know the number of characters and their screen location – peter.murray.rust Jun 28 '12 at 12:55

score 1 · Answer 2 · edited May 23 '17 at 12:07

Not only can you include HTML in SVG, but you can even include HTML in SVG in HTML in SVG in HTML ...

Here's some example code from HTML in SVG in HTML :

<!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). For example, try this Codepen in different browsers.

How can I display HTML within an SVG document?

2 Answers2

Linked