SVG (Scalable Vector Graphics) is a format for drawing images with shapes and paths instead of a grid of pixels. On an HTML page, SVG stays sharp when you zoom or resize—ideal for icons, logos, and diagrams.
You do not need to master every SVG feature to use it. This tutorial focuses on how to put vector graphics into a webpage: with <img>, by pasting <svg> markup inline, with <iframe>, or as a CSS background.
Raster files (PNG, JPEG, GIF) store pixels—great for photos, but they look blocky when enlarged. Vector SVG stores instructions the browser redraws at any size, so edges stay clean.
Prefer SVG for UI icons, logos, charts, and simple illustrations. Prefer raster for photographs. Prefer canvas for pixel games and heavy JS drawing.
Scale an SVG logo in CSS or with width/height—it should stay crisp on retina screens.
This page teaches embedding SVG in HTML. For the <svg> element itself (viewBox, accessibility), see HTML svg Tag. For shape deep-dives, continue to SVG tutorials.
Hand-code simple circles and rects; export complex art from Inkscape, Illustrator, or Figma as .svg.
Four common patterns on an HTML page:
<img src="logo.svg" alt="Company logo" width="120" height="40"><svg width="200" height="200" role="img" aria-label="Blue circle">
<circle cx="100" cy="100" r="60" fill="#3b82f6"/>
</svg><iframe src="diagram.svg" title="Process diagram" width="400" height="300"></iframe>.hero {
background-image: url("pattern.svg");
background-size: cover;
}Choose an embed method by what the page needs:
| Method | Best for | CSS / JS from the page |
|---|---|---|
<img src="*.svg"> | Icons, logos, cached assets | Limited (treat as an image) |
Inline <svg>…</svg> | Hover styles, DOM, a11y inside graphic | Full (page CSS & script) |
<iframe src="*.svg"> | Standalone SVG documents | Limited / same-origin only |
CSS background-image | Decorative patterns | Background only (not content) |
| img + SVG file | Inline SVG | Canvas | |
|---|---|---|---|
| Scales sharply | Yes | Yes | No (bitmap) |
| Browser cache | Yes | No (in HTML) | N/A |
| Style with page CSS | Hard | Easy | Draw via JS |
| Typical use | Static icons | Interactive UI art | Games / pixels |
| Element | Draws |
|---|---|
<circle> | Circle (cx, cy, r) |
<rect> | Rectangle |
<path> | Custom curves and shapes |
<line> / <polygon> | Lines and multi-point shapes |
<text> | Text that stays selectable / accessible |
A practical workflow:
icon.svg and use <img> with meaningful alt.<svg>…</svg> markup into the HTML.width / height (or CSS size) so layout does not jump.alt on img, or title / aria-label on inline SVG).| Goal | HTML pattern |
|---|---|
| Show a logo file | <img src="logo.svg" alt="…"> |
| Hover-color icon | Inline <svg> + CSS :hover |
| Decorative pattern | CSS background-image: url(…svg) |
| Fallback for old browsers | <img src="icon.png" srcset="icon.svg"> |
Inline SVG scales cleanly. Drag the slider—shapes redraw sharply at every size.
Six hands-on patterns: basic circle, multiple shapes, attributes, CSS styling, animation, and a full page.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="60"
fill="#3b82f6" stroke="#1e3a8a" stroke-width="4"/>
</svg>cx, cy) and radius r.<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill="lightblue" stroke="black" stroke-width="2"/>
<circle cx="170" cy="60" r="40" fill="tomato" stroke="black" stroke-width="2"/>
</svg><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40"
fill="blue" stroke="black" stroke-width="3"/>
</svg><style>
.my-circle { fill: green; stroke: red; stroke-width: 2; }
.my-circle:hover { fill: lightgreen; }
</style>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>:hover.img for interactive icons.<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue">
<animate attributeName="cx" from="50" to="150"
dur="2s" repeatCount="indefinite"/>
</circle>
</svg>@keyframes on inline SVG.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Example</title>
<style>
.rect-style { fill: lightblue; stroke: black; stroke-width: 2; }
.circle-style { fill: tomato; stroke: black; stroke-width: 2; }
</style>
</head>
<body>
<h1>SVG Example</h1>
<svg width="220" height="200" xmlns="http://www.w3.org/2000/svg">
<title>Sample shapes</title>
<desc>A rectangle, circle, and green curve.</desc>
<rect x="10" y="10" width="100" height="100" class="rect-style"/>
<circle cx="170" cy="60" r="40" class="circle-style"/>
<path d="M10 170 Q 60 140, 110 170 T 210 170"
fill="none" stroke="green" stroke-width="4"/>
</svg>
</body>
</html>Most SVG-in-HTML issues are the wrong embed method or missing accessibility text.
External files in img are largely opaque to your stylesheet. Inline the SVG if you need hover colors.
Duplicating large markup bloats HTML and skips caching. Reuse a file with img when you do not need DOM access.
Logos and informative diagrams need text alternatives. Decorative SVGs can use aria-hidden="true".
Complex photos often make heavy SVG files. Prefer JPEG/PNG for photographs.
Usually worse than img or inline for icons. Prefer the simpler methods first.
Servers should serve SVG as image/svg+xml. Misconfiguration can prevent images from showing.
SVG in HTML via img and inline svg is Baseline and supported in all modern browsers. Prefer img or inline over iframe for most UI graphics.
Vector graphics embed cleanly with img, inline svg, and CSS backgrounds across current browsers.
Bottom line: Pick img for cached static icons, inline svg when you need CSS or DOM—and keep photos as raster.
One line: Put SVG on the page with img when you only need to show it, or inline <svg> when you need to style or script it.
Open a Try It demo and edit inline SVG shapes on a full HTML page.
8 people found this page helpful