Blogs

How to Create Complex Paths in SVGs

Craig Buckler
Share

We’ve looked at what SVGs are and basic drawing elements. But most images move beyond simple lines, rectangles, and ellipses, and this is when knowing how to create complex paths in SVGs becomes important.

The SVG path element is far more advanced. It could be argued it’s the only element you ever need because it can draw any shape you desire. However, there’s one drawback, which is best illustrated with an example:

<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />

It looks complicated and can be difficult to follow.

The path element requires a single d attribute with a string value containing a list of encoded drawing instructions. It’s not as complex as a regular expression, but it’s easy to become lost in the number jungle.

The drawing string is formed using a series of commands identified by an upper- or lowercase letter. The letter is followed by zero or more arguments which apply to that specific command. For example, the following path uses an M command to move the SVG pen to a starting point at 500,500 without drawing a line:

<path d="M500,500" />

The SVG viewBox attribute affects the pen’s location within the image itself. Using the 500,500 example above, the pen would be:

  • centered horizontally and vertically when the SVG uses viewBox="0 0 1000 1000"
  • positioned at the top left when viewBox="500 500 1000 1000"
  • positioned at the bottom right when viewBox="-500 -500 1000 1000"
  • outside the visible area when viewBox="0 0 400 400".

Similarly, a lowercase m moves the pen relative to its current location — for example, 50 units left and 100 units up:

<path d="m50,-100" />

Drawing lines is similar: L draws a line to absolute co-ordinates, and l (lowercase L) draws a line relative to the current location. The following paths are therefore identical:

<path d="M500,500 L100,600" />
<path d="M500,500 l-400,100" />

H and h draw horizontal lines to an absolute or relative x location accordingly. For example:

<path d="M500,500 H800" />
<path d="M500,500 h300" />

Bonus points if you can guess what V and v do …

<path d="M500,500 V400" />
<path d="M500,500 v-100" />

Finally, Z or z close the path by drawing a line from the current point to the starting point. Normally, Z would be the last command in your string, although it’s possible to create strings with multiple sub-paths. For example:

<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />

The result is pictured below.

SVG paths

SVG paths can be styled with CSS or you can add stroke, stroke-width, fill and other attributes as required.

That’s the easy path options. It now gets mind-numbingly complex. Consider the A/a command, which draws an arc (section) of an ellipse with the following parameters:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

In this example:

  • rx is the ellipse x radius
  • ry is the ellipse y radius
  • x-axis-rotation is the number of degrees the ellipse is rotated
  • large-arc-flag is 0 for the smallest arc or 1 for the largest
  • sweep-flag is 0 for positive angles or 1 for negative (above or below the line)
  • x y is the end point of the arc

Arcs can be difficult to visualize, but this Codepen arc tool will help.

However, arcs have limited use, so SVG paths also offer: