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 <img>, this attribute is required. Value type: <length> | <percentage>; Default value: auto; Animatable: yes
• {{SVGAttr("height")}} 
  • : The height the image renders at. Unlike HTML’s <img>, 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