SVG Text Layout

Chapter 12. Extending Your Toolbox

SVG text, as we’ve mentioned a few times already, is designed for incredibly detailed control of layout, but at the cost of little support for automated multiline text blocks. That was quickly identified as its main weakness; SVG’s support for flowing, multiline text was dramatically strengthened in the proposed SVG 1.2 specification, but even the changes in the completed 1.2 Tiny specification were not significantly adopted by browsers. Until SVG 2 support is widespread, the SVG <text> element is restricted to manually positioned text lines.

However, this does not mean that SVG cannot include multiline flowing text—it only means that to do so, it needs to make use of a <foreignObject> element and render HTML within the SVG context.

A Foreigner in an SVG File

The <foreignObject> element can be seen as a type of portal or escape hatch, shifting the document out of the realm of SVG layout and into any other XML layout mode supported by the browser. Two types of XML content were in particular considered when the SVG specifications were created: XHTML and MathML.

Warning

Internet Explorer never supported the <foreignObject> element, although it has been implemented for Microsoft Edge.

There are a number of bugs and inconsistencies in other browsers’ implementations, so be sure to test thoroughly.

It is solely within the purview of the browser as to what types of content can be rendered. Web-browser SVG implementations can usually render basic HTML, ...