Index

The <image> SVG element includes images inside SVG documents. It can display {{glossary("raster image")}} files or other SVG files.

The only image formats SVG software must support are {{glossary("JPEG")}}, {{glossary("PNG")}}, and other SVG files. Animated {{glossary("GIF")}} behavior is undefined.

SVG files displayed with <image> are treated as an image: external resources aren't loaded, {{cssxref(":visited")}} styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try {{SVGElement("use")}} with an external URL. To include SVG files and run scripts inside them, try {{HTMLElement("object")}} inside of {{SVGElement("foreignObject")}}.

[!NOTE] The HTML spec defines <image> as a synonym for {{HTMLElement("img")}} while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVGs.

Usage context

{{svginfo}}

Attributes

• {{SVGAttr("x")}}
  • : Positions the image horizontally from the origin. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
• {{SVGAttr("y")}}
  • : Positions the image vertically from the origin. Value type: <length> | <percentage>; Default value: 0; Animatable: yes
• {{SVGAttr("width")}}
  • : The width the image renders at. Unlike HTML's ``, this attribute is required. Value type: <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("height")}}
  • : The height the image renders at. Unlike HTML's ``, this attribute is required. Value type: <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("href")}}
  • : Points at a URL for the image file. Value type: <URL>; Default value: none; Animatable: no
• {{SVGAttr("preserveAspectRatio")}}
  • : Controls how the image is scaled. Value type: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Default value: xMidYMid meet; Animatable: yes
• {{SVGAttr("crossorigin")}}
  • : Defines the value of the credentials flag for CORS requests. Value type: [ anonymous | use-credentials ]?; Default value: None; Animatable: yes
• {{SVGAttr("decoding")}}
  • : Provides a hint to the browser as to whether it should perform image decoding synchronously or asynchronously. Value type: async | sync | auto; Default value: auto; Animatable: yes
• {{SVGAttr("fetchpriority")}} {{experimental_inline}} {{non-standard_inline}}
  • : Provides a hint of the relative priority to use when fetching an external image. Allowed values:
    • high
      • : Fetches the external image at a high priority relative to other external resources.
    • low
      • : Fetches the external image at a low priority relative to other external resources.
    • auto
      • : Doesn't set a preference for the fetch priority. It is used if no value or an invalid value is set. This is the default.
• {{SVGAttr("xlink:href")}}{{deprecated_inline}}
  • : Points at a URL for the image file. Value type: <URL>; Default value: none; Animatable: no

DOM Interface

This element implements the {{domxref("SVGImageElement")}} interface.

Example

Basic rendering of a PNG image in SVG:

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

Result

{{EmbedLiveSample("Example", 250, 260)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{SVGAttr("fetchpriority")}} attribute