How to Embed SVG in HTML: Complete Guide
Four ways to add SVG to a web page — each with different trade-offs for styling, caching, and browser support.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: Inline SVG (Most Flexible)
Paste the SVG XML directly into your HTML. This gives you full CSS and JavaScript access to the SVG's internal elements — ideal for icons you want to style or animate.
- <svg viewBox='0 0 24 24'><path d='...' fill='currentColor'/></svg>
- Pros: full CSS control, no HTTP request, animatable with CSS/JS
- Cons: bloats HTML, not cacheable separately, can't reuse across pages
- Use for: icons, animated logos, interactive graphics
Method 2: <img> Tag (Simplest)
<img src='logo.svg' alt='Logo' width='200' height='100'>. Clean and simple. The SVG is cached separately. Works everywhere.
- Pros: cached, clean HTML, lazy loading supported
- Cons: CSS can't target internal SVG elements, JavaScript can't interact with paths
- Use for: static logos, illustrations, decorative images
- Add width and height to prevent layout shift (Core Web Vitals)
Method 3: CSS Background Image
background-image: url('icon.svg'). Purely decorative — not accessible to screen readers, can't be targeted by JS.
- Best for: decorative backgrounds, patterns, section dividers
- Supports: background-size, background-position, background-repeat
- SVG can include CSS via <style> tag for color customization
- Use data URIs for tiny SVGs to avoid extra HTTP requests
Method 4: <object> or <embed> Tags
<object type='image/svg+xml' data='animation.svg'></object>. Loads SVG in its own browsing context. Allows SVG-internal scripts to run. Rarely needed today — use inline SVG for scripting instead.
Which Method Should You Use?
For icons in a design system: inline SVG via a sprite sheet. For logos in a header: <img> with explicit dimensions. For backgrounds and patterns: CSS background-image. For animated SVGs that need JS control: inline SVG.
| Use Case | Recommended Method |
|---|---|
| Icon set | Inline SVG sprite + <use> |
| Logo | <img src='logo.svg'> |
| Animated graphic | Inline SVG |
| Background pattern | CSS background-image |
| Print-quality illustration | <img> or <object> |
Frequently Asked Questions
Which SVG embedding method is best for SEO?
All methods render SVG visually. For logo text or meaningful images, use alt text with <img> or aria-label with inline SVG. Search engines index text content within inline SVG.
Can I use SVG in an <iframe>?
Yes, but it's rarely useful. An <iframe> creates a completely separate browsing context. Use <object> or inline SVG instead for embedded vector graphics.
Why does my SVG look blurry in <img>?
Remove fixed width/height attributes from the <svg> element itself, keeping only viewBox. Set dimensions in HTML or CSS instead. The viewBox defines the coordinate system; dimensions control display size.
How do I make inline SVG change color on hover?
Set fill: currentColor on the SVG paths, then control color with CSS: .parent:hover { color: blue; }. The SVG inherits the text color of its parent.
Does embedding SVG affect page load speed?
Inline SVG adds bytes to HTML (not cached). External SVG via <img> is cached after first load. For frequently-used icons, an SVG sprite reduces total requests.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG