SVG Paths

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Introduction

Paths are the most flexible element of SVG. A path is a series of cubic or quadratic Bezier curves, arranged in connected splines. A path may be open or closed into a loop, or it may be complex with several sub-components. If a path is not simple, the fill rule is important in deciding which areas are inside or outside of the path.

Paths will normally be generated by automatic editors. Typically quadratic paths are used for fonts, and cubic paths for illustrations.

Parameters

Attributes / parametersDescription
dDefines a sequence of drawing commands that create the shape. e.g. d="M 50,60 L50,60". Uppercase drawing commands designate absolute coordinates. Lowercase drawing commands designate relative coordinates.
(...)Drawing Commands
m/MMove current drawing position to XY d="M XY"
l/LDraw a line to X,Y d="L XY"
v/VDraw a vertical line to Y d="V Y"
h/HDraw a horizontal line to X d="H X"
a/ADraw an arc to X,Y with an implied radius of Rx and Ry and a rotation specified by X-axis-rotation. The large arc and sweep flags select which of the 4 possible arcs that satisfy these constraints should be drawn. d="A Rx Ry X-axis-rotation(degrees) large-arc-flag (0/1) sweep-flag(0/1) X,Y".
q/QDraw quadratic bezier curve to X,Y using control point X1Y1 d="X1Y1 X Y"
t/TDraw a shorthand quadratic bezier curve (the control point is calculated as a reflection of the control point of the previous q/Q drawing command through the current drawing position)
c/CDraw a cubic bezier curve to X,Y using control points X1,Y1 and X2,Y2 d="C X1Y1, X2Y2, XY"
s/SDraw a shorthand cubic bezier curve (first control point is calculated as a reflection of the second control point of the previous c/C drawing command through the current drawing position).
- z/ZClose the path by drawing a line to start of path (or pathsegment if another z has been used previously)
(...)(end of list)
pathLength(Optional) Allows the author to specify a nominal pathLength which will be used for calibration in other calculations, for example for text along a path
Stroke Parameterscommon among to all shape and drawing elements
strokeColor of path
stroke-widthWidth of path

Remarks

Detailed information on the SVG path element can be found in the W3C Recommendation for SVG.



Got any SVG Question?