HTML SVG

SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike Canvas, SVG elements are part of the DOM and can be styled with CSS and manipulated with JavaScript.

Why SVG?

Scales to any size without pixelation
Smaller file size for simple graphics
Animatable with CSS and JS
Accessible (text inside SVG is readable)

Common SVG Elements

<rect> — Rectangle
<circle> — Circle
<line> — Line
<text> — Text
<path> — Complex shapes

Example

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">

  <!-- Rectangle -->
  <rect x="10" y="10" width="120" height="60"
    fill="#6366f1" rx="8"/>

  <!-- Circle -->
  <circle cx="220" cy="75" r="50" fill="#10b981"/>

  <!-- Text -->
  <text x="30" y="45" fill="white" font-size="16"
    font-family="Arial">SVG!</text>

</svg>

HTML

Full Editor

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned