HTML Guides for inline svg

An <svg> element can contain child elements and the whitespace between them, but no text of its own.

The most common cause is a typo in the start tag. An extra >, as in <svg viewBox="0 0 24 24">>, closes the tag and leaves the second > behind as a text character inside the SVG. The validator also reports this error for a   entity, a stray word, or fallback text such as "Close" written between the child elements. Line breaks and indentation between elements are fine.

Browsers don't draw text that sits directly inside <svg>, so the graphic looks correct and the mistake is easy to miss. To show text in the graphic, put it in a <text> element. To give the graphic an accessible name, add a <title> element inside the <svg>.

Text placed directly inside a <g> or another SVG container triggers the same kind of error, naming that element instead of svg.

Invalid example: extra > in the start tag

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">>

<path d="M5 15.5L12 8.5L19 15.5" fill="none" stroke="currentColor" stroke-width="2" />

</svg>

Valid example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">

<path d="M5 15.5L12 8.5L19 15.5" fill="none" stroke="currentColor" stroke-width="2" />

</svg>

Invalid example: text used as a label

<svg viewBox="0 0 24 24" width="24" height="24">

Close

<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" />

</svg>

Valid example: label in a title element

<svg viewBox="0 0 24 24" width="24" height="24" role="img">

<title>Close</title>

<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" />

</svg>