Create a simple SVG document


	links to this page:

Last updated at 11:23 am UTC on 26 February 2020

https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#test_file

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

The file needs to be saved with a *.svg extension.

 fileStream := FileStream newFileNamed: 'circle.svg'.
 fileStream nextPutAll:  '<svg xmlns="http://www.w3.org/2000/svg">
 <circle r="50"/>
 </svg>'.
 fileStream close.

It may be opened by any we browser or opened with an SVG capable software such as LibreOffice Draw.
It shows a one fourth of a circle.

Set the coordinates of the center with cx and cy

To see the full circle a center needs to be set

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

x an y coordinate values have the same orientation as in Morphic.

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>

SVG examples with more elements

See

SVG construction example 3 - circle and text
SVG construction example 4 - rect, circle and text for string based construction.
SVG construction example 5 - clock or ornament

Set the coordinates of the center with cx and cy

Use another fill color

No fill color

SVG examples with more elements

See also