SVG Path

svg path are used to draw in any kind of shapes. for example we can draw line, curve,elliptical Arc and etc. we can use following commands.

No Paramter
1 M: Move To
2 L: Line To
3 C : Curve To
4 V : Vertical Line To
5 H: Horizontal Line To
6 S: Smooth Curve To
7 Q: Quadratic Bezier Curve
9 T: Smooth Quadratic Bezier curveto
10 Z: closepath
11 A: Elliptical Arc

Note that we can use both capital and small letter. small letter are work on relative path. and capital letter are work in absolute path (coordinates).

Example 1

draw any shape but first we are need to set starting point. (M or m) are used to set current location. for example draw a simple line.

(M10 20) are set initial point.

<svg height="40" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <path d="M10 20 L 150 20" stroke="gray" stroke-width="5px" fill="none">
  </path>
</svg>

Example 2

Draw quadratic Bezier curve.

  q :(width heigh end-x-coordinates end-y-coordinates)
<svg height="240" width="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <path d="M60 30 q 100 50 0 100" stroke="gray" stroke-width="5px" fill="none">
    
  </path>
  <circle cx="60" cy="30" fill="navajowhite" r="5"></circle>
  <circle cx="60" cy="130" fill="navajowhite" r="5"></circle>
</svg>

SVG Path animation

<h1>SVG Path</h1>
<svg height="260" width="300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <path stroke-dasharray="9 9" d="M10 120 l50 -50 l50 50 l 50 -50 l 50 50 l -100 100 l-100 -100z" stroke="blue" stroke-width="2px" fill="none">
   <animate attributeName="stroke-dashoffset" from="0" to="200" begin="1s" dur="8s"  repeatCount="10"></animate>
  </path>
</svg>

Example 2

<svg height="260" width="300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  <path stroke-dasharray="1000"  d="M10 120 l50 -50 l50 50 l 50 -50 l 50 50 l -100 100 l-100 -100z" stroke="blue" stroke-width="2px" fill="none">
   <animate attributeName="stroke-dashoffset" from="0" to="1000" begin="1s" dur="9s"  repeatCount="10"></animate>
  </path>
</svg>

© 2019, regularcodes.com, All rights reserved