Small SVG is a subset of SVG for Small Basic
Now I'm trying to define a subset of SVG file format. And I'm rewriting Shapes editor for the SVG. Today I'll write about that.
What is SVG
SVG (Scalable Vector Graphics) is one of XML (Extensible Markup Language). XML is a text file. So, Small Basic can read/write this format. I created a Polyline Editor that can read/write SVG files (But this file format is only for polyline).
You can learn about SVG at following sites.
What is Small SVG
SVG has many functions. So I'm selecting elements from SVG 1.1 to represent shapes drawn with Small Basic. I named it Small SVG and uploaded it to CodePlex. But it is still under construction. Following description is a part of Small SVG 0.2.
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>
Small SVG Editor
Small SVG is for Small SVG Editor 1.9x which is the successor of Shapes editor. This program is too large to [Publish] to Small Basic program listing server. So I decided to publish this to CodePlex. And published the source without comments as TLW744-7. I'm using Git Gui for it's revision control.
Output sample of this program is:
<svg width="598" height="428">
<defs>
<g id="g1">
<ellipse cx="79" cy="132" rx="52" ry="25"
style="fill:#814a27;stroke-width:0"/>
<rect x="36" y="144" width="9" height="65"
style="fill:#814a27;stroke-width:0"/>
<rect x="49" y="143" width="9" height="65"
style="fill:#814a27;stroke-width:0"/>
<rect x="99" y="143" width="9" height="65"
style="fill:#814a27;stroke-width:0"/>
<rect x="113" y="143" width="9" height="65"
style="fill:#814a27;stroke-width:0"/>
<rect x="32" y="78" width="24" height="47"
style="fill:#814a27;stroke-width:0"/>
<ellipse cx="132" cy="119" rx="9" ry="10"
style="fill:#814a27;stroke-width:0"/>
<rect x="43" y="36" width="7" height="30"
style="fill:#a7842a;stroke-width:0"/>
<rect x="53" y="43" width="7" height="30"
style="fill:#a7842a;stroke-width:0"/>
<rect x="33" y="18" width="7" height="30"
transform="rotate(301 36 33)"
style="fill:#a7842a;stroke-width:0"/>
<rect x="63" y="23" width="7" height="30"
transform="rotate(55 66 38)"
style="fill:#a7842a;stroke-width:0"/>
<rect x="20" y="0" width="7" height="30"
style="fill:#a7842a;stroke-width:0"/>
<rect x="75" y="3" width="7" height="30"
style="fill:#a7842a;stroke-width:0"/>
<rect x="29" y="109" width="27" height="7"
style="fill:#000000;stroke-width:0"/>
<ellipse cx="28" cy="118" rx="8" ry="8"
style="fill:#c3ab6f;stroke-width:0"/>
<rect x="157" y="198" width="241" height="9"
style="fill:#8c8c8c;stroke-width:0"/>
<rect x="177" y="178" width="9" height="23"
style="fill:#8c8c8c;stroke-width:0"/>
<rect x="369" y="178" width="9" height="23"
style="fill:#8c8c8c;stroke-width:0"/>
<rect x="150" y="184" width="9" height="23"
transform="rotate(317 154 195)"
style="fill:#8c8c8c;stroke-width:0"/>
<rect x="61" y="107" width="9" height="52"
style="fill:#000000;stroke-width:0"/>
<rect x="65" y="136" width="111" height="9"
style="fill:#000000;stroke-width:0"/>
<ellipse cx="337" cy="112" rx="46" ry="44"
style="fill:#ebe4d0;stroke-width:0"/>
<ellipse cx="271" cy="124" rx="42" ry="44"
style="fill:#9d1010;stroke-width:0"/>
<ellipse cx="274" cy="72" rx="21" ry="28"
style="fill:#ebe4d0;stroke-width:0"/>
<rect x="258" y="61" width="33" height="21"
style="fill:#dbb9a9;stroke-width:0"/>
<ellipse cx="274" cy="80" rx="6" ry="7"
style="fill:#9d1010;stroke-width:0"/>
<ellipse cx="264" cy="69" rx="7" ry="6"
style="fill:#000000;stroke-width:0"/>
<ellipse cx="285" cy="68" rx="7" ry="6"
style="fill:#000000;stroke-width:0"/>
<rect x="263" y="40" width="32" height="14"
transform="rotate(13 279 47)"
style="fill:#9d1010;stroke-width:0"/>
<rect x="265" y="34" width="36" height="13"
style="fill:#9d1010;stroke-width:0"/>
<ellipse cx="306" cy="41" rx="9" ry="10"
style="fill:#ebe4d0;stroke-width:0"/>
<rect x="255" y="82" width="10" height="45"
transform="rotate(333 260 104)"
style="fill:#ebe4d0;stroke-width:0"/>
<rect x="275" y="82" width="10" height="63"
transform="rotate(33 280 113)"
style="fill:#ebe4d0;stroke-width:0"/>
<rect x="176" y="136" width="202" height="43"
style="fill:#563a1a;stroke-width:0"/>
<ellipse cx="214" cy="70" rx="12" ry="12"
style="fill:#ebe4d0;stroke-width:0"/>
<rect x="207" y="77" width="26" height="34"
transform="rotate(347 220 94)"
style="fill:#9d1010;stroke-width:0"/>
<rect x="216" y="83" width="26" height="34"
transform="rotate(272 229 100)"
style="fill:#9d1010;stroke-width:0"/>
<ellipse cx="36" cy="79" rx="28" ry="15"
style="fill:#814a27;stroke-width:0"/>
<ellipse cx="38" cy="74" rx="7" ry="6"
style="fill:#000000;stroke-width:0"/>
<ellipse cx="6" cy="79" rx="6" ry="7"
style="fill:#9d1010;stroke-width:0"/>
<ellipse cx="68" cy="71" rx="12" ry="6"
transform="rotate(340 68 71)"
style="fill:#814a27;stroke-width:0"/>
</g>
</defs>
<use x="124" y="103" xlink:href="#g1" />
</svg>
A file with extention .svg including SVG above can be read by GIMP (a free image manipulating software) and you can convert it to other format such like .png and so on. Following picture shows the image in GIMP. You can also see this image in .html file with this code as internal SVG.
And now I'm debugging this program with Visual Studio as a Visual Basic program created by [Graduate] command of Small Basic.
Anyway, this program is under debugging. I will report about this project on a thread of Small Basic forum.
Thanks.