Skip to main content

HTML Guide

HTML start tag “img” in a foreign namespace context.

An img tag placed inside an SVG or MathML element creates a namespace error because img is an HTML element, not an SVG or MathML element.

SVG and MathML use their own XML-based namespaces, and HTML elements like img cannot be directly inserted inside them. To include raster images within SVG, the SVG image element should be used instead, and external math images must be handled outside MathML.

Explanation:

  • The HTML img element is only allowed in the HTML namespace.
  • Placing <img> inside an <svg> or <math> tag triggers a namespace conflict, as img is not a valid child of these elements.
  • The SVG standard provides the <image> element for embedding bitmap images within SVG.

Incorrect:

<svg width="100" height="100">
  <img src="picture.png" alt="Example" width="100" height="100">
</svg>

Correct:

<svg width="100" height="100">
  <image href="picture.png" x="0" y="0" width="100" height="100" />
</svg>

Use the SVG image element instead of HTML img whenever embedding images inside SVG.

Learn more:

Related W3C validator issues