The <circle> element draws a circle based
on a user-supplied center x and y coordinates and radius.
An ellipse is basically a circle where the x radius and
the y radius are different lengths. The <ellipse>
element defines both rx (radius of x axis) and ry (radius
of y axis) lengths.
Code Example
SVG Image
<?xml version="1.0"
standalone="no"?>
Right-click
on the image to open the SVG viewer pop-up menu. Click
'view SVG' to display the image in a new, full window
to zoom & pan the image.
(SVG Viewer Tips)
<!DOCTYPE svg PUBLIC "-//W3C//DTD
SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500"
height="500">
<!--A circle -->
<circle cx="50"
cy="30" r="25"
style="fill:red;stroke:rgb(0,0,128);stroke-width:2"/>
The <circle> element
draws a circle based on the cx and cy attributes (50,30)
which define the x and y coordinates of the center
of the circle, and has a radius of 25 pixels. It is
filled with red color and have a outline.
Like the circle, cx and cy values for an <ellipse>
need to be defined, and the definitions will control
where the center point of the ellipse is placed. It
should have the x radius and the y radius of different
lengths.
In both circles and ellipses, if the cx or cy is
omitted, it is presumed to be zero (0,0). If the radius
is zero, no shape will be displayed; it is an error
to provide a negative radius.
Code explanation
Basic Drawing
