SVG Path
SVG (Scalable Vector Graphics) Path is a way of defining 2D graphics in XML format for use in web applications. The "path" element in SVG can be used to define a variety of shapes such as lines, curves, arcs, and other geometric shapes.
The path element is defined using the "d" attribute, which contains a series of commands and parameters that define the path. These commands include:
- MoveTo (M): moves the starting point of the path to a new position
- LineTo (L): draws a straight line from the current position to a new position
- Horizontal LineTo (H): draws a horizontal line from the current position to a new position
- Vertical LineTo (V): draws a vertical line from the current position to a new position
- Cubic Bezier Curve (C): draws a cubic Bezier curve from the current position to a new position
- Smooth Cubic Bezier Curve (S): draws a cubic Bezier curve from the current position to a new position, with automatic control points
- Quadratic Bezier Curve (Q): draws a quadratic Bezier curve from the current position to a new position
- Smooth Quadratic Bezier Curve (T): draws a quadratic Bezier curve from the current position to a new position, with automatic control points
- Arc (A): draws an elliptical arc from the current position to a new position
Each command is followed by a set of parameters that define the shape and size of the path. The parameters depend on the type of command used.
SVG Path can be used to create complex shapes, such as logos, icons, and illustrations. It is also used in data visualization to create interactive charts and graphs.
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 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 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 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 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 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