After the rectangle, the friendly circles and ellipses are the obvious basic shapes.
To create a circle, use
<circle cx=”xPos” cy=”yPos” r=”radius” />
Instead of positioning a circle using its top left corner, it’s much more convenient to position it using the centre or midpoint. That’s why we don’t use regular
y attributes, but
cy attributes that define the position of the circle's centre. Furthermore, width and height are the same, which means we use the
r attribute instead, to set the radius of the circle. To remind you, the radius is half the width or height.
<svg> <circle cx="30" cy="30" r="25"/> </svg>
To create an ellipse, use
<ellipse cx=”xPos” cy=”yPos” rx=”xRadius” ry=”yRadius” />
As you can see, the only difference is that the radius has been split into two seperate ones:
rx, which is the radius in the x-direction, and
ry, the radius in the y-direction.
<svg> <ellipse cx="40" cy="25" rx="30" ry="15" /> </svg>