poor content

not useful

useful

very useful

excellent

Rate

SVG path overview

January 3, 2022

Alireza Ataei

By: Alireza Ataei

SVG path overview

Reading time: 10 min

    Content List

Have a quick overview of path commands and parameters, and general concepts required to understand the path

In the structure of path in SVG, there are multiple commands defined inside the path tag in the d attribute.

Each command works as coordinate of a point in the page, like an (x, y) in chart, so each, needs a starting point and an ending point at least.

Quick list and explanation of commands in SVG

  • M(moveto): The starting point of the whole path
    • M
    • (x , y): ending point
  • L(lineto): Draw a line
    • L
    • (x , y): ending point
  • H(horizontal lineto) / V(vertical lineto): By giving the coordinates as H(x) V(y) it draws a triangle from the starting point then to the H and then to V, (They come together)
    • H(x)
    • V(y)
  • C(curveto): With this command you can create curved Corner, but using 3 sets of coordinates, so that you can create the correct curvature as you wish
    • C
    • (x1 , y1)
    • (x2 , y2)
    • (x , y): ending point
  • S(smooth curveto): comes with the curveto command
    • S
    • (x1 , y1)
    • (x , y): ending point
  • Q(quadratic Bézier curve): simply, unlike the curveto(C) command, we have only one coordinate to define the curve
    • Q
    • (x1 , y1)
    • (x , y): ending point
  • T(smooth quadratic Bézier curve): comes with the quadratic Bézier curve command
    • T
    • (x , y): ending point
  • A(elliptical Arc): This one works with two elliptical, and then highlights the relation/difference between them
    • A
    • (x1, y1)
    • rotate
    • large_arc_flag:(1 or 0) , sweep_flag(1 or 0)
    • (x , y): ending point

Starting and ending points

All the commands have a starting point and an ending point

The starting point of each command is defined before the starting of each command,

Starting Point Of M: Except for the M command, which is the starting of the whole SVG path

Absolute and Relative

There are two methods to define each coordinate, one known as Absolute, in which the coordinates are calculated from the starting of page(chart) or point (0 , 0); as for relative, the coordinates are calculated based on the last given command.

Starting Point: Despite the fact of relative or absolute, the starting point of each command, is the ending point of the previous command

In order to distinguish the absolute path from relative path, you can look at the command name, if it is in capital format of alphabet character, then it is absolute, otherwise, relative.

Was this page helpful?

What was the most helpful point of this page for you?

Thanks for your cooperation!

poor content

not useful

useful

very useful

excellent

Comments0

Leave a Reply

Your email address will not be published.