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

Small SVG Specification

Version 0.37 (DRAFT)

January 25, 2016
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 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

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>

svg300.png

Defines, Grouping, Use Elements

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>

grouping300.png

Rectangle Element

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>

rect300.png

Ellipse Element

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>

ellipse300.png

Polygon Element

Polygon element 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

Line Element

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 [degree]. 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

Text Element

Text element has five attributes. X attribute is the left co-ordinate of the text. Y attribute is the base line co-ordinate of the text (not the top co-ordinate). Fill attribute is the text color. Font-family attribute is the family name of the font. Font-size attribute is the font height [px].
<svg width="598" height="428">
  <text x="10" y="65" fill="#ffa500"
    font-family="Verdana"
    font-size="55">Hello, Small Basic!</text>
</svg>

text300.png

Reference

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

Last edited Jan 25, 2016 at 2:18 PM by Nonki, version 7