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

1. Presentational attributes
2. Circle
3. Ellipse
4. Rectangle
5. Line
6. Polyline
7. Polygon
8. Path
   • Cubic Bézier curve
   • Quadratic Bézier curve
   • Elliptical arc 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:

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

• 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

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

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

Rectangle

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

• 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

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

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

Polyline

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

• 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.

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

• 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

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

• 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

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

• 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:

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

• 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

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

• 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:

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

• 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.

Elliptical arc curve

Arc is a section of an ellipse.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
  <path 
    fill="khaki" 
    stroke="black" 
    stroke-width="10" 
    d="M10,10 
       V80 
       A40,20 0 0,1 90,80 
       V10 
       Z"
 />
 <ellipse 
    fill="none"
    stroke="gray"
    stroke-width="5"
    rx="40"
    ry="20"
    cx="50"
    cy="80"
 />
</svg>

• Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y draws an arc from the current point to (x,y) point.
  • rx,ry are radii of an ellipse;
  • x-axis-rotation is an angle (id degrees) for ellipse rotation;
  • large-arc-flag and sweep-flag take values either '1' or '0' and decide what part of an ellipse to take. You can see in more detail here.

Here, we see the arc is a part of the ellipse with x-radius "40" and y-radius "20" without any rotation (x-axis-rotation=0).

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.