SVG Element

SVG graphics start with <svg> element.

Attributes

width : Specifies the width of the graphics.
height : Specifies the height of the graphics.
background-color : Background color of the graphics.


	<svg width="200" height="200" style='background-color: pink;'>
	</svg>

Circle

Within a SVG you can draw a Circle using <circle> element.

Attributes

cx : X Coordinate which represents the center of the element. Default is 0 if not specified.
cy : Y Coordinate which represents the center of the element. Default is 0 if not specified.
r : Radius of the element.
stroke : Border Color of the element. Or, outline color of the element.
stroke-width : Thickness of the Border or outline of the element.
fill : Background-color is represented as fill.


	<svg width="200" height="200" style='background-color: pink;'>
		<circle cx="100" cy="100" r="70" stroke="white" stroke-width="5" ></circle>
	</svg>

Rectangle

You can draw a rectangle using the <rect> element.

width : Width of the rectange.
height : Height of the rectange.
fill : Background-color of the rectangle.
stroke : Outline color of the Rectangle.
stroke-width : Outline width of the Rectangle.
x : The x coordinate in which the rectange's left corner will be positioned.
y : The y coordinate in which the rectange's right corner will be positioned.
rx : The x radius of the Rectangle. At 50, it becomes circle. The value of the rx is also applied to ry by default unless you provide it specifically.
ry : The y radius of the Rectangle. At 50, it becomes circle.


	<svg width="200" height="200" style='background-color: grey;'>
		<rect width="150" height="100" x="25" y="50" rx="20" ry="20"></rect>
	</svg>

Ellipses

You can draw an Ellipse using <ellipse> element. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Attributes

cx : x Coordinate of the Ellipse which represents the center of the ellipse. Required attribute.
cy : y Coordinate of the Ellipse which represents the center of the ellipse. Required attribute.
rx : The x radius or the horizontal radius of the Ellipse. Required Attribute.
ry : The y radius or the vertical radius of the Ellipse. Required Attribute.
Other attributes are - fill, stroke, stroke-width


	<svg width="200" height="200" style='background-color: grey;'>
		<ellipse cx="100" cy="100" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
	</svg>

You can make an Ellipse a Circle if you provide all the same four value.

Line

You can draw a line using <line> Element.

Attributes

x1 : x Coordinate of starting point.
y1 : y Coordinate of starting point.
x2 : x Coordinate of end point.
y2 : y Coordinate of end point.
stroke : color of the line.
stroke-width : Thickness of the line.


	<svg width="200" height="200" style='background-color: grey;'>
		<line x1="10" y1="10" x2="100" y2="100" stroke="white" stroke-width="5">
	</svg>

Polygon

The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

Attributes

points : The points attribute defines the x and y coordinates for each corner of the polygon. First point is x1 and second point is y1, third point is x2 and fourth point is y2, fifth point is x3 and sixth point is y3 and so on.
Other Attributes are - fill, stroke, stroke-width.


	<svg width="200" height="200" style='background-color: grey;'>
		<polygon points='10, 10, 100, 100, 150, 70'>
	</svg>


	<svg height="210" width="500">
		<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
	</svg>


	<svg height="210" width="500">
		<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
	</svg>

Polyline

The <polyline> element is used to create any shape that consists of only straight lines (that is connected at several points):

Attributes

points : The points attribute defines the list of points (pairs of x and y coordinates) required to draw the polyline.
Other attributes are - fill, stroke, stroke-width


	<svg height="180" width="500">
		<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
	</svg>

Path

The <path> element is used to define a path.

The following commands are available for path data:

Attribute

Command

M : Move to.
L : Line to.
H : Horizontal Line to.
V : Vertical Line to.
C : Curve to.
S : Smooth Curve to.
Q : Quadratic Bézier curve
T : Smooth quadratic Bézier curveto
A : Elliptical Arc
Z : Close Path

All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

All drawing with the <path> element is specified inside the d attribute. The d attribute contains drawing commands. The commands are given to a "virtual pen". This pen can be moved, made to draw shapes etc.

The first drawing command inside the <path> d attribute should always be a move command. Before you can draw anything you should move the virtual pen to some location. This is done using the M command. Here is a simple example:


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M50,50" style="stroke:#660000; fill:none;"/>
	</svg>

This example moves the virtual pen to the point 50,50. The next drawing command will start from that point.

Drawing a Line

Drawing a line is probably the simplest command you can give the <path> element. Drawing lines is done using the L and l (lowercase L) commands. Here is an example:


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M50,50
			L100,100"
			style="stroke:#660000; fill:none;"/>
	</svg>

This example draws a line from the point 50,50 (the point of the M command) to the point 100,100 (the point of the L command). Here is the resulting output:

The difference between the L and l command is that the uppercase version (L) draws a line to the absolute point passed to the command, whereas the lowercase version (l) version draws a line to the relative point passed to the command. The relative point is the point of the virtual pen before the line starts plus the coordinates given to the l command.

If the virtual pen is located at 50,50 and you use an l100,100 command, the line will be drawn to 50+100,50+100 = 150,150. Using an L100,100 command would have drawn the line to 100,100 exactly, regardless of the location of the virtual pen.

Drawing an Arch

Path shapes are always drawn from the last virtual pen point to a new point. Each drawing command takes an end point. After executing that command, the virtual pen point will be located at the end point of that drawing command. The next drawing command will start from that point.

Drawing arcs using the <path> element is done using the A and a commands. Like with lines, the uppercase command (A) uses absolute coordinates for its endpoint, where the lowercase command (a) uses relative coordinates (relative to the start point). Here is an example:


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M50,50
			A30,50 0 0,1 100,100"
			style="stroke:#660000; fill:none;"/>
	</svg>

