SVG Image

Learn how the <image> element embeds a raster picture -- a PNG, JPEG, GIF, or even another SVG -- as a positioned, sizeable object inside an SVG canvas.

The <image> Element

<image> works much like HTML's <img>: it takes a href (or the older xlink:href) pointing to an image file or a data URI, and x, y, width, and height to place and size it on the SVG canvas. Unlike a plain <img>, that placement can be layered with vector shapes, clipped, filtered, or animated using the rest of SVG's toolkit.

A Basic Embedded Image

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 150'>
  <rect width='200' height='150' fill='#e2e8f0'/>
  <image href='https://picsum.photos/id/1015/300/220' x='20' y='15' width='160' height='120'/>
</svg>

</body>
</html>

When an image's natural proportions don't match the width/height box you give it, preserveAspectRatio decides how it's fitted: the default, 'xMidYMid meet', scales the whole image down to fit inside the box without cropping, while a 'slice' value scales up to fill the box and crops the overflow -- the SVG equivalent of CSS's object-fit: cover.

meet vs slice Fitting

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 300 130'>
  <rect x='0' y='0' width='140' height='130' fill='#fafafa' stroke='#cbd5e1'/>
  <image href='https://picsum.photos/id/1025/400/300' x='0' y='0' width='140' height='130' preserveAspectRatio='xMidYMid meet'/>
  <rect x='160' y='0' width='140' height='130' fill='#fafafa' stroke='#cbd5e1'/>
  <image href='https://picsum.photos/id/1025/400/300' x='160' y='0' width='140' height='130' preserveAspectRatio='xMidYMid slice'/>
</svg>

</body>
</html>
Note: Pair 'slice' fitting with a clip-path on the surrounding shape if you need hard, predictable edges -- otherwise an oversized image can visually spill past its intended box in some renderers.

Clipping and Layering Images

Because an <image> is just another element in the SVG tree, it can be clipped to a non-rectangular shape with clip-path, masked for soft edges, or layered underneath and above vector shapes and text -- all things a plain HTML <img> cannot do on its own without extra CSS.

  • href holds the image URL or data URI (data:image/png;base64,...)
  • x / y / width / height position and size the image on the SVG canvas
  • preserveAspectRatio is 'xMidYMid meet' (fit, default) or '... slice' (fill/crop)
  • clip-path constrains the image to a custom shape, e.g. a circle
  • opacity fades the image, same as any other SVG element

Image Clipped to a Circle

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 160 160'>
  <defs>
    <clipPath id='circleClip'>
      <circle cx='80' cy='80' r='70'/>
    </clipPath>
  </defs>
  <image href='https://picsum.photos/id/1027/200/200' x='10' y='10' width='140' height='140' clip-path='url(#circleClip)' preserveAspectRatio='xMidYMid slice'/>
</svg>

</body>
</html>
Note: Cross-origin images embedded with <image> can taint the SVG for certain operations, like exporting it to a canvas, unless the server sends permissive CORS headers -- fine for plain display, but worth checking before you try to rasterize the result.
AttributePurpose
hrefSource URL or data URI for the raster (or nested SVG) image
x / y / width / heightPosition and box size on the SVG canvas
preserveAspectRatioHow the image fits its box: meet (contain) or slice (cover)
clip-pathRestricts the visible image to a custom vector shape
opacityOverall transparency of the embedded image

Exercise: SVG Image

Which element embeds an external image inside an SVG drawing?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVGFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to SVG and tweak your resume