Home/ Questions/Q 8168195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:26:26+00:00

I have SVG documents which I display directly in browsers (currently IE and Firefox)

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0