SVG (Scalable Vector Graphics)
SVG defines vector-based graphics in XML, which can be embedded directly in HTML pages. SVG graphics are scalable, so they do not lose quality when zoomed or resized, and SVG is supported by all major browsers.
What is SVG?
Key points about SVG: it stands for Scalable Vector Graphics; it is used to define vector-based graphics for the web; it defines graphics in XML format; each element and attribute can be animated; it is a PromptCookbook recommendation; and it integrates with other standards like CSS, DOM, XSL, and JavaScript.
The <svg> Element
The <svg> element is a container for SVG graphics. SVG has methods for drawing paths, rectangles, circles, polygons, text, and much more.
SVG Circle
A circle with a stroke and fill.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svg Circle</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Rectangle
A rectangle with a stroke and fill.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svg Rectangle</title>
</head>
<body>
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
</body>
</html>
Rectangle with opacity and rounded corners
A rounded, semi-transparent rectangle.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svg Rounded</title>
</head>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
SVG Star
A five-point star drawn with a polygon.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svg Star</title>
</head>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Gradient ellipse and text
An ellipse filled with a gradient, with text on top.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Svg Gradient</title>
</head>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Differences Between SVG and Canvas
SVG is a language for describing 2D graphics in XML, while Canvas draws 2D graphics on the fly with JavaScript. Because SVG is XML based, every element is in the SVG DOM, so you can attach JavaScript event handlers to shapes. Each SVG shape is remembered as an object, so if its attributes change, the browser re-renders it automatically. Canvas, by contrast, is drawn pixel by pixel and forgets the graphic once drawn, so changing its position means redrawing the whole scene.
Comparison of SVG and Canvas
SVG is resolution independent, supports event handlers, has good text rendering, but can be slow with complex graphics and is not suited for games. Canvas is resolution dependent, has no event-handler support, has poor text rendering, lets you save the result as a .png or .jpg, and is well suited for graphic-intensive games.