Which SVG attributes can be omitted without affecting compatibility or rendering?

Question

I just reduced this SVG:

<?xml version="1.0" standalone="no"?>

<svg viewBox="0 0 480 150" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="480" height="150">
    <path d="M 0 35.5 L 6.5 22.5 L 16 37 L 23 24 L 34.8 43.7 L 42.5 30 L 50.3 47 L 59.7 27.7 L 69 47 L 85 17.7 L 98.3 39 L 113 9.7 L 127.7 42.3 L 136.3 23.7 L 147 44.3 L 158.3 20.3 L 170.3 40.3 L 177.7 25.7 L 189.7 43 L 199.7 21 L 207.7 35 L 219 11 L 233 37 L 240.3 23.7 L 251 43 L 263 18.3 L 272.7 33.3 L 283 10 L 295 32.3 L 301.3 23 L 311.7 37 L 323.7 7.7 L 339.3 39 L 346.3 25.7 L 356.3 42.3 L 369.7 15 L 376.3 25.7 L 384 9 L 393 28.3 L 400.3 19 L 411.7 38.3 L 421 21 L 434.3 43 L 445 25 L 453 36.3 L 464.3 18.3 L 476.2 40.3 L 480 33.5 L 480 215 L 0 215 L 0 35.5 Z" fill="#175720"/>
</svg>

To this:

<svg height="150" width="480"><path d="m0 35.5l6.5-13 9.5 14.5 7-13 11.8 19.7 7.7-13.7 7.8 17 9.4-19.3 9.3 19.3 16-29.3 13.3 21.3 14.7-29.3 14.7 32.6 8.6-18.6 10.7 20.6 11.3-24 12 20 7.4-14.6 12 17.3 10-22 8 14 11.3-24 14 26 7.3-13.3 10.7 19.3 12-24.7 9.7 15 10.3-23.3 12 22.3 6.3-9.3 10.4 14 12-29.3 15.6 31.3 7-13.3 10 16.6 13.4-27.3 6.6 10.7 7.7-16.7 9 19.3 7.3-9.3 11.4 19.3 9.3-17.3 13.3 22 10.7-18 8 11.3 11.3-18 11.9 22 3.8-6.8v181.5h-480v-179.5z" fill="#175720"/></svg>

(I ran it through a minimizer and then I deleted a bunch of attribute in the <svg> tag.) I am using it as a background image and it seems to work fine in IE, Firefox and Chrome on Windows. I am just wondering what all that other information is doing there if it has no effect on the image appearance. Will there be compatibility issues somewhere because I stripped that info out?

UPDATE: I discovered that actually, for my use case, I need to have xmlns="http://www.w3.org/2000/svg" or else it won't render in IE or Chrome.

Botanize

Answer 1

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.

Colner

What do you mean that removing the viewBox prevents it from scaling? It seems to scale fine for me in the three browsers I mentioned. But I am only using it as a background image and setting the background size with CSS. However I was having problems with IE until I added the width and height attributes on the SVG. – Botanize

Answer 2

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 is only one option:

• add an xmlns attribute with the proper namespace to the svg element (as you discovered)

Adding a DOCTYPE to the document is not recommended any more and does not work since at least Chrome 53. Neither is it enough to serve the document as MIME type image/svg+xml.

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.

---

Moonier

Answer 3

I usually use this as a sample SVG:

<svg xmlns="http://www.w3.org/2000/svg"><circle r='10' cx='10' cy='10' fill='red' /></svg>

I'm using circle for the example since it is about as minimal as you can get. You can use this as the contents of a file, or inline xhtml (or other xml) and if you substitute entities ', < and > and you can use it in a data url where permitted.

You can try deleting the remaining components like attributes one by one depending on your environment. Using HTML 5, you can get away with terse tag soup like this:

<svg><circle r=10 cx=10 cy=10 fill=red>

So the answer is it depends on what is reading it. The very smallest SVG I've been able to get to work in HTML5 is 17 characters:

<svg><circle r=9>

For your example, it would be:

<svg viewBox="0 0 480" style=background:#fff width=480><path d='M 0 35.5 L 6.5 22.5 L 16 37 L 23 24 L 34.8 43.7 L 42.5 30 L 50.3 47 L 59.7 27.7 L 69 47 L 85 17.7 L 98.3 39 L 113 9.7 L 127.7 42.3 L 136.3 23.7 L 147 44.3 L 158.3 20.3 L 170.3 40.3 L 177.7 25.7 L 189.7 43 L 199.7 21 L 207.7 35 L 219 11 L 233 37 L 240.3 23.7 L 251 43 L 263 18.3 L 272.7 33.3 L 283 10 L 295 32.3 L 301.3 23 L 311.7 37 L 323.7 7.7 L 339.3 39 L 346.3 25.7 L 356.3 42.3 L 369.7 15 L 376.3 25.7 L 384 9 L 393 28.3 L 400.3 19 L 411.7 38.3 L 421 21 L 434.3 43 L 445 25 L 453 36.3 L 464.3 18.3 L 476.2 40.3 L 480 33.5 L 480 215 L 0 215 L 0 35.5' fill=#175720>

The final Z on the path is superfluous. Quotes are removed from attributes (not xml compliant), white is shortened to #FFF, all other attributes and properties that have no effect are removed. The output is identical in an XHTML document if this is all that's in it, but if it's not the last element of the document you need to add a closing tag.

Fetch

I'm afraid you missed the original question. It was about discardable attributes to get a more compact SVG output, not how to get the most compact example SVG markup. – Soninlaw

@herrstrietzel: would you make an edit to the question title? As it stands, the question appears to be exactly about what you say it is not about. – Tocopherol

@halfer: fair point! According to the OP's response to the accepted answer my suggestion would be something like Which SVG attributes can be omitted without affecting compatibility or rendering. I'm open to suggestions for improvement – Soninlaw

@herrstrietzel: feel free to go ahead and make the edit. I think you're much closer to the topic of the question than I am. – Tocopherol

@halfer: Done. BTW, my comment was intended to prevent unfair down votes due to the obviously ambiguous title. But honestly, I could have been the down voter as well since I believe we should always read the entire thread to avoid duplicate replies/approaches or ones that ignore the original question - unfortunately, the problem of many "canonical" threads being bloated with questionable posts undermines the great idea of exemplary canonical threads. While I totally agree that ambiguous post titles are a huge problem, they are also a "known issue" and often difficult to "unravel". – Soninlaw