ClickStart logoHTML5 to the point

Creating svg images

SVG is not part of the HTML5 recommendation, but it's a cool new technology that is becoming popular with HTML5. SVG stands for 'Scalable Vector Graphics.' SVG images are based on XML, and they offer the following advantages:

Element

What It Does

Attributes

circle

Creates a circle.

cx and cy - the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to 0, 0.
r - the radius of the circle
fill – the color to use to fill the circle

ellipse

Creates an ellipse
(i.e., an oval).

cx - the x coordinate of the ellipse's center
cy – the y coordinate of the ellipse's center
rx - the horizontal radius
ry - the vertical radius
fill – the fill color

line

Creates a line.

x1 - the start of the line on the x-axis
y1 - the start of the line on the y-axis
x2 - the end of the line on the x-axis
y2 - the end of the line on the y-axis

path

Creates a shape that consists of curved lines.

M - moveto
L - lineto
H - horizontal lineto
V - vertical lineto
C - curveto
S - smooth curveto
Q - quadratic Bézier curve
T - smooth quadratic Bézier curveto
A - elliptical Arc
Z - closepath

All of the commands above can be expressed with uppercase or lowercase letters. Uppercase means absolute positioning, and lowercase means relative positioning.

polygon

Creates a shape with at least three sides.

points - the x and y coordinates for each corner

polyline

Creates a shape that consists of straight lines.

points - the x and y coordinates for each corner

rect

Creates a rectangle.

height – the height of the rectangle
width – the width of the rectangle
x – the starting x coordinate for the left top corner
y – the starting y coordinate for the left top corner
rx - the horizontal corner curve radius
ry - the vertical corner curve radius

Screenshot

Code

circle
<svg><circle r="50" cx="50" cy="50" fill="green" stroke="#00cc00" /></svg>

ellipse
<svg><ellipse cx="40" cy="40" rx="30" ry="15" fill="#00ff00" stroke="#00ff00" /></svg>

line
<svg><line x1="0" y1="10" x2="0" y2="100" fill="#00ff00" stroke="#00ff00" /></svg>

path
<svg><path d="M80,20 A20,50 0 1,0 150,20" stroke="#00ff00" fill="none" /></svg>

polygon
<svg><polygon points="25,0 65,0 90,20 90,65 65,90 25,90 0,65 0,25" stroke="#00ff00" fill="#00ff00" /></svg>

polyline
<svg><polyline points="0,0 30,0 15,30" fill="#00ff00" stroke="#00ff00" /></svg>

rectangle
<svg><rect x="0" y="0" height="50" width="50" rx="15" ry="15" fill="#00ff00" stroke="#00ff00" /></svg>

Example

circle

ellipse

line

path

polygon

polyline

rectangle