links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Create a simple SVG document
Last updated at 11:23 am UTC on 26 February 2020

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

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"/>
 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"/>

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"/>

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 examples with more elements


See also

How to write a file