SVG essentials. Basic shapes and path

In the previous article, we have seen the flower consisted of a circle at center and paths for petals. However, there are more shapes that can be drawn with SVG. Table of contents Presentational attributes Circle Ellipse Rectangle Line Polyline Polygon Path Cubic Bézier curve Quadratic Bézier curve Relative values Presentational attributes Before diving into shapes let's talk a bit about the style defined in the SVG element: fill - background of the shape; stroke - color of the shape border; stroke-width - size of the shape border. These presentation attributes are always overridden by styles applied with CSS rules; Circle Let's draw one more circle: cx and cy set the center of a circle; r stands for radius. Since the boundary of the SVG is 100x100 and the circle radius is 50, the circle will be at the center of SVG and its border at the SVG border. Ellipse cx and cy define the center of an ellipse; rx sets the x-axis radius; ry sets the y-axis radius; Rectangle x and y set left top corner of the rectangle; width and height define the width and height of the rectangle; rx and ry make the rectangle rounded: if only either rx or ry is set, the other one takes the same value. Line x1 and y1 are coordinates for the start of the line; x2 and y2 are coordinates for the end of the line. Polyline points are a sequence of coordinates that connect straight line segments. This element defines open shapes. Polygon In contrast to polyline, polygon always closes a shape. points are sequence of coordinates that connect straight line segments. We can see the same set of points as in polyline, but polygon automatically closes the path. Path Mx,y stands for "Move To" and defines the starting point of the drawing with coordinates x y; Lx,y stands for "Line To" and draws a line to the point with x y coordinates; Hx draws a horizontal line; Vy draws a vertical line; Z closes a path. We can certainly draw the same shape using either polyline or polygon. So, what's the difference between path and those shapes? Path also allows us to draw curves! Cubic Bézier curve Cx1,y1 x2,y2 x,y stands for "Curve To" and draws a curve from the current point to the ending point (x,y), using (x1,y1) and (x2,y2) as control points. Empty circles indicate starting and ending points, while filled ones indicate control points. Smooth continuation We can create smooth shapes by relying on the current point: Sx2,y2 x,y stands for "Smooth Curve To" and draws the curve by setting the reflection of the second control point on the previous command (either C or S) relative to the current point as (x1,y1) control point. It's better to see the example: The control point (50,80) (blue circle) was created under the hood, we haven't written it explicitely, it's the reflection of (50,20) point on the point (50,50) and represents the first control point for the second curve. Quadratic Bézier curve Qx1,y1 x,y stands for "Quadratic Curve To" and draws a quadratic curve from the current point to the ending point (x,y), using (x1,y1) as a control point. Smooth continuation Just like a cubic curve has a special command for smooth continuation, a quadratic curve has T command: Tx,y draws a quadratic curve from the current point to the ending point (x,y), and the control point is the reflection of the control point on the previous command relative to the current point. Let's look at the example: The blue point was automatically calculated based on the previous control point and the current point. Relative values The path has an important feature: we can use lowercase to set relative values: d="M10,10 v80 l40,-40 l40,40 v-80 Z" It's the same shape we've built using d="M10,10 V90 L50,50 L90,90 V10 Z" path.

Mar 11, 2025 - 18:27

In the previous article, we have seen the flower consisted of a circle at center and paths for petals. However, there are more shapes that can be drawn with SVG.

Presentational attributes
Circle
Ellipse
Rectangle
Line
Polyline
Polygon
Path
- Cubic Bézier curve
- Quadratic Bézier curve
- Relative values

Presentational attributes

Before diving into shapes let's talk a bit about the style defined in the SVG element:

fill - background of the shape;
stroke - color of the shape border;
stroke-width - size of the shape border.

These presentation attributes are always overridden by styles applied with CSS rules;

Circle

Let's draw one more circle:

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  cx="50" cy="50" r="50" fill="green" />

cx and cy set the center of a circle;
r stands for radius.

Since the boundary of the SVG is 100x100 and the circle radius is 50, the circle will be at the center of SVG and its border at the SVG border.

Ellipse

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  cx="50" cy="50" rx="50" ry="25" fill="orange" />

cx and cy define the center of an ellipse;
rx sets the x-axis radius;
ry sets the y-axis radius;

Rectangle

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  width="100" height="100" x="0" y="0" rx="50" ry="25" fill="lightblue" />

x and y set left top corner of the rectangle;
width and height define the width and height of the rectangle;
rx and ry make the rectangle rounded: if only either rx or ry is set, the other one takes the same value.

Line

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  x1="25" y1="25" x2="75" y2="75" stroke="black" stroke-width="10" />

x1 and y1 are coordinates for the start of the line;
x2 and y2 are coordinates for the end of the line.

Polyline

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 
 fill="pink"
 stroke="black"
 stroke-width="10"
 points="10,10 50,80 90,10"
 />

points are a sequence of coordinates that connect straight line segments.

This element defines open shapes.

Polygon

In contrast to polyline, polygon always closes a shape.

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  
   fill="lime"
   stroke="black"
   stroke-width="10"
   points="10,10 50,80 90,10"
 />

points are sequence of coordinates that connect straight line segments.

We can see the same set of points as in polyline, but polygon automatically closes the path.

Path

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  
   fill="yellow"
   stroke="black"
   stroke-width="10"
   d="M10,10 V90 L50,50 L90,90 V10 Z"
 />

Mx,y stands for "Move To" and defines the starting point of the drawing with coordinates x y;
Lx,y stands for "Line To" and draws a line to the point with x y coordinates;
Hx draws a horizontal line;
Vy draws a vertical line;
Z closes a path.

We can certainly draw the same shape using either polyline or polygon. So, what's the difference between path and those shapes? Path also allows us to draw curves!

Cubic Bézier curve

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   
    fill="rosybrown" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 V90 C10,50 90,50 90,90 V10 Z" />

Cx1,y1 x2,y2 x,y stands for "Curve To" and draws a curve from the current point to the ending point (x,y), using (x1,y1) and (x2,y2) as control points.

Empty circles indicate starting and ending points, while filled ones indicate control points.

Smooth continuation

We can create smooth shapes by relying on the current point:

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   
    fill="teal" 
    stroke="black" 
    stroke-width="10" 
    d="M10,50 C10,20 50,20 50,50 S90,80 90,50" />

Sx2,y2 x,y stands for "Smooth Curve To" and draws the curve by setting the reflection of the second control point on the previous command (either C or S) relative to the current point as (x1,y1) control point. It's better to see the example:

The control point (50,80) (blue circle) was created under the hood, we haven't written it explicitely, it's the reflection of (50,20) point on the point (50,50) and represents the first control point for the second curve.

Quadratic Bézier curve

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   
    fill="coral" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 V80 Q50,40 90,80 V10 Z"
 />

Qx1,y1 x,y stands for "Quadratic Curve To" and draws a quadratic curve from the current point to the ending point (x,y), using (x1,y1) as a control point.

Smooth continuation

Just like a cubic curve has a special command for smooth continuation, a quadratic curve has T command:

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   
    fill="cornflowerblue" 
    stroke="black" 
    stroke-width="10" 
    d="M10,50 Q30,10 50,50 T90,50"
 />

Tx,y draws a quadratic curve from the current point to the ending point (x,y), and the control point is the reflection of the control point on the previous command relative to the current point. Let's look at the example:

The blue point was automatically calculated based on the previous control point and the current point.

Relative values

The path has an important feature: we can use lowercase to set relative values:

d="M10,10 v80 l40,-40 l40,40 v-80 Z"

It's the same shape we've built using d="M10,10 V90 L50,50 L90,90 V10 Z" path.