HTML check: The “X” element is a completely-unknown element that is not allowed anywhere in any SVG content.

About This HTML Issue

Inline SVG in an HTML document can only contain elements that SVG defines, and the element named in this message isn't one of them.

This message usually comes from editor metadata. Inkscape (and Sodipodi, the editor it grew out of) writes two extra things into its SVG files: a <metadata> block that describes the file in RDF, using Dublin Core (dc:) and Creative Commons (cc:) terms, and a <sodipodi:namedview> element that stores editor settings such as the page color and zoom level. Paste the file into a page, or let a build tool inline it, and all of that comes along.

In a standalone SVG file, those prefixes point to other XML namespaces. The HTML parser doesn't treat a prefix as a namespace, so <rdf:RDF> becomes an SVG element whose name happens to contain a colon. SVG has no element by that name, and the validator reports each one it finds: rdf:rdf, cc:work, dc:format, dc:type, dc:title and sodipodi:namedview. Names are reported in lowercase, so <cc:Work> shows up as cc:work.

The outermost element of each block also gets a second error, such as Element "rdf:rdf" not allowed as child of element "metadata" in this context, and the same fix clears both. A misspelled SVG element like <circel> triggers this message too, and there the fix is to correct the spelling.

The <metadata> element itself is valid. The validator accepts it empty or with plain text inside; only the RDF markup nested in it fails. None of this markup is drawn, so removing it doesn't change how the image looks.

The same export usually puts xmlns:dc, xmlns:cc, xmlns:rdf, xmlns:sodipodi and xmlns:inkscape declarations on the <svg> element, plus prefixed attributes such as inkscape:version and sodipodi:docname. The validator reports those separately (Attribute "xmlns:rdf" not allowed here.), and they go in the same cleanup:

Delete the <metadata> block and the <sodipodi:namedview> element.
Delete the xmlns: declarations and every inkscape: or sodipodi: attribute.

If the image needs a title, use SVG's own <title> element, which also gives the image an accessible name.

To clean files before they reach the page, run them through SVGO. Its default preset includes removeMetadata and removeEditorsNSData, which strip both kinds of markup. In Inkscape, Save As "Optimized SVG" can remove metadata as well. "Plain SVG" drops the Inkscape and Sodipodi markup but can leave the <metadata> block in place.

Invalid example

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  width="24" height="24" viewBox="0 0 24 24">
  <metadata>
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Search</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview pagecolor="#ffffff" inkscape:zoom="8" />
  <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2" />
  <path d="M15 15l6 6" stroke="currentColor" stroke-width="2" />
</svg>

Valid example

<svg width="24" height="24" viewBox="0 0 24 24" role="img">
  <title>Search</title>
  <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2" />
  <path d="M15 15l6 6" stroke="currentColor" stroke-width="2" />
</svg>