apike.ca

SVG Shapes (Circles, Rectangles, Lines)

The simplest shapes in SVG are the rectangle, circle, ellipse and line. Every shape has their own set of attributes for defining their position, geometry and size. The actual presentation of the shape is handled by attributes that are common for all shapes. For example, the attribute fill used below fills in the shape with the specified color. Filling and stroking shapes is covered in this section. All the presentation attributes are shown in the appendix with links to the relevant tutorial section.

On this page: Rectangle, Circle, Ellipse & Line

Legend

BOLD means the attribute is required.
Green means the attribute is optional.
Italics denotes a presentation attribute of the shape like fill which is both optional and shared with other SVG elements.

The 'rect' Element

<rect x="20" y="20" rx="0" ry="0" width="160" height="160" fill="blue" />
Code 1. Rectangle
Attribute
Explanation
Example
x
The x-axis top-left corner of the rectangle
y
The y-axis top-left corner of the rectangle
rx
For rounded rectangles. x-axis radius used to round the element (0 default)
ry
For rounded rectangles. y-axis radius used to round the element (0 default)
width
The width of the rectangle
height
The height of the rectangle
Presentation Attributes

The 'circle' Element

<circle cx="100" cy="100" r="90" fill="blue" />
Code 2. Circle
Attribute
Explanation
Example
cx
The x-axis center of the circle
cy
The y-axis center of the circle
r
The circle's radius
Presentation Attributes

The 'ellipse' Element

<ellipse cx="100" cy="100" rx="90" ry="80" fill="blue" />
Code 3. Ellipse
Attribute
Explanation
Example
cx
The x-axis center of the ellipse
cy
The y-axis center of the ellipse
rx
The length of the ellipse's radius along the x-axis
ry
The length of the ellipse's radius along the y-axis
Presentation Attributes

In case you're wondering, a SVG circle is just shorthand for an ellipse with equal x-axis and y-axis radii.

The 'line' Element

<line x1="10" y1="10" x2="190" y2="190" stroke="blue" stroke-width="4" />
Code 4. Line
Attribute
Explanation
Example
x1, y1
The start point of the line
x2, y2
The end point of the line
Presentation Attributes
Related Topics

Next are polylines and polygons which allow the creation of open or closed arbitrary shapes that are built using connected lines.