Learn how to embed scalable vector graphics directly in HTML using SVG elements, basic shapes, paths, and accessibility best practices.
SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike raster images (JPEG, PNG), SVGs are defined by mathematical shapes and scale to any size without losing quality.
You can include SVG in HTML two ways:
<img> src — simple but no interactivity or CSS styling.<svg> element is placed directly in your HTML, giving you full control via CSS and JavaScript.Inline SVG is the preferred approach when you need to style, animate, or interact with the graphic.
The <svg> element is the root container. Its most important attribute is viewBox:
<svg viewBox="0 0 100 100" width="200" height="200">
<!-- shapes go here -->
</svg>viewBox="minX minY width height" — Defines the coordinate system. 0 0 100 100 means the drawing area goes from (0,0) to (100,100).width / height — The rendered size in the HTML page. The SVG will scale to fit while preserving the aspect ratio defined by viewBox.Think of viewBox as the "camera" — it defines what portion of the SVG canvas is visible.
SVG provides several built-in shape elements:
| Element | Description | Key Attributes |
|---|---|---|
<rect> | Rectangle | x, y, width, height, rx (rounded corners) |
<circle> | Circle | cx, cy, r |
<ellipse> | Ellipse | cx, cy, rx, ry |
<line> | Line | x1, y1, x2, y2 |
<polyline> | Connected lines | points |
<polygon> | Closed shape | points |
<path> | Complex shape | d (path data) |
All shapes can be styled with fill (interior colour), stroke (border colour), and stroke-width.
The <path> element is the most powerful — it can describe any shape using a mini-language of commands in the d attribute (M = move, L = line, C = curve, Z = close).
<svg viewBox="0 0 200 200" width="200" height="200"
role="img" aria-label="Geometric shapes demo">
<title>Geometric shapes</title>
<!-- Rectangle with rounded corners -->
<rect x="10" y="10" width="80" height="60"
rx="8" fill="#4a90d9" stroke="#fff" stroke-width="2"/>
<!-- Circle -->
<circle cx="150" cy="40" r="30"
fill="#e74c3c" stroke="#fff" stroke-width="2"/>
<!-- Triangle using polygon -->
<polygon points="50,120 10,180 90,180"
fill="#2ecc71" stroke="#fff" stroke-width="2"/>
<!-- Line -->
<line x1="110" y1="120" x2="190" y2="120"
stroke="#f1c40f" stroke-width="3"/>
<!-- Path: a simple star point -->
<path d="M150,140 L160,170 L190,170 L165,185 L175,210 L150,195 L125,210 L135,185 L110,170 L140,170 Z"
fill="#9b59b6" stroke="#fff" stroke-width="1"/>
</svg>The <text> element renders text within the SVG canvas:
<text x="50" y="50" font-size="16" fill="white">Hello SVG</text>Make SVG accessible with:
role="img" on the <svg> element.aria-label — a short description, or<title> as the first child of <svg> — the accessible name.<desc> — a longer description for complex graphics.For decorative SVGs, use aria-hidden="true" to hide them from screen readers.
What does the viewBox attribute on an SVG element define?