File talk:Iching-hexagram-64.svg

Strategies for SVG drawing

The versions of File:Iching-hexagram-64.svg show several different concepts, worth to be discussed.

1^st version, 2006-03-04 by Jelte (unknown editor, 4 824 bytes)

most complex definition of the nine rectangles. An accuracy of seven decimal fraction digits is used troughout. No grouping synergies are used.

Example of one rect definition (386 bytes):

  <rect
       style="opacity:1.0000000;fill:#000000;fill-opacity:1.0000000;fill-rule:nonzero;
          stroke:none;stroke-width:3.0000000;stroke-linecap:round;stroke-linejoin:round;

          stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;

          stroke-opacity:1.0000000"

       id="row3a"

       width="22.000000"

       height="6.0000000"

       x="2.0000000"

       y="38.000000" />


Exactly the same can be said with 42 bytes:
 <rect width="22" height="6" x="2" y="38"/> 
The definition of the nine rectangles this way, with all the redundant style garbage, needs 9 × 386 = 3474 bytes, with some more mostly redundant coding of 1350 bytes the file is 4824 bytes large.

2^nd version, 2007-11-12 by Bignose (apparently manual reviewed, 3 422 bytes)

many comments; may be not so necessary for such a simple structure? The nine rectangles are drawn from three definitions, 3 times repeated instead of cloned, where the y-coordinate is modified by transform-translate. An example of educational value if it was not such a simple graphic.

3^rd version, 2010-03-18 by Sarang (manual review, 498 bytes)

defines the nine rectangles without superflouos crap. The coordinates are specified as integers, as shown above at the 1^st version.

This is the best version to show the (very simple) structure.


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70">
<rect x="2" y="2" width="66" height="6"/>
<rect x="2" y="14" width="28" height="6"/>
<rect x="40" y="14" width="28" height="6"/>
<rect x="2" y="26" width="66" height="6"/>
<rect x="2" y="38" width="28" height="6"/>
<rect x="40" y="38" width="28" height="6"/>
<rect x="2" y="50" width="66" height="6"/>
<rect x="2" y="62" width="28" height="6"/>
<rect x="40" y="62" width="28" height="6"/>
</svg>

4^th version, 2010-03-18 by Sarang (manual, 253 bytes)draws all the nine rectangles with one single path. The coordinates are specified as integers with absolute values.


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70">
<path d="M2,5H68 M2,17H30 M40,17H68 M2,29H68 M2,41H30 M40,41H68 M2,53H68 M2,65H30 M40,65H68"
stroke-width="6" stroke="#000"/>
</svg>

5^th versions, 2010-04-27 by Sarang (manual, 222 bytes)

by using relative addressing instead of absolute coordinates some bytes were saved by shorter numbers. It saves some bytes not to start always from the left: by switching from the current position to the left or to the right respectively. The possibility to take a minus hyphen as a separator was not used in this case.


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70">
<path stroke-width="6" stroke="#000"
d="M2,5h66M2,17h28m10,0h28m0,12H2M2,41h28m10,0h28m0,12H2M2,65h28m10,0h28"/>
</svg>

It is easy to proof immediatly that both pathes are aequivalent:

<path d="
M2,5h66M2,17h28m10,0h28
m0,12H2M2,41h28m10,0h28
m0,12H2M2,65h28m10,0h28
" stroke-width="6" stroke="#000"/>

<path d="
M2,65h28m10,0h28m0-12H2
m0-12h28m10,0h28m0-12H2
m0-12h28m10,0h28m0-12H2
" stroke-width="2" stroke="#F00"/>

6^th version, 2010-12-07 by Sarang (manual, 217 bytes)

While the previous version drew rectangles, either with "rect" or "path", now another rather complicated concept is tryed. It is a valid option to draw Iching-hexagram-01.svg   or Iching-hexagram-02.svg   with path-"dasharray". To draw more irregular hexagram strokes as well with the mighty dasharray-attribute, using only one path definition, needs complex overlayings of the path itself.
It is rather an essay than a recommended strategy.


<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70">
<path stroke-width="28" stroke="#000" stroke-dasharray="6,18"
  d="M16,2v66m0,0V2m19,0v78m19,0V2m0,12v66"/>
</svg>

Add topic