Chapter 15: SVG image
SVG Image (the <image> tag) means embedding a raster picture (like JPG, PNG, or even another SVG file) inside your SVG document. It’s like putting a photo or logo inside your vector drawing so you can:
- Mix vector shapes (circles, paths) with real photos
- Apply SVG effects (filters, clips, masks, gradients, transforms) to the photo
- Position, scale, and rotate the photo as part of your SVG
- Keep everything vector-sharp around it, while the photo itself is raster (pixels)
Important: This is not the same as using <img src=”photo.jpg”> in HTML. Here, <image> lives inside <svg>…</svg> and becomes part of the SVG canvas.
1. Why Use <image> in SVG? (Real Reasons)
- Add a photo background then draw vector shapes/text on top
- Apply blur, shadow, or color filters to a photo using SVG only
- Rotate/clip a photo inside a circle (like profile pic mask)
- Mix vector icons with real product photos in ads/infographics
- Embed small icons/photos without extra HTTP requests (if base64, but usually external)
Note: Browsers must support JPEG/PNG/SVG inside <image>. Almost all do in 2026.
2. Basic Syntax of <image>
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<image href="..." <!-- REQUIRED – URL to the image file (or data URI) --> x="..." <!-- left position --> y="..." <!-- top position --> width="..." <!-- REQUIRED – display width --> height="..." <!-- REQUIRED – display height --> preserveAspectRatio="..." <!-- how to fit if sizes don't match --> /> |
- Self-closing tag (/>)
- Must be inside <svg>…</svg>
- href = modern way (was xlink:href in old code — use href now)
- width & heightrequired — no size = invisible!
- x/y default to 0 (top-left of SVG)
3. Your First SVG <image> Example (Copy-Paste Now!)
Save as svg-image.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Image Element Basics</title> </head> <body> <h1>Photo Inside SVG</h1> <svg width="400" height="300" viewBox="0 0 400 300" style="border:1px solid gray;"> <!-- Embed a photo (use any public PNG/JPG URL) --> <image href="https://mdn.github.io/shared-assets/images/diagrams/svg-tutorial/mdn_logo_only_color.png" x="50" y="50" width="300" height="200" /> </svg> </body> </html> |
What you see: The MDN logo photo appears inside the SVG canvas at position (50,50), sized 300×200.
Breakdown:
- href=”…” → points to external image (can be relative path too, like “myphoto.jpg”)
- x=”50″ y=”50″ → starts 50 units from left/top
- width/height → forces display size (can stretch if not matching original ratio)
Zoom browser — photo becomes pixelated when big (raster), but SVG container stays sharp!
4. All Important Attributes (Full Notes Style)
| Attribute | Meaning | Required? | Default | Example values | Notes |
|---|---|---|---|---|---|
| href (or xlink:href) | Source URL of image | Yes | — | “photo.png”, “https://…” | Modern: href; old: xlink:href |
| x | Horizontal position (left) | No | 0 | 20, 100, 10% | From SVG left |
| y | Vertical position (top) | No | 0 | 30, 80 | From SVG top |
| width | Display width | Yes | — | 200, 50%, 128px | Must have! |
| height | Display height | Yes | — | 150, 40% | Must have! |
| preserveAspectRatio | How to handle aspect ratio mismatch | No | xMidYMid meet | “none”, “xMinYMin slice” | Controls scaling/cropping |
| crossorigin | CORS for external images | No | anonymous | “anonymous”, “use-credentials” | For tainted canvas/security |
5. More Real & Fun Examples (Try These!)
Example 1: Photo with preserveAspectRatio (No Distortion)
|
0 1 2 3 4 5 6 7 8 9 10 |
<image href="https://example.com/myphoto.jpg" x="0" y="0" width="400" height="300" preserveAspectRatio="xMidYMid slice" /> |
→ Centers photo, crops edges if ratio doesn’t match (like background-cover in CSS)
Example 2: Rotate + Clip Photo (Circle Mask)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<svg width="200" height="200" viewBox="0 0 200 200"> <defs> <clipPath id="circleClip"> <circle cx="100" cy="100" r="90"/> </clipPath> </defs> <image href="https://mdn.github.io/shared-assets/images/diagrams/svg-tutorial/mdn_logo_only_color.png" x="10" y="10" width="180" height="180" clip-path="url(#circleClip)" /> </svg> |
→ Photo clipped to circle (great for avatars!)
Example 3: Apply Filter (Blur on Photo)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <image href="photo.jpg" x="0" y="0" width="400" height="300" filter="url(#blur)"/> |
→ Blurs the embedded photo
Example 4: Nested SVG (Another SVG as Image)
|
0 1 2 3 4 5 6 7 8 9 |
<image href="small-icon.svg" x="100" y="100" width="100" height="100" /> |
→ Embed vector SVG inside your main SVG (reusable icons!)
6. Teacher’s Tips (Hyderabad Student Style 😄)
- Use external URLs or relative paths — avoid big base64 unless small icon (makes file huge)
- preserveAspectRatio=”none” → stretch to fit (like object-fit: fill)
- Common mistake: Forget width/height → photo invisible!
- Performance: External images = extra HTTP request; inline SVG better for small ones
- Accessibility: Add <title> or <desc> inside <image> for screen readers
- Job/freelance: <image> great for product mockups, photo filters in ads, hybrid vector+raster designs
Got SVG <image> clear now? It’s how you bring real photos into the vector world! Want next: Base64 embedded image? More filter examples? Or <foreignObject> for HTML inside SVG? Just say — we’re almost done with core SVG elements! 🚀
