SVG Custom Path

Hello There

Welcome to Svg custom path introduction and tutorial code.This tutorial only focus on Svg custom path,I will come with more svg tutorial code soon
if any one finds bug then please feel free to comment.
Leave a like to show some support to hardwork.

✖

1.SVG

SVG is a set of basic shape drawing elements like rect that are essentially forms for the path element. We will discuss these later. SVG is designed as a transmission format for schematic diagrams in the widest sense. Thus it should be applicable to simple graphs and flow diagrams but also be efficient for CAD diagrams, maps etc. This means that the main drawing elements must be efficient in quite a wide set of areas. Attention needs to be paid to efficient transmission of complex paths and demanding text.

2.Path

Syantax:

 
<svg width="400" height="250" > 
<path d="M 0 112
L 20 124 L 40 129 L 60 126 L 80 120 L 100 111 L 120 104 L 140 101 L 164 106 L 170 103 L 173 80 L 178 60 L 185 39
L 200 30 L 220 30 L 240 40 L 260 61 L 280 69 L 290 68 L 288 77 L 272 85 L 250 85 L 230 85 L 215 88 L 211 95
L 215 110 L 228 120 L 241 130 L 251 149 L 252 164 L 242 181 L 221 189 L 200 191 L 180 193 L 160 192 L 140 190 L 120 190
L 100 188 L 80 182 L 61 179 L 42 171 L 30 159 L 13 140 Z"/>
</svg>

The Path element defines a shape that can be open or closed. A pathconsists of a sequence of path segments and in many cases this is a single path segment in which case path and path segment are synonymous. Each path segment consists of a sequence of commands where the first defines a new current position and the remainder define a line or curve from the current position to some new position which becomes the current position for the next part of the curve and so on. The form of the path element is as follows:

<path d="M 0 0 L 100 100">

The d attribute defines the path. In the example above it defines a path that consists of establishing a current position at the origin (Move to 0,0) and the path goes from there to the point (100,100) as a straight Line. This would be the new current position if there were subsequent commands in the sequence. The following path is a triangle:

<path d="M 0 0 L 100 0 L50 100 Z">

Here the first line is horizontal from the origin to the point (100,0) and then a straight line goes to the point (50,100). The command Z closes the path with a straight line from (50,100) back to (0,0), the starting position for the path segment. A path with two path segments would have the form:

<path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z">

SVG is designed for a wide range of applications on the Web. The drawings may be complex and download times are important. In consequence, the conciseness of path expressions is of fundamental importance. It is for this reason that the path expressions themselves are not defined using a more verbose XML syntax. Every attempt is made to keep the number of characters in path expressions to the minimum. For this reason, paths are not restricted to polylines. Quadratic and cubic Bezier splines and elliptical arcs are also provided. White space has been used to separate the coordinates in the first path segment. Commas can also be used as is shown in the second path segment. For transmission efficiency, surplus separation can be removed. Some of the condensing rules are:

The coordinate follows the command letter with no intervening space
Negative coordinates have no separation from the previous coordinate
Numbers starting with a decimal point need no white space if it is unambiguous
If the next command is the same as the previous one, the command letter can be omitted

For example:

<path d="M0,0L.5.5.8.2Z">

This is equivalent to:

<path d="M 0, 0 L 0.5, 0.5 L 0.8, 0.2 Z">

Path Commands

Commands	Meanings	Parameters
M	Establish origin at point specified	Two parameters giving absolute (x,y)
L	Straight line path from current position to point specified	Two parameters giving absolute (x,y) position of the line end point which becomes the current position.
H	Horizontal line path from current position to point specified	Single parameter giving absolute X- coordinate of the line end point. The Y- coordinate is the same as that of the previous current position. The new point becomes the current position.
V	Vertical line path from current position to point specified	Single parameter giving absolute Y- coordinate of the line end point. The X- coordinate is the same as that of the previous current position. The new point becomes the current position.
Z	Straight line back to original Move origin	It has no parameters.

If the path being specified consists of many short paths, it may well be more efficient to define the path as relative positions from the previous current position. If the command uses a lower case letter, this indicates that the coordinates defined for this command are relative to the previous current position. Figure 5.2 shows some more complex examples.

The path depicted at the top of the diagram could have been written:

<path d="M 150, 50 L 200, 100 L 250, 100 L 250, 50 L 300, 50 L 300, 10 L350, 60">

Paths can also be defined as curves (quadratic and cubic bezier, and elliptical arcs) . Probably the most useful is the cubic bezier . This has the initial letter C and has three coordinates as its parameters. A curved path is defined from the current position (either established by a Move command or a previous line or curve command) to the third point defined in the cubic bezier. The first two points define the bezier control points that give the shape of the curve. The positioning of the control points change the shape of the curve under the user's control as can be seen in Figure 5.3. The coordinates used position the curves as they appear on the diagram.

A real world example is the creation of a duck as shown in Figure 5.4. In the top left the duck has been defined by a set of points and the path is a sequence of straight lines between those points (the points are marked by circles):

&#p060ath d="M 0 112
L 20 124 L 40 129 L 60 126 L 80 120 L 100 111 L 120 104 L 140 101 L 164 106 L 170 103 L 173 80 L 178 60 L 185 39
L 200 30 L 220 30 L 240 40 L 260 61 L 280 69 L 290 68 L 288 77 L 272 85 L 250 85 L 230 85 L 215 88 L 211 95
L 215 110 L 228 120 L 241 130 L 251 149 L 252 164 L 242 181 L 221 189 L 200 191 L 180 193 L 160 192 L 140 190 L 120 190
L 100 188 L 80 182 L 61 179 L 42 171 L 30 159 L 13 140 Z"/>

The duck without point markers is shown in the top right. In the bottom left the duck has been defined by a set of cubic bezier curves (the control points are end points are marked by circles and lines from the first point to the two control points and then the end point) and the duck without the markers is shown bottom right. The duck defined by bezier curves is:

<path d="M 0 312
C 40 360 120 280 160 306 C 160 306 165 310 170 303 C 180 200 220 220 260 261 C 260 261 280 273 290 268 C 288 280 272 285 250 285 C 195 283 210 310 230 320 C 260 340 265 385 200 391 C 150 395 30 395 0 312 Z"/>

SVG includes a number of semantic and syntactic measures to reduce the size of path expressions even further:

Using relative coordinates

Using relative instead of absolute coordinates can reduce the number of characters per coordinate significantly. Each command has a lower case equivalent which defines the coordinate values as relative to the current position.

Smooth curves

Often adjacent curves need to be joined smoothly, that is by sharing a tangential direction at the joint. This is achieved by defining the first control point of the second curve as the reflection of the second control point of the first curve. By defining separate commands for smooth joining curves (T and S for the quadratic and cubic splines) a number of coordinate pairs can be omitted.

Try running code yourself

svg custom path introduction + tutorial