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 10:23 am UTC on 16 May 2019
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>

SVG_Canvas_default_grid.png
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

See also

How to write a file

tagBeginner