An Interactive Guide to SVG Paths

Introduction

The SVG element is notoriously tricky. When I first encountered it, I found it totally inscrutable. Its syntax isn’t quite as bad as Regex, but it has the same sort of “what on earth?” vibes.

At the same time, elements are also incredibly useful. They’re the only way to create curved shapes in SVG, beyond full ellipses. And once you get the hang of it, they’re actually quite a lot of fun to use!

In this blog post, we’ll cover all of the basic commands, including the infamous arc command. I’ll help you build an intuition for how they work, and show you some cool stuff you can do with them!

Intended audience This blog post is written for web developers of all experience levels, though I do assume that you understand the basics of SVG. If you’re not super comfortable with SVG fundamentals, I have another post that you should read first: A Friendly Introduction to SVG

Link to this heading The basic idea

The element is modeled after the “pen” tool in vector graphics software like Illustrator. It allows us to chain a bunch of separate drawing instructions together, like a real-world pen being manipulated across a piece of paper.

Let’s look at a basic example:

Code Playground Reset Code Show line numbers Format code using Prettier Open in CodeSandbox index.html styles.css < svg viewBox = "0 0 16 16" > < path d = " M 12,4 L 4,12 M 6,4 L 12,4 L 12,10 " /> Resize editor. Use left/right arrows. result console Refresh results pane

The d attribute stands for “data”, and we use it to define a set of sequential drawing instructions. The “M” command moves our imaginary pen to a specific point, and the “L” command draws a straight line to a specific point.

... continue reading