November 23, 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 6 tags.

• SVG tag
• Rectangle tag
• Ellipse tag
• Line tag
• Polygon tag (only for isosceles triangle)
• Text tag

SVG tag 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>

Rectangle tag 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 tag has fix 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 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>

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>