This project has moved. For the latest updates, please go here.

Small SVG Specification

Version 0.1

November 23, 2014
Nonki Takahashi

Overview

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

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>

svg300.png

Rectangle Tag

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>

rect300.png

Ellipse Tag

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>

ellipse300.png

Line Tag

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>

line300.png

Polygon Tag

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>

polygon300.png

Last edited Nov 27, 2014 at 2:12 AM by Nonki, version 3