SVG path
SVG path - <path>
<Path> element is used to define a path.
The following command can be used to route data:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bezier curve
- T = smooth quadratic Bezier curveto
- A = elliptical Arc
- Z = closepath
Note: All the above commands allow lowercase letters. Capital represents absolute positioning, relative positioning indicates lowercase.
Example 1
The above example defines a path that starts at position 1500, reached position 75200, and then from there to 225 200 in 1500 and finally closed path.
Here is the SVG Code:
Examples
<Path d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
Example 2
Using Bezier curve smooth curve model that can be scaled indefinitely. Under normal circumstances, the user selects one or two end points and two control points. A control point of a Bezier curve that is called a quadratic Bezier curve and the two control points are called cubes.
The following example creates a quadratic Bezier curves, A and C are the starting and ending points, B is a control point:
Here is the SVG Code:
Examples
<Path id = "lineAB" d = "M 100 350 l 150 -300" stroke = "red"
stroke-width = "3" fill = "none" />
<Path id = "lineBC" d = "M 250 50 l 150 300" stroke = "red"
stroke-width = "3" fill = "none" />
<Path d = "M 175 200 l 150 0" stroke = "green" stroke-width = "3"
fill = "none" />
<Path d = "M 100 350 q 150 -300 300 0" stroke = "blue"
stroke-width = "5" fill = "none" />
<-! Mark relevant points ->
<G stroke = "black" stroke-width = "3" fill = "black">
<Circle id = "pointA" cx = "100" cy = "350" r = "3" />
<Circle id = "pointB" cx = "250" cy = "50" r = "3" />
<Circle id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<-! Label the points ->
<G font-size = "30" font = "sans-serif" fill = "black" stroke = "none"
text-anchor = "middle">
<Text x = "100" y = "350" dx = "- 30"> A </ text>
<Text x = "250" y = "50" dy = "- 10"> B </ text>
<Text x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
For Opera users: view SVG file (right-click on the preview source SVG graphics).
Complicated? Yes! ! Because when drawing the path complexity, it is strongly recommended to use SVG editor to create complex graphics.