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).

M options

M are used to set starting coordinate to drawing shape. that are very important to include this option within (d attributes). because this coordinate are really used to other options.

L option

L option are used to draw a line. there are two point (x1,y1). note that that are use relative coordinate of (x,y) which are previously used. let view an example.

Svg Line Example Absolute Path L Relative Path l (50,10) (50,150) (50,170) (20,150)
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="180" height="340" >
  <!-- Absolute Path L -->
  <path d="M50 10 L50 150" fill="blue" stroke="gray" stroke-width="3"></path>
   <!-- relative Path l -->
  <path d="M 50 170 l20 150" fill="blue" stroke="gray" stroke-width="3"></path>
</svg>

C option (Bezier Curves)

C x1 y1, x2 y2, x y (Absolute Path)
c x1 y1, x2 y2, x y (Relative Path)
No Cordinates Overview
1 x1 y1 x1 y1 is middle controlling point
2 x2 y2 x2 y2 is middle controlling point
3 x y Ending point
Svg bezier curve Example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="180" height="160" >
  <!-- Absolute Path C -->
  <path d="M10 10 C 35 35, 60 35, 85 10" fill="none" stroke="gray" stroke-width="3"></path>
   <!-- relative Path C -->
  <path d="M10 80 c 35 35, 60 35, 85 10" fill="none" stroke="gray" stroke-width="3"></path>
</svg>

S option

S x1 y1 x2 y2 
No Cordinates Overview
1 x1 y1 x1 y1 is middle controlling point
2 x y Ending point
Svg smooth curve example
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="180" height="160" >
  <!-- Absolute Path S -->
  <path d="M10 70 S 70 -70 150 70" fill="none" stroke="gray" stroke-width="3"></path>
</svg>

Q option

Q x1 y1, x y
or q x1 y1, x y
Svg quadratic bezier curve example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="180" height="160" >
  <!-- Absolute Path S -->
   <path d="M10 100 Q 80 10 160 100"  stroke="gray" stroke-width="3" fill="none"/>
</svg>

T option

T x y
Svg smooth quadratic bezier curve example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="240" >
   <path d="M 50 30 Q 120 80  50 130 T 90 230" stroke="gray" stroke-width="3" fill="none"/>
</svg>

A (Arcs)

A rx ry x-axis-rotation large-arc-flag sweep-flag-point x y

Basic Examples

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>


Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment







© 2021, kalkicode.com, All rights reserved