How minimal can SVG be?
I just minified 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>
For 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 the minifier and then removed a bunch of attribute in the tag <svg>
.) I use it as a background image and it seems to work fine in IE, Firefox and Chrome on Windows. I'm just wondering what all this other information does in there, if it doesn't affect the appearance of the image. Will there be compatibility issues somewhere because I stripped this information?
UPDATE: I found that for my use case, I need to have it xmlns="http://www.w3.org/2000/svg"
, otherwise it won't show in IE or Chrome.
source to share
Deletion viewBox
creates a significant semantic difference as the SVG will no longer scale (i.e. react to UA changes). This only applies if you view the image directly, but if you view it as a background image or with an SVG <image>
tag or html tag <img>
, then the SVG will be drawn as if it had a viewBox
"0 0 width height" if not exists viewBox
.
Removing background-color
will mean the SVG will no longer be opaque when placed on top of something else. Of course, if you don't, you might not notice.
The attribute xml:space
is only meaningful if there are text elements in your SVG file.
The rest of the paragraphs are benign if the SVG is inline. The namespace attributes are required if the SVG is a stand-alone file, although that would be the case for a background image.
source to share
The abbreviated version is not valid SVG. This will count as "just any" XML that has a root element named "svg".
To include a snippet in SVG, there are two options:
- add an attribute
xmlns
with the appropriate namespace to the elementsvg
(as you discovered) - add
DOCTYPE
to document 1, 2 - serving the document as a MIME type is
image/svg+xml
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 validate your documents. Make sure the detected doctype is SVG because the document can still be validated, but as generic / unknown XML. - They also have test pages .
1 is insufficient for Chrome 53.
2 no longer recommended
source to share