SVG Shapes (Circles, Rectangles, Lines)

By mbystedt on Feb 28, 2014, 11:45:05 PM

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

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "rect");
 
elem.setAttributeNS(null,"x",20);
elem.setAttributeNS(null,"y",20);
elem.setAttributeNS(null,"rx",0);
elem.setAttributeNS(null,"ry",0);
elem.setAttributeNS(null,"width",160);
elem.setAttributeNS(null,"height",160);
elem.setAttributeNS(null,"fill", "blue");
 
document.documentElement.appendChild(elem);

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	Color, FillStroke, Graphics

The 'circle' Element

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "circle");
 
elem.setAttributeNS(null,"cx",100);
elem.setAttributeNS(null,"cy",100);
elem.setAttributeNS(null,"r",90);
elem.setAttributeNS(null,"fill", "blue");
 
document.documentElement.appendChild(elem);

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	Color, FillStroke, Graphics

The 'ellipse' Element

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "ellipse");
 
elem.setAttributeNS(null,"cx",100);
elem.setAttributeNS(null,"cy",100);
elem.setAttributeNS(null,"rx",90);
elem.setAttributeNS(null,"ry",80);
elem.setAttributeNS(null,"fill", "blue");
 
document.documentElement.appendChild(elem);

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	Color, FillStroke, Graphics

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

Show JavaScript

var xmlns = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(xmlns, "line");
 
elem.setAttributeNS(null,"x1",10);
elem.setAttributeNS(null,"y1",10);
elem.setAttributeNS(null,"x2",190);
elem.setAttributeNS(null,"y2",190);
elem.setAttributeNS(null,"stroke", "blue");
elem.setAttributeNS(null,"stroke-width", 4);
 
document.documentElement.appendChild(elem);

Code 4. Line

Attribute	Explanation	Example
x1, y1	The start point of the line
x2, y2	The end point of the line
Presentation Attributes	Color, FillStroke, Graphics, Markers