Category:SVG simplification by cloning

From Wikimedia Commons, the free media repository
Jump to: navigation, search

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.

Accurat construction[edit]

The following code generates a perfectly symmetrical five pointed star (like Competitiester.svg):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="" width="200" height="200" 
<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)"/>

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="" width="200" height="200">
<path fill="#FF0" d="m51,168 49-152 49,152-129-94h160"/>

bearing suffient exactness.

Cascaded cloning[edit]

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.

Cloning for symmetry check (mirroring)[edit]

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="" width="260"
xmlns:xlink="" height="300">
<path fill="none" stroke="#000" stroke-width="5"

<path fill="none" stroke="#F00" stroke-width="2" id="r"
<use xlink:href="#r" transform="matrix(-1,0,0,1,260,0)"/>


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


Forschungsreaktor Haigerloch Gitter.svg

Haigerloch sketch[edit]

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
       style="fill:#000000;stroke:none" />
       style="fill:#ff0000;stroke:none" />
         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"
0.60093284;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0" />
         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" />
         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" />

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"/>

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
stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0"
       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.

Media in category "SVG simplification by cloning"

The following 46 files are in this category, out of 46 total.