HTML Guides for inkscape
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The xmlns:cc attribute declares the Creative Commons namespace used in SVG metadata, and HTML doesn't allow prefixed namespace declarations on <svg> or any other element.
Files saved by Inkscape often have xmlns:cc="http://creativecommons.org/ns#" on the root <svg> element. The prefix is for the Creative Commons terms in the file's RDF metadata. <cc:Work> wraps the description of the drawing, and if you pick a license under Document Properties, <cc:license> records it. In a standalone .svg file, which is XML, the declaration is valid. The error shows up when that markup ends up inside an HTML page, pasted by hand or inlined by a template or build step.
The HTML parser doesn't process namespace declarations, so xmlns:cc stays a plain attribute with a colon in its name. The validator rejects it on <svg>, and on <html> or <div> too. On <svg> it accepts just two namespace attributes, xmlns and xmlns:xlink. Inkscape exports usually put xmlns:cc next to xmlns:dc, xmlns:rdf, xmlns:sodipodi and xmlns:inkscape, and each of those gets its own message.
Delete xmlns:cc from the <svg> tag, and delete the <metadata> block with it. The cc: elements in that block break for the same parser reason. <cc:Work> becomes an SVG element whose name happens to contain a colon, and the validator reports cc:work and cc:license as completely-unknown elements in SVG content. None of the metadata is drawn, so the image doesn't change.
That block may be the only place the file states its license. If the license matters, keep the original .svg, metadata and all, in your source files, and show the license where readers can see it, such as in a caption under the image.
To stop the declaration from coming back, optimize the SVG before it gets inlined. SVGO's default preset runs removeEditorsNSData, which removes the Creative Commons namespace along with the Inkscape and Sodipodi ones, and removeMetadata, which removes the <metadata> block.
Invalid example
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
width="120" height="120" viewBox="0 0 24 24">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<cc:license rdf:resource="https://creativecommons.org/licenses/by/4.0/" />
</cc:Work>
</rdf:RDF>
</metadata>
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" />
</svg>
Valid example
<figure>
<svg width="120" height="120" viewBox="0 0 24 24" role="img">
<title>Checkmark</title>
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" />
</svg>
<figcaption>
Icon licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</figcaption>
</figure>
The xmlns:inkscape attribute declares the namespace Inkscape uses for its own editor data, and HTML doesn't allow prefixed namespace declarations on <svg> or any other element.
Inkscape's default file format, Inkscape SVG, puts xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" on the root <svg> element. The prefix marks attributes that only Inkscape reads: inkscape:version records the release that saved the file, and inkscape:groupmode="layer" with an inkscape:label turns a <g> into a named layer. Inkscape 0.92 also writes inkscape:connector-curvature="0" on paths, and inkscape:export-filename remembers where the last PNG export went. Browsers ignore all of them, so the image looks the same without them.
In an HTML page the declaration does nothing. The HTML parser doesn't handle namespace prefixes, so xmlns:inkscape is a plain attribute with a colon in its name, and the validator reports it on any element that carries it. Each inkscape: attribute gets its own message as well, such as Attribute "inkscape:version" not allowed on element "svg" at this point. Inkscape SVG files usually declare xmlns:sodipodi next to it, for attributes like sodipodi:docname, and the validator reports that declaration separately.
Delete xmlns:inkscape and every attribute that starts with inkscape:. Removing only the declaration leaves the attribute errors behind. The layers turn into plain groups and lose their labels, so if a stylesheet or script needs to find one, use the group's id (Inkscape assigns ids like layer1) or add a class.
When you clean up a standalone .svg file, remove the declaration and the attributes together. Delete xmlns:inkscape but leave a single inkscape:label behind, and the file stops being well-formed XML, because it uses a prefix it never declares. Browsers then refuse to display it (Firefox reports an "unbound prefix").
To get a copy without the Inkscape markup, use File > Save a Copy and choose Optimized SVG or Plain SVG. Optimized SVG runs Scour, which strips editor data unless you check its "Keep editor data" option. Plain SVG drops the inkscape: and sodipodi: markup but still writes xmlns:svg, which the validator also rejects.
Keep the Inkscape SVG as the file you edit. A copy without the editor data reopens without its layers, and shapes drawn with the star tool come back as plain paths. If a build step inlines your SVGs, SVGO removes the same markup with removeEditorsNSData, which is part of its default preset.
Invalid example
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.3.2"
width="24" height="24" viewBox="0 0 24 24">
<g inkscape:label="Icon" inkscape:groupmode="layer" id="layer1">
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" />
</g>
</svg>
Valid example
<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24">
<g id="layer1">
<path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="2" />
</g>
</svg>
The xmlns:rdf attribute declares the RDF namespace that SVG editors use for the metadata block in a drawing, and HTML doesn't allow prefixed namespace declarations on <svg> or any other element.
Inkscape SVG files, such as those saved by Inkscape 0.92, declare xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" on the root <svg> element, next to xmlns:dc and xmlns:cc. RDF (Resource Description Framework) is the W3C model for describing things as statements, and the rdf: namespace holds its core terms. Inkscape uses them to build the <metadata> block. <rdf:RDF> wraps the description, rdf:about="" says it is about this file, and rdf:resource gives a property a URI as its value, such as the Dublin Core type StillImage. The title and format are Dublin Core (dc:) terms, and the license is a Creative Commons (cc:) one. In a standalone .svg file, which is XML, all of this is valid.
Inline the file in an HTML page and the block stops being RDF. The HTML parser doesn't process namespace declarations, so xmlns:rdf is a plain attribute with a colon in its name, and the validator reports it on <svg>, on <html> and on any other element. The elements lose their namespace too. <rdf:RDF> becomes an SVG element named rdf:rdf, which the validator reports as a completely-unknown element, along with every element nested in it.
Delete xmlns:rdf together with the <metadata> block. Removing only the declaration leaves all those unknown-element errors in place. Nothing in the block is drawn, so the image doesn't change. The same export usually declares xmlns:dc, xmlns:cc, xmlns:sodipodi and xmlns:inkscape too. Each gets its own message, and they all go in the same cleanup.
If the page needs machine-readable facts about the image, such as who made it or what license it has, describe it in JSON-LD instead. A <script type="application/ld+json"> block with a schema.org ImageObject can hold creator and license, and its contentUrl points at the image file, for example the original .svg with its metadata intact. Google's image metadata documentation asks for contentUrl plus at least one of creator, creditText, copyrightNotice or license.
On <html>, xmlns:rdf is a leftover from XHTML+RDFa 1.0, which declared prefixes with xmlns:. RDFa 1.1 uses the prefix attribute instead, and rdf is one of its predefined prefixes, so you can delete the declaration without adding anything in its place.
To keep the declaration out of inlined SVGs, run them through SVGO first. Its default preset includes removeEditorsNSData, whose list of editor namespaces contains RDF, and removeMetadata, which drops the <metadata> block.
Invalid example
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
width="240" height="160" viewBox="0 0 240 160">
<metadata>
<rdf:RDF>
<rdf:Description rdf:about="">
<dc:title>Route map</dc:title>
<dc:creator>Jane Doe</dc:creator>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</rdf:Description>
</rdf:RDF>
</metadata>
<path d="M20 140L120 20L220 140" fill="none" stroke="currentColor" stroke-width="4" />
</svg>
Valid example
<svg width="240" height="160" viewBox="0 0 240 160" role="img">
<title>Route map</title>
<path d="M20 140L120 20L220 140" fill="none" stroke="currentColor" stroke-width="4" />
</svg>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://example.com/images/route-map.svg",
"name": "Route map",
"creator": { "@type": "Person", "name": "Jane Doe" },
"license": "https://creativecommons.org/licenses/by/4.0/"
}
</script>
The xmlns:sodipodi attribute declares the namespace for editor data that Inkscape inherited from Sodipodi, and HTML doesn't allow prefixed namespace declarations on <svg> or any other element.
Sodipodi was a vector drawing program written mainly by Lauris Kaplinski, and SVG was its native file format. In 2003 a group of its developers forked it to start Inkscape. Sodipodi itself stopped at version 0.34, released in February 2004. Inkscape kept the sodipodi: prefix for the features it inherited, so files saved by current versions still declare xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" on the root <svg>. The URI is only a name for the namespace. Nothing downloads that DTD.
The prefix marks editor state. <sodipodi:namedview>, a child of the root <svg>, keeps the document's view settings: page and border colors, the grid, zoom and window position, the current layer, and any guide lines as <sodipodi:guide> children. On the root element, sodipodi:docname records the file name the drawing was last saved under.
Shapes and text carry their own sodipodi: attributes. sodipodi:nodetypes on a path has one letter per node (c for cusp, s for smooth, z for symmetric, a for auto-smooth), which the node tool reads to decide how a node's handles move. sodipodi:type marks a path drawn with a shape tool, such as star, arc or spiral, and attributes like sodipodi:sides and sodipodi:r1 keep the shape's parameters so Inkscape can bring its handles back. Lines of text get sodipodi:role="line" on their <tspan>. Browsers ignore all of it, and a star is drawn from the path's d attribute like any other path.
The HTML parser doesn't link prefixes to declarations. To it, xmlns:sodipodi is one attribute with a colon in its name and sodipodi:docname is another, and nothing connects the two. Delete only the declaration and every other sodipodi: name still fails on its own. The invalid example below gets 13 errors, and only one of them is about xmlns:sodipodi. The other 12 come from the sodipodi: attributes, such as Attribute "sodipodi:type" not allowed on element "path" at this point., and from <sodipodi:namedview> and <sodipodi:guide>, which the validator reports as completely-unknown elements in SVG content.
Delete xmlns:sodipodi, the <sodipodi:namedview> element with everything inside it, and every attribute that starts with sodipodi:. The image looks the same afterwards. Only Inkscape notices: the guides, grid and page settings are gone, and stars and spirals reopen as plain paths. Keep the original file for editing and put a cleaned copy in the page.
The same Inkscape file usually declares xmlns:inkscape, xmlns:rdf, xmlns:cc and xmlns:dc too, and each gets its own message. SVGO's removeEditorsNSData plugin, part of its default preset, removes the Sodipodi declaration and every sodipodi: element and attribute, and does the same for those four namespaces. If the whole file was pasted in, its <?xml version="1.0"?> line comes along too, and the validator reports it as an XML processing instruction.
Invalid example
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
sodipodi:docname="star.svg"
width="24" height="24" viewBox="0 0 24 24">
<sodipodi:namedview pagecolor="#ffffff" showgrid="false">
<sodipodi:guide position="12,12" orientation="1,0" />
</sodipodi:namedview>
<path sodipodi:type="star" sodipodi:sides="5"
sodipodi:cx="12" sodipodi:cy="12" sodipodi:r1="10" sodipodi:r2="4"
sodipodi:arg1="-1.5708" sodipodi:arg2="-0.9425"
d="M12,2 14.35,8.76 21.51,8.91 15.8,13.24 17.88,20.09 12,16 6.12,20.09 8.2,13.24 2.49,8.91 9.65,8.76Z"
fill="currentColor" />
</svg>
Valid example
<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24">
<path d="M12,2 14.35,8.76 21.51,8.91 15.8,13.24 17.88,20.09 12,16 6.12,20.09 8.2,13.24 2.49,8.91 9.65,8.76Z"
fill="currentColor" />
</svg>
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 everyinkscape:orsodipodi: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>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
1K Weekly
1,000 monthly checks. Cancel anytime.
Get 1K Weekly →Join teams across 40+ countries