File talk:BSicon DRAISINE.svg

Simplifying SVG code

The coding for this little drawing contained originally 19 lines:

 1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 <!--drawn by Richtest-->
 3 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 4 <title>DRAISINE</title>
 5  <g style="stroke:#000000;fill:none;">
 6   <g style="stroke-width:25px;">
 7    <circle cx="100" cy="425" r="60"/>
 8    <circle cx="400" cy="425" r="60"/>
 9   </g>
10   <path d="M 250,60 410,320 M 250,60 90,320 M 220,50 h 90"
     style="stroke-width:25px;stroke-linecap:round;"/>
11   <path d="m 205,215 40,0 10,80 40,0" style="stroke-width:25px;"/>
12   <path d="m 130,255 h 240" style="stroke-width:14px;"/>
13  </g>
14  <g style="fill:#000000">
15   <path d="M 10,320 H 490 v 50 H 10 z" style="fill:#000000"/>
16   <circle cx="250" cy="255" r="22"/>
17  </g>
18 </svg>
19 

This is easily reduced to 18 lines by removing the last line feed, which is after the final </svg> of line 18.

In line 5, all the following expressions will be identical:

• <g style="stroke:#000000;fill:none;">   (original)
• <g style="stroke:#000000;fill:none">   final "," not necessary
• <g stroke="#000000" fill="none">   attribute definitions directly, without "style"
• <g stroke="#000" fill="none">   short color notation

The definition of the stroke-width in line 6 can as well be declared in the line 5 group statement. Removing the now abundant line 9, the group is valid until the group end in line 13; the stroke-width need not to be defined again im line 10 and in line 11. The unit definition px is the default and is therefore not necessary.

In line 15, the fill attribute of line 14 is abundantly repeated. The definition style="fill:#000000" (shorter: fill="#000") is the default for SVG; if it is not needed to overwrite another previous fill color definition of black fill color is always redundant. So line 14 and line 17 can be spared.

The comments in line 2 and line 4 fit better into the file description; so we get

 1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 3 <g stroke="#000" fill="none" stroke-width="25">
 4  <circle cx="100" cy="425" r="60"/>
 5  <circle cx="400" cy="425" r="60"/>
 6  <path d="M 250,60 410,320 M 250,60 90,320 M 220,50 h 90" stroke-linecap="round"/>
 7  <path d="m 205,215 40,0 10,80 40,0"/>
 8  <path d="m 130,255 h 240" stroke-width="14"/>
 9 </g>
10 <path d="M 10,320 H 490 v 50 H 10 z"/>
11 <circle cx="250" cy="255" r="22"/>
12 </svg>

containing the same commands as previous, just a bit shorter.

The rectangle in line 10 and the circle in line 11 can as well be drawn with the same 25px-stroke:

• two times 25px makes a 50px wide stroke like the rectangle,
• a circles radius less or equal the half stroke-width is a completely filled circle, e.g.
  

 9  <path d="M 10,332.5 H 490 m0,24 H 10"/>
10  <circle cx="250" cy="255" r="8.5"/>
11 </g>

Because the half stroke-width is essential it might have been better if the stroke-width was definded with 24px (or 26px) to avoid decimal fractions.

Some of the pathes can be united into one single path command, as done in now line 7:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 3 <g stroke="#000" fill="none" stroke-width="25">
 4 <circle cx="100" cy="425" r="60"/>
 5 <circle cx="400" cy="425" r="60"/>
 6 <circle cx="250" cy="255" r="9"/>
 7 <path d="M205,215h40l10,80h40 M10,332H478v25H10 m64-11 176-285 176,285"/>
 8 <path stroke-linecap="round" d="M220,50h90"/> 
 9 <path stroke-width="14" d="M130,255h240"/>
10 </g>
11 </svg>

If the three circles are drawn also by the path command, it will look like

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 3 <g stroke="#000" fill="none" stroke-width="25">
 4 <path d="M205,215h40l10,80h40M10,332H478v25H10m64-11 176-285 176,285
   M99,365a60,60 0 1,0 2,0zm298,0a60,60 0 1,0 2,0zM249,246a9,9 0 1,0 2,0"/>
 5 <path stroke-linecap="round" d="M220,50h90"/> 
 6 <path stroke-width="14" d="m130,255h240"/>
 7 </g>
 8 </svg>

The path in line 4 consists now of six parts. With some more effort, possible one or the other digit can be saved by reordering the six parts and adressing them relativly.

With all the above actions the file size came from >700 to <400 bytes. With some bytes more for structuring, the source code may become better readable. -- sarang사랑 16:47, 9 December 2011 (UTC)