image

O elemento SVG <image> carrega imagens dentro de documentos SVG. Ele pode exibir arquivos raster image (en-US) ou outros arquivos SVG.

The only image formats SVG software must support are JPEG, PNG (en-US), and other SVG files. Animated GIF (en-US) behavior is undefined.

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

Nota: The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG (en-US).

Usage context

CategoriasElemento gráfico, Elemento gráfico referenciado
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação
Elementos descritivos

Attributes

Global attributes

Specific attributes

  • x (en-US): Positions the image horizontally from the origin.
  • y (en-US): Positions the image vertically from the origin.
  • width: The width the image renders at. Unlike HTML's <img>, this attribute is required.
  • height (en-US): The height the image renders at. Unlike HTML's <img>, this attribute is required.
  • href (en-US) and xlink:href (en-US): Points at a URL for the image file.
  • preserveAspectRatio: Controls how the image is scaled.

DOM Interface

<image> implements the SVGImageElement (en-US) interface.

Example

Basic rendering of a PNG image in SVG:

SVG

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

Result

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<image>' in that specification.		 Candidata a Recomendação Allows omitting height and width
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<image>' in that specification.		 Recomendação Initial definition

Compatibilidade com navegadores

BCD tables only load in the browser