Category:SVG simplification by elimination

SVG drawings can be kept slim and simple by elimination of redundant coding parts. Letting them away or removing them will not affect the appearance of the image.

In some cases some of these parts increase the readability, but in many cases their unneeded presence is rather disturbing.

Default values for coding parts

• Coordinate values for x and y are defaulted with 0.

This can be used by viewBoxing with negative start values,

or when an image consists of several stripes/rectangles:

You may inspect the source listing of this flag, all the color rectangles

are starting at x="0" y="0" (which coding is avoided).

• If attribute values are not preset by a group statement,

• stroke is defaulted by none
• stroke-width is defaulted by 1
• stroke-linecap is defaulted by butt
• opacity is defaulted by 1 (for stroke and fill color)
• color for fill is defaulted by black ("#000"):

• the attribute style="fill:#000000" is equivalent to fill="#000000" or fill="#000" or (nothing -
  - except when in a group attributed with another fill option)

Eliminations for path data[edit]

For better readability, commas are used for separating x and y coordinates, and spaces between the coordinate tupels

The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

• All instructions are expressed as one character (e.g., a moveto is expressed as an M).
• Superfluous white space and separators such as commas can be eliminated (e.g., "M 100,100 L 200,200" contains unnecessary spaces and could be expressed in compacter form as "M100,100L200,200").

• The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g., you can drop the second "L" in "M 100,200 L 200,100 L -100,-200" and use "M 100,200 L 200,100 -100,-200" instead).

→ Since after a M (or m) command the missing command letter is assumed to be "L" (resp. "l"), you can even drop the first "L" and use "M100,200 200,100 -100,-200" instead.

• No separator (comma or space) is needed when followed by a minus sign; you may use "M100,200 200,100-100-200" for the above example.

• In case of decimal fractions, the leading zero may be omitted: L0.6,-0.8 can be replaced by L.6-.8.

• Relative versions of all commands are available (uppercase means absolute coordinates, lowercase means relative coordinates; Z or z does not matter).
• Alternate forms of lineto are available to optimize the special cases of horizontal and vertical lines (absolute and relative).
• The z command allows to close a path, like performing a lineto command to the coordinates of the last M command.

It even closes a stroke correctly while a lineto may leave a gap. So any lineto to the (last) moveto position can be eliminated, the z does it better.
The example shows the path closing with z and with lineto:

<path d="m5,5h20v10H5z"/> and
<path d="m35,5h20v10H35V5"/>

• The filling for an area is closed to the origin if it is not expressed by code