This example draws an arc from the point 50,50 to the point 100,100 (specified last in the A command).

The radius of the arc is set by the two first parameters set on the A command. The first parameter is rx (radius in x-direction) and the second is ry (radius in y-direction). Setting rx and ry to the same value will result in a circular arc. Setting rx and ry to different values will result in an elliptical arc. In the example above rx was set to 30 and ry to 50.

The third parameter set on the A command is the x-axis-rotation. This sets the rotation of the arc's x-axis compared to the normal x-axis. In the above example the x-axis-rotation is set to 0. Most of the time you will not need to change this parameter.

The fourth and fifth parameters are the large-arc-flag and sweep-flag parameters. The large-arc-flag determines whether to draw the smaller or bigger arc satisfying the start point, end point and rx and ry. Here is an example drawing 4 arcs each with different combinations of the large-arc-flag and sweep-flag:


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M40,20  A30,30 0 0,0 70,70"
		style="stroke: #cccc00; stroke-width:2; fill:none;"/>

		<path d="M40,20  A30,30 0 1,0 70,70"
		style="stroke: #ff0000; stroke-width:2; fill:none;"/>

		<path d="M40,20  A30,30 0 1,1 70,70"
		style="stroke: #00ff00; stroke-width:2; fill:none;"/>

		<path d="M40,20  A30,30 0 0,1 70,70"
		style="stroke: #0000ff; stroke-width:2; fill:none;"/>
	</svg>

Four different arcs can be drawn from 40,20 to the point 70,70. A long arc, a small arc, and two mirrored versions of each small/large arc. The large-arc-flag determines whether the large or small arc is to be drawn. The sweep-flag determines whether the arc is mirrored around the axis going form start point to end point. Actually, the sweep-flag controls the direction the arc is drawn (clock-wise or counter-clock-wise) which results in a "mirroring" effect.

The first arc drawn is the yellow arc. Having large-arc-flag set to 0 means that the smaller of the possible arcs will be drawn. The sweep-flag is also set to 0 meaning the arc is not mirrored. Here is the yellow arc:


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M40,20  A30,30 0 0,0 70,70"
		style="stroke: #cccc00; stroke-width:2; fill:none;"/>
	</svg>


	<svg width="200" height="200" style='background-color: grey;'>
		<path d="M40,20  A30,30 0 0,0 70,70"
		style="stroke: #cccc00; stroke-width:2; fill:none;"/>

		<path d="M40,20  A30,30 0 1,0 70,70"
		style="stroke: #ff0000; stroke-width:2; fill:none;"/>
	</svg>

The second arc drawn is the red arc. Having the large-arc-flag set to 1 means that the larger of the two possible arcs are drawn from 40,20 to 70,70. Here is the yellow and the red arc shown together to illustrate the difference:

The green and the blue arc (from the example earlier with all four arcs) are the same as the yellow and red arc, but drawn with the sweep-flag set to 1. This means that they will draw the same arcs but mirrored over the axis going from the starting point to the end point.

Quadratic Bezier Curves

It is also possible to draw quadratic Bezier curves using the <path> element. Drawing quadratic Bezier curves is done with the Q and q commands. Like with lines, the uppercase command (Q) uses absolute coordinates for its endpoint, where the lowercase command (q) uses relative coordinates (relative to the start point). Here is a simple quadratic curve example:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M50,50 Q50,100 100,100" style="stroke: #006666; fill:none;"/> 
	</svg>

The example draws a quadratic Bezier curve from 50,50 to the point 100,100 with a control point at 50,100. The control point is the first of the two parameters set on the Q command.

The control point pulls the curve like a magnet. The closer a point on the curve is to the control point, the more the control point pulls in it, meaning the closer to the control point it will be.

In fact, if you draw a line from the start point to the control point, and another line from the control point to the end point, then the line from the middle of the first line to the middle of the second line will be a tangent of the curve. Here is an example illustrating that:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M50,50 Q26,150 150,150" style="stroke: #006666; fill:none;"/> 
		<line x1="50" y1="50" x2="26" y2="150" stroke="black" stroke-width='1' />
		<line x1="26" y1="150" x2="150" y2="150" stroke="red" stroke-width='1' />
		<line x1="36" y1="100" x2="88" y2="150" stroke="green" stroke-width="1"></line>
	</svg>

Cubic Bezier Curves

Drawing cubic Bezier curves is done using the C and c commands. Cubic Bezier curves are like quadratic Bezier curves except they have two control points instead of one. Like with lines, the uppercase command (C) uses absolute coordinates for its endpoint, where the lowercase command (c) uses relative coordinates (relative to the start point). Here is an example:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M50,50 C75,80 125,20 150,50" style="stroke: #006666; fill:none;"/>
	</svg>

Closing the Path

The <path> element has a shortcut command for closing the path, meaning drawing a line from the last point back to the first point. The command is Z (or z - there is no difference between the uppercase and lowercase close path command). Here is an example:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M50,50 L100,50 L100,100 Z" style="stroke: #006666; fill:none;"/>
	</svg>

Combining Commands

You can combine the path commands inside the same <path> element. Here is an example:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M100,100
			L150,100
			a50,25 0 0,0 150,100
			q50,-50 70,-170
			Z"
			style="stroke: #006666; fill: none;"/>
	</svg>

Filling Path

You can fill paths using the fill CSS property. Here is an example:


	<svg width="200" height="200" style='background-color: whitesmoke;'>
		<path d="M100,100 L150,100 L150,150  Z"
			style="stroke: #0000cc;
			stroke-width: 2px;
			fill  : #ccccff;"/>
	</svg>