The Building Blocks of Vector Graphics
SVG paths are the most powerful and flexible way to create shapes in Scalable Vector Graphics. Think of them as a set of instructions that tell the browser how to draw lines, curves, and shapes on the screen. Unlike basic shapes like rectangles and circles, paths can create virtually any geometric form imaginable.
A path is defined by a series of commands, each consisting of a letter (the command) followed by coordinates. These commands can be absolute (starting from the origin) or relative (starting from the current position).
The M command moves the drawing cursor to a specific point without drawing anything. It's like picking up a pen and placing it on paper without making a mark.
M 10,10
Moves to coordinates (10, 10)
The L command draws a straight line from the current position to the specified coordinates. It's like drawing a line with a ruler.
M 10,10 L 50,50
Moves to (10,10) then draws a line to (50,50)
The H command draws a horizontal line to the specified x-coordinate, keeping the same y-coordinate. Perfect for drawing straight horizontal lines.
M 10,30 H 80
Moves to (10,30) then draws horizontal line to x=80
The V command draws a vertical line to the specified y-coordinate, keeping the same x-coordinate. Ideal for drawing straight vertical lines.
M 40,10 V 70
Moves to (40,10) then draws vertical line to y=70
The Q command creates a quadratic Bézier curve using a control point and an end point. The curve starts at the current position, is influenced by the control point, and ends at the specified coordinates.
M 10,50 Q 50,10 90,50
Creates a curve from (10,50) through control point (50,10) to (90,50)
The C command creates a cubic Bézier curve using two control points and an end point. This allows for more complex curves with greater control over the shape.
M 10,50 C 30,10 70,10 90,50
Creates a curve from (10,50) through control points (30,10) and (70,10) to (90,50)
The A command draws an elliptical arc. It's the most complex command, requiring radius, rotation, flags for large/small arc and sweep direction, and end coordinates.
M 10,50 A 30,20 0 0 1 70,50
Draws an arc from (10,50) to (70,50) with radius 30,20
The Z command closes the current path by drawing a straight line from the current position back to the starting point. This is essential for creating filled shapes.
M 10,10 L 50,10 L 50,50 L 10,50 Z
Creates a closed rectangle that can be filled
A simple arrow created using straight lines and a triangular arrowhead. This demonstrates how basic path commands can create recognizable shapes.
M 20,50 L 70,50 L 70,40 L 85,50 L 70,60 L 70,50 Z
A five-pointed star created using line commands. Each point alternates between outer and inner radius to create the star pattern.
M 50,10 L 61,35 L 88,35 L 68,55 L 75,80 L 50,65 L 25,80 L 32,55 L 12,35 L 39,35 Z
A speech bubble combining rounded rectangles with a triangular tail. Uses arcs and lines to create the characteristic bubble shape.
M 15,15 Q 15,5 25,5 L 75,5 Q 85,5 85,15 L 85,45 Q 85,55 75,55 L 50,55 L 45,75 L 40,55 L 25,55 Q 15,55 15,45 Z
Lowercase commands (m, l, c, etc.) are relative to the current position, making paths easier to move and reuse. Uppercase commands (M, L, C, etc.) are absolute.
Remove unnecessary decimal places and use the shortest possible path commands. Tools like SVGO can help optimize your paths automatically.
Use H and V for straight horizontal/vertical lines, Q for simple curves, and C for complex curves. Don't overcomplicate simple shapes.
Always close paths (Z) when you want to fill shapes. Open paths can only be stroked, not filled.
Complex paths may render differently across browsers. Test your SVG paths in multiple browsers to ensure consistency.
SVG paths are incredibly powerful tools for creating vector graphics. While they may seem complex at first, understanding the basic commands opens up endless possibilities for creating custom shapes, icons, and illustrations.
Start with simple shapes and gradually work your way up to more complex paths. Practice with visual tools first, then learn to read and write path data manually. With time and practice, you'll be able to create virtually any shape imaginable using SVG paths.
Remember that SVG paths are resolution-independent, making them perfect for responsive design and scalable graphics that look crisp at any size.