(but a stroke won't be completed, as this example shows).

Elimination by clipping[edit]

In some cases the clipping option might be the easiest way to avoid complicated shapes.
For an example see the different drawing of the six black strokes in the CoA KRM, comparing the versions of March and July:

March: <path d="M 10,59.25 h 500 v 49.25 H 10 v 49.25 h 500 v 49.25 H 10 v 49.25 h 500 v 49.25 H 10 m 0.188,49.25 A 250,250 0 0,0 15.812,404 H 504.06 A 250,250 0 0,0 509.812,354.75 M 32.125,453.25 A 250,250 0 0,0 61.5,502.5 H 458.5 A 250,250 0 0,0 487.875,453.25 M 111.469,551.75 A 250,250 0 0,0 408.531,551.75" fill="white" />

July: <path stroke-dasharray="49.25" d="m260,10v550" clip-path="url(#c)"/>.

Note: Contrary to cloning, clipping does not need the xmlns:xlink namespace definition.

Elimination example[edit]

Regarding this, the following coding can be simplified as shown (the x/y-pair of coordinates is separated by a comma) : (162 bytes)

M 255,127 L 256,127 L 256,128 L 255,128 L 255,127 z
M 255,191 L 256,191 L 256,192 L 255,192 L 255,191 z
M 255,223 L 256,223 L 256,224 L 255,224 L 255,223 z

Removing the separating spaces gives

M255,127L256,127L256,128L255,128L255,127z
M255,191L256,191L256,192L255,192L255,191z
M255,223L256,223L256,224L255,224L255,223z

which is the same with or without the "L"

M255,127 256,127 256,128 255,128 255,127z
M255,191 256,191 256,192 255,192 255,191z
M255,223 256,223 256,224 255,224 255,223z

The last lineto is redundant, the z does it

M255,127 256,127 256,128 255,128z
M255,191 256,191 256,192 255,192z
M255,223 256,223 256,224 255,224z

In this case (no stroke) even the z is superfluous because each area anyway is closed to the origin

M255,127 256,127 256,128 255,128
M255,191 256,191 256,192 255,192
M255,223 256,223 256,224 255,224

Using the commands for the special cases of horizontal and vertical lines gives

M255,127 H256 V128 H255
M255,191 H256 V192 H255
M255,223 H256 V224 H255

or (with a lack of readability)

M255,127H256V128H255
M255,191H256V192H255
M255,223H256V224H255

Relative coding reduces it to

M255,127h1v1h-1
M255,191h1v1h-1
M255,223h1v1h-1

When even the moveto command is relative to the last position, it lookes like (with now 39 bytes when no linefeeds: less then ¼ of 162)

m255,127h1v1h-1
m0,63h1v1h-1
m0,31h1v1h-1

Notes

• m calculates from the last position; after a z command it would be the same as of the previous M, otherwise it will be from the last point.
• An omitted command after M is L, after m it is l.

Often it can be advised to use a mix of absolute and relative commands, e.g. in the case of M50,50 H120 V120 H50 which will be shorter when coded M50,50 h70 v70 H50 (with H50 instead of h-70).

Another example[edit]

The code
<path d="M 0,-102
c -2.2,0 -3,3.3 -3,6.5
c 0,8 1,12 3,23.5
c 2.04,-11.5 3,-15.6 3,-23.5
c 0,-3.3 -1,-6.5 -3,-6.5"/>
draws some Bézier curves in a way that a human person can easily recognize the intention. Coding this more compact, the mentioned person cannot read it so immediately, but for any SVG renderer it is the same
<path d="M0-102c-2.2,0-3,3.3-3,6.5c0,8 1,12 3,23.5c2.04-11.5 3-15.6 3-23.5c0-3.3-1-6.5-3-6.5"/>

SVG complification by adding redundancies[edit]

The small icon is an extremly simple drawing, whose coding of a single path is immediately visible:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9">
<path d="m6.5,4 4-4 4,4m0,1-4,4-4-4"/>
</svg>

Localize somewhere, then draw to the right + upwards, continuing right + down: this is the first triangle. For the lower one localize 1 px below, and draw to the left + down and then left + upwards: this is the second triangle. (147 bytes)

Of course it is easy to hide this clear coding by complicating it until it becomes much more difficult to recognize the structure. As an example for that, somebody found the following code much better:

<?xml version="1.0" encoding="UTF-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        width="21" height="9" viewBox="-21 -9 42 18">
   <g id="up">
      <path id="half" d="m 0,-9 v 8 h -8 z" />
      <use xlink:href="#half" transform="scale(-1,1)" />
   </g>
   <use xlink:href="#up" transform="scale(1,-1)" />
   </svg>

First draw the left part only of the upper triangle: Localize somewhere, then draw down and to the left. Then reflect it, mirrowing vertically, by a transformed cloning. Finally clone the result, mirrowing it horizontally. (371 bytes)

The path data (line #5) could be as well d="m0-9v8h8" (z redundant) causing exact the same image, just starting with the right part; but it may be a too compressed notation. Unnumbered possibilities exist to draw an image, and many examples exist in Wikimedia where codes for the simplest graphics are blown up to several thousand times of the really needed part.

In this context, the drawing of 6 stars by one single path instruction

<path fill="#FC0" d="m26,141 5-16 5,16-14-10h17zm17,27 5-16 5,16-14-10h17zm19,25 5-16 5,16-14-10h17z
   m22,19 5-16 5,16-14-10h17zm26,17 5-16 5,16-14-10h17zm29,11 5-16 5,16-14-10h17"/>

in European Union politic personality icon.svg:  could be done much more complicated.