Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a XML-based markup language for describing two-dimensional graphics.

<path> Tag

The <path> tag is used to create a shape through describing the path elements of a shape.

Example of a Simple Self-Contained SVG Document

SVG Code Input:

<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='280' height='160' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='226' height='136' viewBox='-25, -25, 226, 136' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <path stroke='black' stroke-width='1' stroke-dasharray='5 5' fill='transparent' d='M100 50 A50 50 0 0 0 150 100'/>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='195' y='17' font-size='20'>(200,0)</text>
<text x='5' y='155' font-size='20'>(0,110)</text>
<text x='195' y='155' font-size='20'>(200,110)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='225' cy='25' r='2' fill='black'/>
<circle cx='25' cy='135' r='2' fill='black'/>
<circle cx='225' cy='135' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output:

Example

Example of a Simple Self-Contained SVG Document:

d Property

The d Property is used to specify the shape of a <path> element.

'd'

to specify the shape of a <path> element.

Name:d Value:none | <string> Initial:none Applies to:‘path’ Inherited:no Percentages:N/A Media:visual Computed value:as specified Animatable:yes

d Value

The values of path command defined for d are MoveTo:M, m LineTo:L, l, H, h, V, v Cubic Bézier Curve:C, c, S, s Quadratic Bézier Curve:Q, q, T, t Elliptical Arc Curve:A, a ClosePath:Z, z

MoveTo Command

The moveto command is used to move to a new initial point as the new current point without creating any shape. CommandParametersDescription M(x y)+to move to the given corrdinates, (x, y) m(x y)+to move to a relative coordinates (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset.

LineTo Command

The lineto command is used to create a straight line from the current point to the specified end point. CommandParametersDescription L(x y)+to create a straight line from the current point (x₀, y₀) to the given corrdinates, (x, y) l(x y)+to create a straight line from the current point (x₀,y₀) to a relative coordinates (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset. Hx+to create a straight line horizontally from the current point (x₀, y₀) to the given corrdinate, x, that is to a new coordinates (x, y₀) hx+to create a straight line horizontally from the current point (x₀, y₀) to a new coordinates (x₀+x, y₀) by shifting according to the given corrdinate, x, as offset. Vy+to create a straight line vertically from the current point (x₀, y₀) to the given corrdinate, y, that is to a new coordinates (x₀, y) vy+to create a straight line vertically from the current point (x₀, y₀) to a new coordinates (x₀, y₀+y) by shifting according to the given corrdinate, y, as offset.

Cubic Bezier Curve Command

The standard cubic Bezier curve Command is used to create a cubic Bezier curve by specifying four points including the current point. The four points are first point, first control point, second control point, and the second point. CommandParametersDescription C(x1 y1 x2 y2 x y)+to create a cubic Bezier curve from the current point, (x₀, y₀), to the specified final point, (x, y), with the specified first control point, (x1, y1) at the beginning, and the specified second control point, (x2, y2), at the end. c(x1 y1 x2 y2 x y)+to create a cubic Bezier curve from the current point, (x₀, y₀), to a relative final point, (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset, with a relative first control point, (x₀+x1, y₀+y1), at the beginning, by shifting according to the given corrdinate, (x1, y1), as offset, and a relative second control point, (x₀+x2, y₀+y2), at the end, by shifting according to the given corrdinate, (x2, y2), as offset. The shorthand or smooth curveto command is used to create a smooth cubic Bezier curve by specifying three points including the current point. The three points are first point, second control point, and the second point. The first control point is assumed to be the reflection of the second control point on the previous cubic Bezier curve Command relative to the current point. If there is no previous command or if the previous command was not a cubic Bezier curve Command, the first control point is assumed to be coincident with the current point. CommandParametersDescription S(x2 y2 x y)+to create a smooth cubic Bezier curve from the current point, (x₀, y₀), to the specified final point, (x, y), with the specified second control point, (x2, y2), at the end. s(x2 y2 x y)+to create a smooth cubic Bezier curve from the current point, (x₀, y₀), to a relative final point, (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset, with a relative second control point, (x₀+x2, y₀+y2), at the end, by shifting according to the given corrdinate, (x2, y2), as offset.

Quadratic Bezier Curve Command

The standard quadratic Bezier curve Command is used to create a quadratic Bezier curve by specifying three points including the current point. The three points are first point, control point, and the second point. CommandParametersDescription Q(x1 y1 x y)+to create a quadratic Bezier curve from the current point, (x₀, y₀), to the specified final point, (x, y), with the specified control point, (x1, y1). q(x1 y1 x y)+to create a quadratic Bezier curve from the current point, (x₀, y₀), to a relative final point, (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset, with a relative control point, (x₀+x1, y₀+y1), by shifting according to the given corrdinate, (x1, y1), as offset. The shorthand or smooth quadratic Bezier curveto command is used to create a smooth quadratic Bezier curve by specifying two points including the current point. The two points are first point, and the second point. The control point is assumed to be the reflection of the second control point on the previous quadratic Bezier curve Command relative to the current point. If there is no previous command or if the previous command was not a quadratic Bezier curve Command, the control point is assumed to be coincident with the current point. CommandParametersDescription T(x y)+to create a smooth quadratic Bezier curve from the current point, (x₀, y₀), to the final specified point, (x, y). t(x y)+to create a smooth quadratic Bezier curve from the current point, (x₀, y₀), to a relative final point, (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset.

Elliptical Arc Curve Command

The elliptical arc curve command is used to create an elliptical arc from current point to a given point by specifying the two radii, x-axis-rotation, large-arc-flag, and sweep-flag. The x-axis-rotation is the angle of the elliptical arc curve rotated, in degrees and in clockwise direction. While the large-arc-flag and sweep-flag are used to define which possible arc paths are to be created. A large or longer arc is created with large-arc-flag equals to '1' or a small arc is created with large-arc-flag equals to '0'. An arc is created along a clockwise path with sweep-flag equals to '1' or along a counter-clockwise path with sweep-flag equals to '0'. CommandParametersDescription A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+to create an elliptical arc from current point, (x₀, y₀), to the specified final point, (x, y), with the specified parameters, radii, (rx, ry), x-axis-rotation, large-arc-flag, and sweep-flag. a(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+to create an elliptical arc from current point, (x₀, y₀), to a relative final point, (x₀+x, y₀+y) by shifting according to the given corrdinates, (x, y), as offset, with the specified parameters, radii, (rx, ry), x-axis-rotation, large-arc-flag, and sweep-flag.

ClosePath Command

The closepath command is used to end the current subpath by joining it back to its initial point through creating a straight line from the current position to the first point in the path. CommandParametersDescription Z, z to end the current subpath by joining it back to its initial point through automatically creating a connecting straight line from the current position to the first point in the path.