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