SVG PATH EXAMPLES

SVG PATH EXAMPLES

Drag/Drop - The svg path points can be drag/dropped, dynamically changing the image. The resulting x,y values are automatically written to the form and import textarea.

Manual input - Existing point values can be changed directly on the point form. To view the result of those changes on the svg path, select 'show'.

Adding commands & points - New commands and points can be appended to the existing path. Select the Command or add-point + selection. Click on the image to locate the point(s). A new drag/drop icon will be located at the point. Click 'show' to view the results for the svg path, and attach the new icon to the svg path

Changing Commands - When a new command is selected at the location of an existing command, because the path is created sequentially, changing the existing command will remove all commands/values downstream of the change.

Deleting commands & points - commands and points can be deleted from the last point/command backward toward the first point. Select the X at command selections to delete it. Select 'show' to see the results. This will remove the command and its points drag/drop icons.

Creating a new svg path

Starting the svg path - Building a new svg path can begin after the input form and image have been 'cleared'. Select the desired command then click on the image to locate each of its points in sequence. A drag/drop icon will appear at that point. Values can also be changed manually in the form.

Previewing the svg path - Click 'show' at anytime after inserting the point(s) to preview the resulting path and attach the icons to the svg path. Then drag/drop the icon to modify their locations and morph the svg path. Add additional commands or points, clicking 'show' each time to preview the svg path.

Changing Commands - When a new command is selected at the location of an existing command, because the svg path is created sequentially, changing the existing command will remove all commands/values downstream of the change.

Adding commands & points - additional commands and points can be sequentially appended to the svg path. Select the Command or add-point + selection. Select 'show' after the point(s) have been located on the image.
SVG Path Examples- Path Commands Examples: Quick Reference
SVG Path Example: M Command;
M x y
move to:		 The starting point of a svg path. Multible M/m points will start new svg paths within the parent svg path.
SVG Path Example : L Command
L x y
line to:		 Draws a straight line from the svg path's previous point to the given point.
SVG Path Example :H Command
H x
horizontal line to:		 SVG Path Example :Draws a horizontal line from the svg path's previous point to the given x value
SVG Path Example :V Command
V y
vertical line to:		 Draws a vertical line from the svg path's previous point to the given y value
SVG Path Example : Q Command
Q x1 y1,x2 y2
curve between:		 Draws a curve starting at svg path's previous point. The first point determines the curve height/skew. The second point is the end of the curve.
SVG Path Example : T Command
T x y
curve at:		 Places a curve point at the given x y value. These points can be placed in sequence, or follow other commands to enhance their curve.
SVG Path Example : C Command
C x1 y1,x2 y2,x3 y3
curve between:		 Starts the curve at the svg path's previous point. The first and second points provide height/skew/peak. The third point is the end of the curve.
SVG Path Example : S Command
S x1 y1,x2 y2
smooth curve to:		 Starts the curve at the svg path's previous point. The first point provdes the height/skew. The second point is the end of the curve.
SVG Path Example : A Command
A x1 y1,<,f1,f2,x2 y2
elliptical arc at:		 The arc starts at the path's previous point. The first point determines width/height of the ellipse. The second point is the end of the arc. The angle value (<) controls clipping. Flag values(0/1) at f1, f2 choose arc segment and 'sweep' direction respectively.
SVG Path Example : Z Command
Z
close path:		 Draws a straight line from the svg path's previous point to the start point of the path.
+ Include non-command following point(s) to extend the curve. T will accept single points. Q & S require sets of 2 points, C requires sets of 3 points.
Q & T : Quadratic Curves A simpler curve with one control point. The curve 'peak' is smooth
C & S : Cubic Curves A curve with two(2) control points. Provides control for the shape of the 'peak' of the curve.
Wholly Relative(lower case) Paths
Each point is relative to its previous point, initialized from the starting M point. This creates a svg path independent of a local coordinate system. The svg path resides unto itself, with its M point as the translation target for placing it elsewhere. This allows the svg path to be ported to other applications.
Learn, Create, and Edit SVG Paths; with Example Templates
1  x: y:
angle:
2  x: y:
angle:
3  x: y:
angle:
4  x: y:
angle:
5  x: y:
angle:
6  x: y:
angle:
7  x: y:
angle:
8  x: y:
angle:
9   x: y:
angle:
10  x: y:
angle:
     
300x300:   600x600:   800x800:

