Having some preliminaries out of the way, let's now examine the various SVG shapes that we will commonly use through the book. We have already seen how to create a circle; now let's look at some other shapes.
A circle is a special case of an ellipse that has an identical x and y radii. Ellipses can and often have different size radii. An ellipse is specified in SVG using the
<ellipse> tag. We still use
cy attributes to position the ellipse, but instead of using
r for radius, we use two attributes
ry to specify the radius in the x and y directions:
<ellipse cx="50" cy="30" rx="40" ry="20" />