(click anywhere to close)
OPEN MENU

[SVG] Paths

category: Website | course: SVG | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Specifiers

All those nice basic shapes up until now are easy and quick, but they can’t do everything. For example, points are all connected by straight lines, which means any type of curve is already out of the question.

This advanced functionality is provided by the path element, which has the following syntax:

<path d=”some complex path” />

The d here stands for data, as you’ll be providing all the path’s data to that attribute. This data, again, comes in the form of lots of points, separated by a whitespace. The difference with polylines, however, is that in front of every point you need to provide the method to use for connecting the previous point with this point. This is called the specifier, and is just a certain predefined letter. I’ll provide them all in a table at the end of this chapter, but I first want to give you an idea of how it works before overwhelming you. So, let’s look at an example.

<svg>
    <path d="M15,15 L60,60 Q120,40 40,10 Z" stroke="red" stroke-width="8" fill="orange"/>
</svg>

When a path is drawn, it always starts at the point (0,0), and simply moves through this list of points step by step, connecting them all together. The element relies on you completely to make sure the path turns out great – it doesn’t close off the path for you, nor does it automatically smoothen your path. Most paths start with the specifier M, because quite often you don’t want your path drawing a line between (0,0) and your first data point.

Specifiers

Some specifiers also require more (or less) parameters than the two coordinates of the point it is attached to, which is why I’ll provide which parameters it takes for every single one.

Specifier

Arguments

Name

Description

M

x, y

Moveto

Moves to (x,y) without drawing a line

L

x, y

Lineto

Draws a line to (x,y)

H

x

Horizontal Lineto

Draws a horizontal line to x (keeping the same y as the previous point)

V

y

Vertical Lineto

Draws a vertical line to y (keeping the same x as the previous point)

C

x1,y1 x2,y2 x,y

Curveto

Draws cubic Bezier curve to (x,y).

The points (x1,y1) and (x2,y2) are the start and end control points.

S

x2,y2 x,y

Smooth Curveto

Draws cubic Bezier curve to (x,y)

The point (x2,y2) is the end control point. The start control point is assumed the same as the previous curve.

Q

x1,y1 x,y

Quadratic Bezier Curveto

Draws quadratic Bezier curve to (x,y).

The point (x1,y1) is the control point for controlling how the curve bends.

T

x, y

Smooth quadratic Bezier Curveto

Draws quadratic Bezier curve to (x,y).

Control point is assumed to be the same as the last control point used.

A

rx ry

x-axis-rotation

large-arc-flag

sweepflag

x, y

Elliptical arc

Draws arc to the point (x,y)

The values rx and ry are the radiuses of the ellipse.

The x-axis-rotation rotates the ellipse the arc is created from (without changing start/end point).

The large-arc-flag (0 or 1) determines how wide the arc is.

The sweepflag (0 or 1) determines which way the arc goes (underneath or above).

Z

 

Closepath

Closes the path by drawing a straight line from the current point to the first point. Doesn’t need an argument.

Each of these also has a lowercase variation, which works exactly the same way, except for one major difference: the points you give as parameters are interpreted as relative to the previous point. The example will demonstrate this as well.

<svg>
	<!-- Red line -->
    <path d="M30,30 l60,60" stroke="red" stroke-width="8"/>
    <!-- Orange Line -->
    <path d="M120,50 L60,60" stroke="orange" stroke-width="8"/>
    <!-- Orange-Red Arc -->
    <path d="M120,120 A10,10 45 0 1 200,140" stroke="red" stroke-width="8" fill="orange"/>
</svg>

If you’re wondering what are Bezier curves? I’m planning on creating an in-depth tutorial on these one day, as part of a complete vector graphics course, as the subject is too long and difficult to explain here. But, as long as it’s not ready, Google it! For now, just know that they are smooth curves between two points.

Paths are powerful, but complex. I don’t recommend trying to create those from the top of your head – I think it’s much faster and easier to use software that can output SVG files.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)