Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Simplest SVG document
Last updated at 3:03 pm UTC on 6 September 2018
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#test_file

 <svg xmlns="http://www.w3.org/2000/svg">
 <circle r="50"/>
 </svg>

Shows a square of a circle.

The file needs to be saved with a *.svg extension. It may be opened by any we browser or opened with an SVG capable software such as LibreOffice Draw.


Set the coordinates of the center with cx and cy



 <svg xmlns="http://www.w3.org/2000/svg">
 <circle cx="50" cy="50" r="50"/>
 </svg>

The full circle is visible.

Use another fill color

The default fill color is black. To change it use the fill attribute.
 <svg xmlns="http://www.w3.org/2000/svg">
 <circle cx="50" cy="50" r="50" fill="red"/>
 </svg>

No fill color

If you do not want the circle to be filled use the none value for the fill attribute. A stroke color value then needs to be supplied.
 <svg xmlns="http://www.w3.org/2000/svg">
 <circle cx="50" cy="50" r="50" fill="none" stroke="red"/>
 </svg>


An example with more elements

See SVG construction example 3 for string based construction.