An Interactive Guide to SVG Paths

Summary

IntroductionThe SVG <path> 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, <path> 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 audienceThis 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: The <path> 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: <svg viewBox="0 0 16 16"> <path d=" M 12,4 L 4,12 M 6,4 L 12,4 L 12,10 " /> </svg>Resize editor. Use left/right arrows. 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. Here’s a visualization showing each of these steps: <svg viewBox="0 0 16 16"> <path d=" M 12,4 L 4,12 M 6,4 L 12,4 L 12,10 " /></svg>movemlinelmovemlinellinelPlay It’s like a recipe. Each letter indicates a new step: chop the carrots, boil the broccoli. The numbers are the parameters for that instruction, like arguments passed to a function. Each instruction flows into the next. This is something that really confused me at first. I expected that a “Line” command would take two points, a start point and an end poin...