Path

To draw any path, straight or curved

• turned_in_notPath Related Tag
  • <path>

<path>

Used to draw a path on svg, default fill color is black

Syntax

library_books<path d="commands & parameters" />

• label_outlinePath Attribute
  • d - contains a series of commands and parameters used by those commands

• label_outlinePath Attribute Commands
  • M - To move,
  • L, H, V - For line,
  • Q, T - For quadratic bezier curve,
  • C, S - For cubic bezier curve,
  • A - For Elliptical Arc,
  • Z - To close path

To Move

Syntax - To move at (x,y)

M x y

Syntax - To move distance dx (along x-axis), dy (along y-axis) from last point in path (if any)

m dx dy

• Also used to break a continue path

library_books<svg height="100" width="200">
  <path d="M10 40 L100 40
           M20 80 L100 80" style="stroke:red;stroke-width:2" />
</svg>

For Line

Syntax - To draw line to (x,y), from last point in path

L x y

Syntax - To draw line distance dx (along x-axis), dy (along y-axis) from last point in path

l dx dy

Syntax - To draw horizontal line to point x from last point in path

H x

Syntax - To draw horizontal line distance dx (along x-axis) from last point in path

h dx

Syntax - To draw vertical line to point y from last point in path

V y

Syntax - To draw vertical line distance dy (along y-axis) from last point in path

v dy

library_books<svg height="100" width="200">
  <path d="M10 10 L100 10 l40 20 H30 V50 h40 v30" 
        style="stroke:red;stroke-width:2;fill:none" />
</svg>

For quadratic bezier curve

Syntax - To draw quadratic bezier curve to (x,y), from last point in path

Q cp1x cp1y, x y

Syntax - To draw quadratic bezier curve to distance dx (along x-axis), dy (along y-axis) from last point in path

q cp1dx cp1dy, dx dy

Syntax - To continue last quadratic bezier curve to (x,y), from last quadratic bezier curve point

T x y  //If used with "Q, q, T, t" otherwise act as "L"

Syntax - To continue last quadratic bezier curve to distance dx (along x-axis), dy (along y-axis) from last quadratic bezier curve point

t dx dy  //If used with "Q, q, T, t" otherwise act as "l"

• label_outlineMore Detailed
  • cp1x, cp1y - Control point 1 along XY-axis
  • x, y - End point along XY-axis
  • cp1dx, cp1dy - Control point 1 distance along XY-axis from last point in path
  • dx, dy - End point distance along XY-axis from last point in path

  
  * For T curve if continue with Q curve, cp1x, cp1y is the reflection of cp1x, cp1y of Q
    cp1x = 2(x)^{of Q curve} - (cp1x)^{of Q curve}
    cp1y = 2(y)^{of Q curve} - (cp1y)^{of Q curve}

* Black curve is made by "Q" and Smooth red curve after that is made by using "T"

library_books<svg height="100" width="200">
  <path d="M20 40 Q50 90 130 40 T180 40" 
        style="stroke:black;stroke-width:2;fill:none"/>
</svg>

For cubic bezier curve

Syntax - To draw cubic bezier curve to (x,y), from last point in path

C cp1x cp1y, cp2x cp2y, x y

Syntax - To draw cubic bezier curve to distance dx (along x-axis), dy (along y-axis) from last point in path

c cp1dx cp1dy, cp2dx cp2dy, dx dy

Syntax - To continue last cubic bezier curve to (x,y), from last cubic bezier curve point

S cp2x cp2y, x y  //If used with "S, s, C, c"  otherwise S cp1x cp1y, x y  //Act as "Q" 

Syntax - To continue last cubic bezier curve to distance dx (along x-axis), dy (along y-axis) from last cubic bezier curve point

s cp2dx cp2dy, dx dy  //If used with "S, s, C, c"  otherwise s cp1dx cp1dy, dx dy  //Act as "q" 

• label_outlineMore Detailed
  • cp1x, cp1y - Control point 1 along XY-axis
  • cp2x, cp2y - Control point 2 along XY-axis
  • x, y - End point along XY-axis
  • cp1dx, cp1dy - Control point 1 distance along XY-axis from last point in path
  • cp2dx, cp2dy - Control point 2 distance along XY-axis from last point in path
  • dx, dy - End point distance along XY-axis from last point in path

  
  * For S curve if continue with C curve, cp1x, cp1y is the reflection of cp2x, cp2y of C
    cp1x = 2(x)^{of C curve} - (cp2x)^{of C curve}
    cp2y = 2(y)^{of C curve} - (cp2y)^{of C curve}

* Black curve is made by "C" and Smooth red curve after that is made by using "S"

library_books<svg height="100" width="200">
  <path d="M20 80 C130 10, 160 120, 190 40 S200 140, 230 40" 
        style="stroke:black;stroke-width:2;fill:none"/>
</svg>

For Elliptical Arc

Syntax - To draw elliptical arc to (x,y), from last point in path

A rx ry rotateX largeArcFlag sweepFlag x y

Syntax - To continue draw elliptical arc from last elliptical point in path drawn with A

rx ry rotateX largeArcFlag sweepFlag x y

Syntax - To draw elliptical arc to distance dx (along x-axis), dy (along y-axis) from last point in path

a rx ry rotateX largeArcFlag sweepFlag dx dy

Syntax - To continue draw elliptical arc from last elliptical point in path drawn with a

rx ry rotateX largeArcFlag sweepFlag dx dy

• label_outlineMore Detailed
  • rx, ry - Minimum radius of ellipse along XY-axis
  • rotateX - Ellipse rotational degree along X-axis
  • largeArcFlag - Value can be 0(select smaller part of ellipse) or 1(select bigger part of ellipse)
  • sweepFlag - Value can be 0(draw in negative direction) or 1(draw in positive direction)
  • x, y - End point along XY-axis
  • dx, dy - End point distance along XY-axis from last point in path

• label_outlineFor More
  

  
  largeArcFlag - Value can be :

  0(select smaller part of ellipse) or
  1(select bigger part of ellipse)

  
  sweepFlag - Value can be :

  0(draw in negative direction) or
  1(draw in positive direction)

library_books<svg height="100" width="200">
  <path d="M90 20 A 40 40 0 1 1 90 80"
        style="stroke:yellow;fill:blue;stroke-width:4;"/>
</svg>

To close path

Syntax - To join your first and last point of path

Z   //or you can use 'z' to set relative point to any next point(if any)

library_books<svg height="100" width="200">
  <path d="M10 50 L100 50 v30 z" style="stroke:red;stroke-width:2" />
</svg>

• Helper! In general all path attribute commands with
  UPPERCASE : denotes the ACTUAL POINT, and
  lowercase : denotes the DISTANCE from last point