How minimal can an SVG be?

Removing the viewBox creates a significant semantic difference as the SVG will no longer scale (i.e. be responsive to UA resizes). This only applies if you're viewing the image directly though if you're viewing it as a background-image or via a SVG <image> tag or html <img> tag then the SVG will be drawn as if it has a viewBox of "0 0 width height" unless a viewBox is already present.

Removing the background-color will mean that the SVG will no longer be opaque when placed on top of something else. Of course if you're not doing that you may not notice.

The xml:space attribute only matters if you have text elements in your SVG file.

The rest of the removals are benign if the SVG is inline. Namespace attributes are required if the SVG is a standalone file though which will be the case for a background-image.

The reduced version is not valid SVG. It would be considered "just any" XML which happens to have a root element with the name "svg".

To turn the snippet into the SVG there are two options:

• add an xmlns attribute with the proper namespace to the svg element (as you discovered)
• add a DOCTYPE to the document ^{1, 2}
• serving the document as MIME type image/svg+xml is not enough!

Examples:

• <svg xmlns="http://www.w3.org/2000/svg"> (SVG version selected by consumer)
• <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> (for SVG 1.0)

Use the W3 validator to check your documents. Make sure to check that the detected doctype is SVG, because the document might still validate, but as general/unknown XML. -- They also have test pages.

---

¹ is not good enough for Chrome 53.
² not recommended any more