Scalable Vector Graphics (SVG) Paths offer an incredibly powerful way to create complex shapes and designs, moving beyond the basic geometric shapes we covered in our previous post. By mastering SVG paths, you open up a world of possibilities in digital design. In this post, we'll look deep into SVG Paths, explaining how they work and providing examples to help you along the way.

What are SVG Paths?

SVG Paths represent the outline of a shape that can be filled, stroked, used as a clipping path, or any combination of the three. The <path> element is used to define a path and its d attribute holds the series of commands and parameters that dictate what the path should look like.

SVG Path Commands

SVG Paths are defined using a set of commands. Each command can be categorized as a move, line, curve, or close command:

• Move commands (M and m): This command moves the "pen" to a new location without drawing anything. The M command (uppercase) uses absolute positioning, while the m command (lowercase) uses relative positioning.

• Line commands (L, l, H, h, V, and v): These commands draw straight lines. The L command (uppercase) draws a line from the current position to the position specified by the x and y parameters, using absolute positioning. The l command (lowercase) does the same but with relative positioning. The H and h commands draw horizontal lines, and the V and v commands draw vertical lines.

• Curve commands (C, c, S, s, Q, q, T, t): These commands draw different types of curves. C and c draw a cubic Bézier curve, S and s draw a shorthand/smooth cubic Bézier curve, Q and q draw a quadratic Bézier curve, and T and t draw a shorthand/smooth quadratic Bézier curve.

• Close command (Z and z): This command closes the current subpath by drawing a line from the current position to the start of the current subpath.

Creating Basic Paths

Let's start with a basic example. The following SVG path draws a triangle:

 <svg height="110" width="500">
  <path d="M 10 10 L 200 10 L 150 100 z" stroke="black" stroke-width="3" fill="red" />
</svg>

In this example, the M command moves the pen to (10, 10), the L commands draw lines to (200, 10) and then to (150, 100), and the z command closes the path.

Creating Complex Paths

To create more complex shapes, you can use curve commands. Here's an example of an SVG path that uses cubic Bézier curves:

 <svg height="200" width="450">
  <path d="M 20 100 c 150 -300, 300 300, 400 0" stroke="black" stroke-width="3" fill="transparent" />
</svg>

In this example, the M command moves the pen to (10, 100), and the c command draws a cubic Bézier curve. The first pair of parameters (150, -300) specifies the first control point, the second pair (300, 300) specifies the second control point, and the third pair (400, 0) specifies the end point of the curve.

Different Types of Curve Commands

SVG path provides several types of curve commands that allow you to create different forms of curves. These include Cubic Bézier curves, Quadratic Bézier curves, and their corresponding shorthand/smooth versions. Let's look into each of them:

Cubic Bézier Curves (C and c)

Cubic Bézier curves are defined by four points: the start point, end point, and two control points that determine the direction and length of the curve. The C command (uppercase) uses absolute positioning, while the c command (lowercase) uses relative positioning.

Here's an example of a path that uses a cubic Bézier curve:

 <svg height="400" width="500">
  <path d="M 10 35 C 150 50, 350 350, 400 350" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Quadratic Bézier Curves (Q and q)

Quadratic Bézier curves are defined by three points: the start point, end point, and a single control point that determines the direction and length of the curve. The Q command (uppercase) uses absolute positioning, while the q command (lowercase) uses relative positioning.

Here's an example of a path that uses a quadratic Bézier curve:

 <svg height="400" width="500">
  <path d="M 10 35 Q 225 50, 350 350" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Shorthand/Smooth Cubic Bézier Curves (S and s)

These commands allow you to create a smooth cubic Bézier curve that automatically creates a smooth transition from the previous curve. The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. The S command (uppercase) uses absolute positioning, while the s command (lowercase) uses relative positioning.

Here's an example of a path that uses a smooth cubic Bézier curve:

 <svg height="400" width="500">
  <path d="M 10 35 C 150 50, 350 350, 400 350 S 650 350, 700 350" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Shorthand/Smooth Quadratic Bézier Curves (T and t)

These commands allow you to create a smooth quadratic Bézier curve that automatically creates a smooth transition from the previous curve. The control point is assumed to be the reflection of the control point on the previous command relative to the current point. The T command (uppercase) uses absolute positioning, while the t command (lowercase) uses relative positioning.

Here's an example of a path that uses a smooth quadratic Bézier curve:

 <svg height="400" width="500">
  <path d="M 10 35 Q 225 50, 350 350 T 600 350" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Conclusion

The flexibility and power of SVG paths make them an essential tool in the creation of complex vector graphics. By understanding the different types of curves and how to use them, you can create a vast array of shapes and designs.