Niche tweet, but have you ever been messing around with an icon and wondered how SVG path data works?
It's actually quite simple.
Path data is made up of 6 types of instructions that tell your computer how to draw the shape:
- MoveTo
- LineTo
- Cubic Bezier curve
- Quadratic Bezier curve
- Arc curve
- Close Path
Each of those instructions uses a letter of the alphabet as a command and all the numbers that follow are parameters being passed into it.
Lets break it down using this heart icon.
The first instruction is usually always MoveTo which tells the cursor to move from the origin to wherever the path will start
After that we have two Cubic Bézier curves that make up this larger curve.
Each curve has an end point as well as two control points.
Then there are two lines that form this V shape.
We repeat the two Bézier curves from earlier but in the opposite direction and close the shape using Z
In theory, you could code icons by hand if you were hardcore.
You can read more about path data here:
developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
If you want to learn more about how Bezier Curves work check out this thread
twitter.com/DanHollick/status/1458498461167280130?s=20&t=1yGh9sxot4KHVHI0OOJXNA