HTML Guides for sketch

The xmlns:sketch attribute declares the namespace the Sketch design app used for its layer data, and HTML doesn't allow prefixed namespace declarations on <svg> or any other element.

Sketch is a macOS design app from Bohemian Coding. Until version 3.6, it put xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" on the root <svg> of every SVG it exported. The prefix is there for the sketch:type attributes, which record what each element was in the Sketch document: MSPage on the page group, MSArtboardGroup on the artboard, MSLayerGroup on a group of layers and MSShapeGroup on each shape. Sketch 3.6, released in March 2016, dropped these prefixes to make its SVG exports smaller. An SVG that still carries them was exported before then and ended up in a page or template later.

The HTML parser doesn't handle namespace prefixes, so xmlns:sketch is a plain attribute with a colon in its name. The validator reports it on any element that carries it, whether that's <svg> or a <div>. Each sketch:type gets its own message too, such as Attribute "sketch:type" not allowed on element "path" at this point. Browsers ignore this markup, so removing it doesn't change how the icon looks.

Delete xmlns:sketch and every sketch:type attribute. Removing only the declaration leaves one error per sketch:type behind. Delete them together in a standalone .svg file too: if a sketch:type survives without its declaration, the file is no longer well-formed XML and browsers won't display it.

Sketch's export also copies the layer name into <title> and adds <desc>Created with Sketch.</desc>. Neither one is a validation error. In inline SVG, though, the browser uses <title> as the image's accessible name and <desc> as its description, so a screen reader can announce "Created with Sketch." Give the <title> a name that describes the icon, and delete the <desc>.

If a build step inlines your SVG files, SVGO removes the Sketch markup for you. Its default preset runs removeEditorsNSData, and http://www.bohemiancoding.com/sketch/ns is on that plugin's list of editor namespaces, so it deletes the declaration and every sketch: attribute. The preset's removeDesc plugin deletes a <desc> that starts with "Created with".

Invalid example

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

<title>check</title>

<desc>Created with Sketch.</desc>

<g id="Page-1" stroke="none" fill="none" sketch:type="MSPage">

<g id="Icons" sketch:type="MSArtboardGroup">

<path d="M5 12l5 5L20 7" id="check" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>

</g>

</g>

</svg>

Valid example

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Checkmark</title>

<g id="Page-1" stroke="none" fill="none">

<g id="Icons">

<path d="M5 12l5 5L20 7" id="check" stroke="#000000" stroke-width="2"></path>

</g>

</g>

</svg>