Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How minimal can an SVG be?

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.

like image 414
Moss Avatar asked May 25 '15 20:05

Moss


1 Answers

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.

like image 64
Robert Longson Avatar answered Sep 21 '22 11:09

Robert Longson