foreignobject

ForeignObject is an element in the Scalable Vector Graphics (SVG) specification that enables the inclusion of non-SVG markup inside an SVG document. It provides a bridge between SVG and other XML vocabularies, most commonly XHTML or HTML. The element defines a rectangular region on the SVG canvas, specified by x, y, width, and height attributes, in which foreign markup can be rendered.

To embed HTML content, the markup inside a foreignObject is placed in a different XML namespace, typically XHTML. For example: <foreignObject x="10" y="10" width="200" height="100"><div xmlns="http://www.w3.org/1999/xhtml">Hello, world</div></foreignObject>. The content is laid out and styled using the HTML/CSS rules of the embedded document, while the SVG container handles its transformation, clipping, and scene graph integration.

Rendering and styling considerations: The HTML inside a foreignObject is subject to the host document's CSS and the embedded XHTML document's own styles. Interaction may be affected by differences in event models across namespaces, and some browsers apply fonts and rendering differently inside foreignObject regions. Performance can be a concern for complex HTML inside SVG.

Browser support and limitations: Most modern engines support foreignObject, but behavior can vary with content complexity and browser. Some older or limited environments may ignore foreignObject or render it poorly. Security policies, cross-origin content, and accessibility considerations should be taken into account when embedding HTML inside SVG.