SVG - Path

About

Image Vector - Path in Svg.

Path is the generic element to define a shape.

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)

d attribute

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

• a moveto/M command to define the initial point
• a suite of commands
• and optionally the z command to close the path

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;
}

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;
}

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;
}

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;
}

Draw a curved line

See: SVG - Curve (Line)

• SVG - Bezier Curve

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;
}

Example

• Triangle
• Rectangle With Path

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)

Documentation / Reference

• en-US/docs/Web/SVG/Element/path
• Paths