November 27, 2014 Nonki Takahashi

Small SVG is defined to save Shapes graphics created with Small Basic program language into a local file. And Small SVG is a subset of SVG (Scalable Vector Graphics). Small SVG supports only following 9 elements.

• SVG element
• Defines element
• Grouping element
• Use element
• Rectangle element
• Ellipse element
• Polygon element (only for isosceles triangle)
• Line element
• Text element

SVG element has two attributes width and height.

<svg width="598" height="428">
  <rect width="300" height="100"
    style="fill:#0000ff;stroke-width:3;stroke:#000000" />
</svg>

Defines - the 'defs' element defines shapes to reuse. Grouping - the 'g' element make all shapes in one group "g1". Use - the 'use' element uses the defined group "g1" to determine the position of the shapes group.

<svg width="598" height="428">
  <defs>
    <g id="g1">
      <rect x="0" y= "0" width="300" height="100"
        style="fill:#0000ff;stroke-width:3;stroke:#000000" />
    </g>
  </defs>
  <use x="10" y="10" xlink:href="#g1" />
</svg>

Rectangle element has six attributes x, y, width, height, style and transform. And the style attributes has three properties fill (color), stroke-width and stroke (color). Color format is #rgb, #rrggbb or color names. Transform attributes has one style rotate(a cx cy). A is the rotation angle. A point (cx, cy) is the rotation center.

<svg width="598" height="428">
  <ellipse cx="200" cy="80" rx="100" ry="50"
    style="fill:yellow;stroke:purple;stroke-width:2" 
    transform="rotate(5 200 80)" />
</svg>

Ellipse element has six attributes cx, cy, rx, ry, style and transform. And the style attributes has three properties fill (color), stroke-width and stroke (color). Color format is #rgb, #rrggbb or color names. Transform attributes has one style rotate(a cx cy). A is the rotation angle. A point (cx, cy) is the rotation center.

<svg width="598" height="428">
  <ellipse cx="200" cy="80" rx="100" ry="50"
    style="fill:yellow;stroke:purple;stroke-width:2" 
    transform="rotate(5 200 80)" />
</svg>

Line tag has three attributes points, style and transform. Points attributes has three points which shapes an isosceles triangle. And the style attributes has three properties fill (color), stroke-width and stroke (color). Color format is #rgb, #rrggbb or color names. Transform attributes has one style rotate(a cx cy). A is angle. A point (cx, cy) is rotation center in the isosceles triangle.

<svg width="598" height="428">
  <polygon points="100,210 150,10 200,210" 
    style="fill:lime;stroke:purple;stroke-width:1"
    transform="rotate(30 150 110)" />
</svg>

Line element has five attributes x1, y1, x2, y2, and style. And the style attributes has two properties stroke-width and stroke (color). Color format is #rgb, #rrggbb or color names. Transform attributes has one style rotate(a cx cy). A is the rotation angle. A point (cx, cy) is the rotation center.

<svg width="598" height="428">
  <line x1="100" y1="100" x2="200" y2="200" 
    style="stroke:#ff0000;stroke-width:2"
    transform="rotate(5 150 150)" />
</svg>

TBD

• Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• w3schools.com SVG Tutorial