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
Categorias | Elemento gráfico, Elemento gráfico referenciado |
---|---|
Conteúdo permitido | Qualquer 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)
andxlink: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
html
<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