It is said that you should write one code a day and make one output.
Today I will introduce my samples of drawing some circles with SVG.
All you have to do is “draw a circle with SVG”, but if you have never edited SVG, it is worth to try.
Draw some circles with SVG
If <circle> </ circle> is inserted between <svg> </ svg>, a circle will be drawn.
If <rect> </ rect> is inserted, a square will be drawn.
It’s simple and easy to understand.
The meaning of each designation is as follows.
- cx : Circle X coordinate
- cy : Circle Y coordinate
- r : Circle radius
- fill : Circle fill color
- stroke :Circle line color
- stroke-width : Circle line thickness
- stroke-dasharray : Circle line dotted line, Specify point spacing
This is all you have to do with the code, but as shown in the code above, you can modify the values if you want to add more circles later.
Figures drawn with SVG are more beautiful and flexible than using image files.