The <svg> Tag

The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg graphics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<svg width="330" height="170">
    <circle r="40" cx="50" cy="50" stroke="red" stroke-width="2" fill="lightblue"></circle>
    <circle r="40" cx="80" cy="80" stroke="green" stroke-width="2" fill="greenyellow"></circle>
    <circle r="40" cx="120" cy="120" stroke="orange" stroke-width="2" fill="yellow"></circle>
    <circle r="40" cx="200" cy="120" stroke="lightblue" stroke-width="2" fill="red"></circle>
    <circle r="40" cx="240" cy="80" stroke="green" stroke-width="2" fill="greenyellow"></circle>
    <circle r="40" cx="280" cy="50" stroke="blue" stroke-width="2" fill="orange"></circle>
</svg>
<br><hr><br>
<svg width="50" height="50">
    <rect width="50" height="50" style="fill: lime; stroke-width: 4; stroke: darkred"></rect>
</svg>
<br><hr><br>
<svg width="200" height="220">
    <polygon points="200, 10 20, 190 160, 210" style="fill: greenyellow; stroke: red; stroke-width: 1"></polygon>
</svg>
<br><hr><br>
<svg width="300" height="100">
    <!-- 15 is the rotation, 0 is the y offset, 50 is the x offset -->
    <text x="20" y="30" fill="blue" transform="rotate(15, 0, 50)">
        Welcome to the HTML tutorial.
    </text>
</svg>
<br><hr><br>
</body>
</html>

RESULT