How to Use SVG <image> Element  Embedding Raster Images in SVG
SVG <image> embeds PNG, JPG, or other raster images directly in SVG  combine vector and raster content in a single scalable file.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG <image> Element Basics
The SVG `<image>` element references an external image file or a data URI. Use `href` (modern) or `xlink:href` (legacy) to specify the image URL. Set `width`, `height`, `x`, and `y` to position and size it.
- <image href='photo.jpg' x='10' y='10' width='200' height='150'/>
- Use href (modern)  xlink:href is deprecated in SVG 2.0
- preserveAspectRatio controls how image fills the rect
Embedding Images as Data URIs in SVG
Embed images inline using a base64 data URI: `href='data:image/png;base64,...'`. This makes the SVG self-contained  no external file requests. Useful for portable SVG documents but increases file size significantly.
- href='data:image/png;base64,iVBOR...' for inline images
- Self-contained SVG  no separate image file needed
- Increases SVG file size  use for small embedded images
Frequently Asked Questions
Can SVG <image> element display WebP images?
Yes  modern browsers support WebP in SVG <image>. Use href='image.webp' for smaller file sizes than PNG while maintaining quality.
How does preserveAspectRatio work on SVG <image>?
preserveAspectRatio='xMidYMid meet' (default) scales the image to fit within the width/height box while maintaining aspect ratio. 'xMidYMid slice' crops to fill the box.
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