SVG construction example 1 with viewport set
Last updated at 11:46 am UTC on 10 October 2018
The SVG viewport size is set by adding width and height attributes to the svg element.
circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].
Transcript clear.
Transcript show: '<html><svg width="700" height="100">';cr.
1 to: 10 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'green'); cr].
Transcript show: '</svg></html>';cr.
<svg width="700" height="100">
<circle cx="50" cy="50" r="20" fill="green" />
<circle cx="100" cy="50" r="20" fill="green" />
<circle cx="150" cy="50" r="20" fill="green" />
<circle cx="200" cy="50" r="20" fill="green" />
<circle cx="250" cy="50" r="20" fill="green" />
<circle cx="300" cy="50" r="20" fill="green" />
<circle cx="350" cy="50" r="20" fill="green" />
<circle cx="400" cy="50" r="20" fill="green" />
<circle cx="450" cy="50" r="20" fill="green" />
<circle cx="500" cy="50" r="20" fill="green" />
</svg>
SVG construction example 1 with viewport and viewbox set
With units set to be opened in LibreOfficeDraw for example
circle := [:cx :cy :r :fill| '<circle cx="', cx printString, 'mm" cy="', cy printString, 'mm" r="', r printString, 'mm" fill="', fill, '" />'].
Transcript clear.
Transcript show: '<svg width="210mm" height="280mm">';cr.
1 to: 10 do: [:i |
Transcript show: (circle value: (i*18) value: 50 value: 8 value: 'green'); cr].
Transcript show: '</svg>';cr.
Save the file with the extension *.svg .
<svg width="210mm" height="280mm">
<circle cx="18mm" cy="50mm" r="8mm" fill="green" />
<circle cx="36mm" cy="50mm" r="8mm" fill="green" />
<circle cx="54mm" cy="50mm" r="8mm" fill="green" />
<circle cx="72mm" cy="50mm" r="8mm" fill="green" />
<circle cx="90mm" cy="50mm" r="8mm" fill="green" />
<circle cx="108mm" cy="50mm" r="8mm" fill="green" />
<circle cx="126mm" cy="50mm" r="8mm" fill="green" />
<circle cx="144mm" cy="50mm" r="8mm" fill="green" />
<circle cx="162mm" cy="50mm" r="8mm" fill="green" />
<circle cx="180mm" cy="50mm" r="8mm" fill="green" />
</svg>