fill-rule     evenodd:   nonzero:
Example Path
The above path has a initial S command with the required two(2) following points. An additional pair(4,5) are added to extend its curve. 		Examples
T,T
Q
C
S
A 0,0,0
A 0,0,1
A 0,1,1
A 45,1,1
S +,+
C +,+,+
T +,+,...
M...M...
Select an example or import a path. Drag/Drop the points to morph the path.
Include up to 10 sequential points

View and edit your paths. Place and/or edit your path points* in the  textarea   above. Then select 'import' to insert them into both the point form and the image.
Display the form commands and points in the image. Insert and modify command/point values in the form. Then select 'show' to display the result in the image.
This will clear both the point form and the image. A new path can then be created.
This recalculates the points, centering the path at the origin(0,0). Therefore translation can be used to locate it in other applications.

SVG Path - Quick Reference
M Command;
M x y
move to:		 The starting point of a path. Multible M/m points will start new paths within the parent path.
L Command
L x y
line to:		 Draws a straight line from the path's previous point to the given point.
H Command
H x
horizontal line to:		 Draws a horizontal line from the path's previous point to the given x value
V Command
V y
vertical line to:		 Draws a vertical line from the path's previous point to the given y value
Q Command
Q x1 y1,x2 y2
curve between:		 Draws a curve starting at path's previous point. The first point determines the curve height/skew. The second point is the end of the curve.
T Command
T x y
curve at:		 Places a curve point at the given x y value. These points can be placed in sequence, or follow other commands to enhance their curve.
C Command
C x1 y1,x2 y2,x3 y3
curve between:		 Starts the curve at the path's previous point. The first and second points provide height/skew/peak. The third point is the end of the curve.
S Command
S x1 y1,x2 y2
smooth curve to:		 Starts the curve at the path's previous point. The first point provdes the height/skew. The second point is the end of the curve.
A Command
A x1 y1,<,f1,f2,x2 y2
elliptical arc at:		 The arc starts at the path's previous point. The first point determines width/height of the ellipse. The second point is the end of the arc. The angle value (<) controls clipping. Flag values(0/1) at f1, f2 choose arc segment and 'sweep' direction respectively.
Z Command
Z
close path:		 Draws a straight line from the path's previous point to the start point of the path.
+ Include non-command following point(s) to extend the curve. T will accept single points. Q & S require sets of 2 points, C requires sets of 3 points.
Q & T : Quadratic Curves A simpler curve with one control point. The curve 'peak' is smooth
C & S : Cubic Curves A curve with two(2) control points. Provides control for the shape of the 'peak' of the curve.
Wholly Relative(lower case) Paths
Each point is relative to its previous point, initialized from the starting M point. This creates a path independent of a local coordinate system. The path resides unto itself, with its M point as the translation target for placing it elsewhere. This allows the path to be ported to other applications.

*NOTE on point format: This application automatically adjusts the format of points so they can be parsed. The adjusted format is: command x y,x y, ... ,Z. Spaces occur between the command and its first value plus between x y values. The comma delineates each point.

© Francis Hemsher /
Example: 2 T commands
The first T command, connected to M, controls the height and skew of the curve. The second T, controls width, plus anchors the path on the right.
Example: Q command
The Q point, connected to M, controls the height and skew of the curve. The second point controls width, plus anchors the path on the right. Similar to 2 T commands.
Example: C command
The C point, connected to M, controls the height and skew of the curve, along with point 3. The 4th point controls width, plus anchors the path on the right.
Example: S command
The S point, connected to M, controls the height and skew of the curve. The second point controls width, plus anchors the path on the right.
Example: A 0,0,0 command
Sliding the A point horizontally controls the height of the arc. The arc faces downward.
Example: A 0,0,1 command
Sliding the A point horizontally controls the height of the arc. The arc faces upward.
Example: A 0,1,1 command
Sliding the A point moving vertically controls the width of the arc. The arc faces upward.
Example: A 45,1,1 command
Sliding the A point moving vertically controls the width of the arc. The arc faces upward.
Example: S +,+ command
The above path has a initial S command with the required two(2) following points. An additional pair(4,5) are added to extend its curve.
Example: C +,+,+ command
C command with an added set of 3 points
Example: T +,+,... command
The T command creates a sinusoidial curve determined by the equal y value and equal x separation of its following points.
Example: M...,M... commands
Multiple M commands can create path segments within a 'parent' path.