Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Path

Posted in SVG Tutorial
Updated on May 18, 2024
By Mari Selvan
👁️ 101 - Views
⏳ 4 mins
💬 1 Comment
SVG Path

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
Copy To Clipboard
<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
Copy To Clipboard
<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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy