SVG Path

Posted in SVG Tutorial

Updated on May 18, 2024

By Mari Selvan

👁️ 121 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In Scalable Vector Graphics (SVG), the <path> element is a powerful tool for creating complex shapes, curves, and lines. Paths allow for precise control over the design and layout of graphical elements on a webpage.

Understanding how to work with SVG paths opens up a world of creative possibilities for web developers and designers. Let's explore the syntax, commands, and usage of SVG paths in detail.

💡 Syntax

The syntax for creating an SVG path involves using the <path> element along with various commands and parameters to define the shape. Here's a basic structure:

Syntax

Copied

<svg>
  <path d="M x1 y1 L x2 y2 ..." />
</svg>

The d attribute contains a sequence of commands and parameters that specify the path's shape.

🧰 Attributes

M (Move To): Moves the pen to the specified coordinates without drawing.
L (Line To): Draws a straight line from the current pen position to the specified coordinates.
H (Horizontal Line To): Draws a horizontal line from the current pen position to the specified x-coordinate.
V (Vertical Line To): Draws a vertical line from the current pen position to the specified y-coordinate.
C (Curve To): Draws a cubic Bézier curve with control points.
S (Smooth Curve To): Draws a smooth cubic Bézier curve.
Q (Quadratic Curve To): Draws a quadratic Bézier curve with control points.
T (Smooth Quadratic Curve To): Draws a smooth quadratic Bézier curve.
A (Arc To): Draws an elliptical arc.

📄 Example

Let's create a simple SVG path with a line and a curve:

index.html

Copied

<svg width="200" height="200">
  <path d="M 50 50 L 150 50 C 100 100 200 100 150 150" fill="none" stroke="black" stroke-width="2" />
</svg>

🧠 How it works?

In this example, we start at point (50, 50), draw a line to (150, 50), and then draw a cubic Bézier curve to (150, 150) with control points at (100, 100) and (200, 100).

🎉 Conclusion

SVG paths are a versatile tool for creating intricate shapes and designs on the web.

By mastering the syntax and commands of SVG paths, you can unleash your creativity and build visually stunning graphics and animations for your web projects.