Demon Tech Roadmap

HTML

HTML SVG

HTML SVG renders scalable vector graphics directly in the browser.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML embeds SVG code to draw graphics using math rather than pixels. These images scale infinitely without losing quality. Developers use SVG for crisp logos, icons, and simple illustrations.

Syntax

1<!-- svg syntax -->
2<svg width="100" height="100">
3  <circle cx="50" cy="50" r="40" />
4</svg>

Example

1<!-- this draws an SVG shape -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>SVG</title>
8  </head>
9  <body>
10    <svg width="100" height="100">
11      <rect width="100" height="100" fill="blue" />
12    </svg>
13  </body>
14</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

SVG uses math to draw crisp shapes.
Vectors never lose quality when zoomed.
The code lives directly inside the HTML file.
CSS and JavaScript can animate SVG parts.

Up Next

Continue your journey with the next topic.

Go to HTML Media ❯