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. |
ellipse |
Creates an ellipse |
cx - the x coordinate of the ellipse's center |
line |
Creates a line. |
x1 - the start of the line on the x-axis |
path |
Creates a shape that consists of curved lines. |
M - moveto 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 |
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>
circle
ellipse
line
path
polygon
polyline
rectangle