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
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <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
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <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.