Table of Contents

About

Image Vector - Path in Svg.

Path is the generic element to define a shape.

Complex shapes composed only of straight lines can be created as polylines.

Syntax

<!-- 2 command sequence= 2 triangles -->
<!-- d="sequence1 sequence2" -->
<path 
      d="M 10,150 L 70,10 L 130,150 z     M 150,150 L 210,10 L 270,150 z"
      fill="#D5D8CB"
      stroke="#ECDCC6" 
      stroke-width="6"/>

Output: Points has been added with a circle (not shown, click on try the code to see them)

Rendered by WebCode

d attribute

The shape of a path element is defined by one attribute: d that contains a suite of sequence that is defined by:

All of the commands also come in two variants.

  • An uppercase letter specifies absolute coordinates on the page,
  • and a lowercase letter specifies relative coordinates (e.g. move from the last point 10px up and 7px to the left).

Coordinates in the “d” attribute are always unitless and hence in the user coordinate system.

Style attributes

You can apply also style attribute such as:

  • fill (none, transparent)
  • stroke
  • stroke-width

Example: 

<path d="M 0 0 l 0 5 h 5 v -5 z" stroke="#000000" stroke-width="0.1" fill="#FFFFFF"/>

Commands

M - Move to

MoveTo:

  • establish a new initial point and a new current point.
  • No line is drawn.

Syntax:

  • M 100 100 to move to (100,100). The “Move to” command is called with the letter M.
  • m dx dy to move to the relatif position (dx, dy).
<svg >

  <!-- Go to position 100/100 then draw a horizontal line of 100 with the h command -->
  <path d="M 0 100 m 100 0 h 100"/>

</svg>

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
Rendered by WebCode

Draw a straight line

L - Line To

L takes two parameters—x and y coordinates—and draws a straight line from the current position to a new position.

  • L x y to draw a line with absolute coordinates
  • l dx dy to draw a line with relatif coordinates
<svg width="200" height="30" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 L 30 10"/>
  <!-- Points -->
  <circle cx="10" cy="10" r="2"/>
  <circle cx="30" cy="10" r="2"/>

</svg>

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
circle {
  fill: red;
}
Rendered by WebCode

H - Draws a horizontal line

The commands only take one argument since it move only in one direction.

  • H x to move absolutely
  • h dx to move relatively
<svg width="200" height="30" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 H 30"/>
  <!-- Points -->
  <circle cx="10" cy="10" r="2"/>
  <circle cx="30" cy="10" r="2"/>

</svg>

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
circle {
  fill: red;
}
Rendered by WebCode

V - Draws a vertical line.

The commands only take one argument since it move only in one direction.

  • V y to move absolutely
  • v dy to move relatively
<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 V 30"/>
  <!-- Points -->
  <circle cx="10" cy="10" r="2"/>
  <circle cx="10" cy="30" r="2"/>

</svg>

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
circle {
  fill: red;
}
Rendered by WebCode

Draw a curved line

See: SVG - Curve (Line)

Z- Close the path

This command draws a straight line from the current position back to the first point of the path. There is no difference between the uppercase and lowercase command. Z or z 

<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 V 30 H 30 z"/>
  <!-- Points -->
  <circle cx="10" cy="10" r="2"/>
  <circle cx="10" cy="30" r="2"/>
  <circle cx="30" cy="30" r="2"/>
  
</svg>

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
circle {
  fill: red;
}
Rendered by WebCode

Example

Javascript Path Generation

data=[
     {x: 20, y: "20"}
   , {x: 3, y: "3"}
   ]

let d = `
  M${data[0].x} ${data[0].y} 
  ${data.slice(1).map(d => {
    return `L${d.x} ${d.y}`;
  }).join(' ')}
`;
console.log(d)
Rendered by WebCode

Documentation / Reference