How to insert an SVG in HTML (4 ways)
Web guide
There are several ways to show an SVG on a page. Each suits a different case. Here are the four most common.
1. Inline SVG (inside the HTML)
You paste the <svg>...</svg> code straight into the HTML.
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#6c8cff"/></svg>
Advantage: you control it with CSS and JS (change colors, animate). Ideal for icons and interactive graphics.
2. With the img tag
<img src="icon.svg" alt="Icon" width="64">
Advantage: simple, cacheable, reusable. Limit: you can't style its interior with your CSS.
3. With object
<object data="graphic.svg" type="image/svg+xml"></object>
Advantage: external file that keeps its own interactivity/scripts. Less used today.
4. As a CSS background
.box { background-image: url("background.svg"); }
Advantage: decorative, patterns, background icons. Limit: it's not content (worse for accessibility).
Which do I choose?
- Icon that changes color or animates -> inline.
- Simple reusable image -> img.
- Decoration / pattern -> CSS background.
Get the SVG code
In svgdesk, the code panel gives you the <svg> ready to paste inline, or export the file to use with img.