Category:SVG simplification by cloning

This pseudo-category is in fact a document explaining a technique to optimize and―in a sense―simplify SVG files. The files in this category merely constitute a collection of examples illustrating that technique. These hidden categories are only intended for Wikimedia contributors who want to add or optimize SVG files, but the documented techniques are in no way specific to Wikimedia. Besides being scalable, the images represented by the files in this category have nothing in common (only the files have historical implementation details in common). Most of these documents are in a poor state, as of October 2024, and the effect of some of these so-called simplification techniques would be considered as complexification by most. To address these issues, see discussion about an action plan.

Cloning is a mighty instrument for generation of repeated objects (SVG fragments) with reduced effort. The SVG "use" element can be provided with any required transformation attribute, as translate, scale, rotate, skew.

0Only for cloning the xmlns:xlink namespace definition is required0

A useful description can be found at de:Wikibook:Transformations.

Especially rotations will lead to very odd coordinate values, while clone-transfomations avoid that. For very simple objects with no need for high accuracy cloning can be avoided, see Das Pentagramm als manuelle SVG-Grafik (de); but when exactness and perfect symmetry is desired, only cloning can care for that easily.

The following code generates a perfectly symmetrical five-pointed star (like ):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="c" fill="#FF0" d="m72,100 28-85 28,85"/>
<use xlink:href="#c" transform="rotate(72 100,100)"/>
<use xlink:href="#c" transform="rotate(144 100,100)"/>
<use xlink:href="#c" transform="rotate(216 100,100)"/>
<use xlink:href="#c" transform="rotate(288 100,100)"/>
</svg>

(with three instead of four transformations when cascaded)
This is a lot of coding instructions for such a simple structure. The same picture is drawn much shorter by the path

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path fill="#FF0" d="m51,168 49-152 49,152-129-94h160"/>
</svg>

bearing suffient exactness.

Large numbers of repeated objects (SVG fragments) can be generated with repetitive use of cloning; it is possible always to double the count with each use. The number increases in a geometric progression, first doubling an object to two instances, then 4, 8, 16, 32, 64, 128, 256, 1024... (a typical example)

This can be very helpful to generate e.g. fractal structures. This category contains selected examples where the method of nested cloning helped to create multiple occurences of objects.

During development of hand edited SVG, temporary cloning may be a help for checking whether an object is really accurat.
As an example, the mirrored red path shows that the black path is correctly drawn:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="260"
xmlns:xlink="http://www.w3.org/1999/xlink" height="300">
<path fill="none" stroke="#000" stroke-width="5"
d="m5,5h250l-10,10v220c0,69-99,30-115,60-16-30-115,9-115-59V15z"/>

<path fill="none" stroke="#F00" stroke-width="2" id="r"
d="m5,5h250l-10,10v220c0,69-99,30-115,60"/>
<use xlink:href="#r" transform="matrix(-1,0,0,1,260,0)"/>

</svg>

Another example for mirroring is e.g. the code for file BSicon CSTRag.svg.

The first version did not use any cloning, each element of the sketch is drawn for itself.

• Every one of the 14 cubes is coded in a primitive manner like

  <g
       id="g2510"
       style="fill:#000000;stroke:none" />
   <g
       id="g2534"
       style="fill:#ff0000;stroke:none" />
    <g
       transform="matrix(0.1491359,0,0,0.1406997,91.406269,63.033462)"
       id="g3498">
      <path
         d="M -177.89576,71.34841 L -109.02632,117.34031 L -64.211774,
48.135815 L -133.08122,2.1439186 L -177.89576,71.34841"
         id="path3500"
         style="fill:#acacac;fill-opacity:1;stroke:#ff0000;stroke-width:
0.60093284;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" />
      <path
         style="fill:#575757;fill-opacity:1;fill-rule:evenodd;stroke:
#00ff00;stroke-width:0.60093284;stroke-linecap:butt;stroke-linejoin:
miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M -201.72291,84.7638 L -178.09589,71.367102 L -133.11653,
2.1071298 L -156.94923,15.622398 L -201.72291,84.7638 z"
         id="path3502" />
      <path
         style="fill:#7f7f7f;fill-opacity:1;fill-rule:evenodd;stroke:
#0000ff;stroke-width:0.60093284;stroke-linecap:butt;stroke-linejoin:
miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M -201.72291,84.7638 L -132.73915,130.70408 L -108.9643,
117.27815 L -178.03805,71.277778 L -201.72291,84.7638 z"
         id="path3504" />
    </g>
   </g>
  </g>

needing about 1300 bytes, repeated 13 times with other transformation for the other cubes.

The second version draws this cube only once, with

 
<g stroke="#000" stroke-linejoin="bevel" stroke-width=".1">
<path fill="#AAA" d="m29,15-17-11-11,17 17,11"/>
<path fill="#777" d="m29,15-17-11 6-3 17,11"/>
<path fill="#555" d="m29,15-11,17 6-3 11-17z"/>
</g>

needing about 212 bytes. All further occurrrencies are cloned, in a cascading manner.

• There are 46 ellipses in the first drawing, every one of them is coded like

    <path
       sodipodi:type="arc"
       style="opacity:1;fill:#575757;fill-opacity:1;stroke-width:2.5;
stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0"
       id="path3359"
       sodipodi:cx="17.296402"
       sodipodi:cy="5.2840905"
       sodipodi:rx="0.72443181"
       sodipodi:ry="0.69128788"
       d="M 18.020834,5.2840905 A 0.72443181,0.69128788 0 1 1 16.57197,
5.2840905 A 0.72443181,0.69128788 0 1 1 18.020834,5.2840905 z"
       transform="matrix(-0.9662745,0,0,-0.6369863,117.49973,129.66582)" />

The simplified drawing omits these ellipses, replacing them by the linecap='round' attribute, which seems quite enough accuracy for this simple sketch.