Category:SVG simplification by cloning

From Wikimedia Commons, the free media repository
Jump to navigation Jump to 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.

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.

Accurat construction[edit]

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.

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="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.

Examples[edit]

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
Cube
  <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.

Media in category "SVG simplification by cloning"

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

Retrieved from "https://commons.wikimedia.org/w/index.php?title=Category:SVG_simplification_by_cloning&oldid=736036709"