SVG shapes: circle, rect, line, polygon and the rest
The six basic SVG shapes are rect, circle, ellipse, line, polyline and polygon. The attributes each one takes, with code for every shape and common faults.
Published
SVG has six basic shape elements: <rect>, <circle>, <ellipse>, <line>, <polyline> and <polygon>. Each takes a few attributes giving its position and size, for example <circle cx="50" cy="50" r="40"/> for a circle of radius 40 centred on the point 50,50. Anything these six cannot draw, such as curves and arcs, is drawn with <path>.
This is a complete SVG file with one of each:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150">
<rect x="10" y="10" width="80" height="50" rx="8" fill="teal"/>
<circle cx="150" cy="35" r="25" fill="gold"/>
<ellipse cx="250" cy="35" rx="40" ry="25" fill="tomato"/>
<line x1="10" y1="100" x2="90" y2="100" stroke="black" stroke-width="4"/>
<polyline points="110,120 130,80 150,120 170,80 190,120" fill="none" stroke="black" stroke-width="4"/>
<polygon points="250,75 285,135 215,135" fill="purple"/>
</svg>The top row holds a rounded rectangle, a circle and an ellipse. Below them are a straight line, a zigzag and a triangle.
The six shapes
| Element | Draws | Attributes |
|---|---|---|
<rect> | A rectangle or square, with square or rounded corners | x, y, width, height, rx, ry |
<circle> | A circle | cx, cy, r |
<ellipse> | An oval | cx, cy, rx, ry |
<line> | One straight line | x1, y1, x2, y2 |
<polyline> | Straight lines joined end to end, left open | points |
<polygon> | Straight lines joined end to end, closed into a shape | points |
The numbers are in the drawing’s own units, set by the viewBox. The point 0,0 is the top-left corner, x runs to the right and y runs down. SVG viewBox explained covers the coordinates.
Every position attribute (x, y, cx, cy, x1 and so on) is 0 if left out. The sizes have no useful default: a rect with no width or height, or a circle with no r, is not drawn.
Circle and ellipse
<circle cx="50" cy="50" r="40"/>
<ellipse cx="50" cy="50" rx="40" ry="25"/>cx and cy place the centre. A circle has one radius, r. An ellipse has two: rx across and ry up and down. There is no diameter attribute, so a circle 80 units wide has r="40".
A circle is always whole. For a half circle, a pie slice or an arc, use the arc command of a path, explained in the SVG path guide.
Rect: rectangles, squares and rounded corners
<rect x="10" y="10" width="120" height="40"/>
<rect x="10" y="60" width="120" height="40" rx="8"/>
<rect x="10" y="110" width="120" height="40" rx="20"/>x and y place the top-left corner, not the centre. There is no square element: a square is a rect with equal width and height.
rx rounds the corners. Given rx alone, ry takes the same value, so the corners are quarter circles. Give both to get corners that are quarter ellipses. The radius cannot exceed half the side, so the third rectangle above, 40 tall with rx="20", has fully round ends: a pill shape.
To tilt a rectangle, add a transform, as in SVG transform.
Line
<line x1="10" y1="10" x2="90" y2="60" stroke="black" stroke-width="2"/>A line runs from the point x1,y1 to the point x2,y2. It has no inside, so fill does nothing, and since the default stroke is none, a line with no stroke attribute is invisible. That is the most common fault with this element.
stroke-linecap="round" rounds the two ends. For dashes and dots, use stroke-dasharray. Both are covered in SVG fill and stroke.
Polyline and polygon
Both take a points attribute: a list of x,y pairs.
<polyline points="10,90 40,20 70,90" fill="none" stroke="black" stroke-width="2"/>
<polygon points="10,90 40,20 70,90" fill="gold" stroke="black" stroke-width="2"/>The polyline draws two lines and stops: an open V turned upside down. The polygon adds a line from the last point back to the first, giving a closed triangle.
Commas and spaces are interchangeable in the list, so 10,90 40,20 and 10 90 40 20 mean the same. The count of numbers must be even. With an odd count the list is in error: browsers drop the stray last number and draw the rest.
A polyline is filled unless told otherwise, as if a straight line closed it. Set fill="none" for a line chart or a zigzag.
Polygon is the element for triangles, stars, arrows and regular shapes. A hexagon 80 units from corner to corner, centred on 50,50:
<polygon points="90,50 70,84.6 30,84.6 10,50 30,15.4 70,15.4"/>Colour and outline
A shape with no styling is filled black and has no outline. fill sets the inside colour, stroke the outline colour and stroke-width its thickness:
<circle cx="50" cy="50" r="40" fill="none" stroke="crimson" stroke-width="4"/>The stroke is centred on the edge of the shape, half inside and half outside. This ring is therefore 84 units across in all, and fits a 100 unit viewBox with room to spare. With r="50" the outer half of the stroke would be cut off.
Shapes are painted in the order they appear in the file. A later shape covers an earlier one where they overlap.
Shapes and paths
Every basic shape could be written as a <path>, and a path can also draw curves. The basic shapes exist because they are easier to read and to change: a radius is one number.
Some vector editors and file optimisers turn shapes into paths when saving, which changes nothing in how they look. Most cutting and laser software reads the basic shapes as well as paths. If a program drops one, convert it in an editor first: in Inkscape, select the shape and choose Path, Object to Path.
Try it
Paste any example into the code box of the SVG viewer, wrapped in an <svg> element with a viewBox, and it is drawn at once. Change a number and the picture follows. The examples in this guide other than the first are fragments: they need that wrapper to become a file.
Common problems
| What you see | Cause | Fix |
|---|---|---|
| A line does not show | No stroke | Add stroke and stroke-width |
| A polyline has a black area | It is filled by default | fill="none" |
| Nothing is drawn | r, width or height is missing or zero | Give the size |
| The shape is cut off | It runs past the viewBox, or half its stroke does | Move it in, or enlarge the viewBox |
| A circle looks oval | The SVG is being stretched: preserveAspectRatio="none", or a file with no viewBox squeezed in an <img> | Remove the attribute, or add a viewBox |
| A polygon has a stray edge | A point is missing a number, or two points are in the wrong order | Check the list pair by pair |
| The rectangle is in the wrong place | x and y were taken as the centre | They are the top-left corner: subtract half the width and height |
Questions
How do I draw a triangle or a star? With <polygon>, listing the corners in order. There is no triangle or star element.
How do I draw a curved line? With <path>. The basic shapes have straight sides, apart from the circle, the ellipse and rounded corners.
Can I put text inside a shape? A shape cannot contain text. Place a <text> element after it at the same position: see SVG text.
Can a shape have units, such as mm? Yes, r="10mm" is allowed, but mixing units with a viewBox gets confusing. Keep the shapes unitless and set the real size once, on the <svg> element.