"<image>"

Embeds an image into the SVG document.

• DOM object: SVGImageElement
• SVG2 spec: https://www.w3.org/TR/SVG2/embedded.html#ImageElement

The <image> element embeds an external raster image (PNG, JPEG, etc.) or another SVG file into the current document at a specified rectangle. You point it at a source file via the href attribute — this can be a normal URL, a relative path, or an inline data: URL containing base64-encoded pixel data — and set x, y, width, and height to place it on the canvas. When the image's intrinsic aspect ratio differs from the target rectangle, preserveAspectRatio controls how the image is scaled or letterboxed to fit.

Use <image> when you need to combine bitmap artwork (photos, pre-rendered icons, texture maps) with vector SVG content in a single document.

If width or height are omitted, the sizes will be inferred using the image's intrinsic size, using the CSS default sizing algorithm, https://www.w3.org/TR/css-images-3/#default-sizing.

To reference an external image, provide its name or URL. Note that Donner must have a valid ResourceLoader provided to parser::SVGParser::ParseSVG, such as SandboxedFileResourceLoader.

<image href="image.png" x="10" y="10" width="100" height="100" />

To reference an embedded image using a data URL:

<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEUAAAAisUztHCSo5h3/8gD/fgBNbfOxiPXkAAAAAXRSTlMAQObYZgAAAD9JREFUCNdjwASMDIxABGIICEIZQAFBARADDOEMZMCkxMrAwmAMZCmwBrgwM4AZLCzMbAlABlCKmSEBrgYPAACkeQLx8K5PDQAAAABJRU5ErkJggg==" />

Note

The image-rendering: pixelated style is used to render the image in a pixelated style in this example. This is not yet supported by Donner.

Todo

Add support for image-rendering property, https://drafts.csswg.org/css-images/#the-image-rendering

Attribute	Default	Description
href	(none)	URL or base64 data URL of the image.
preserveAspectRatio	xMidYMid meet	How to scale the image to fit the rectangle defined by width and height if the image's intrinsic size is different.
x	0	X coordinate of the image.
y	0	Y coordinate of the image.
width	auto	Width of the image. If omitted, this value will be inferred from the height attribute (if provided), or it will fall back to the image's intrinsic size.
height	auto	Height of the image. If omitted, this value will be inferred from the width attribute (if provided), or it will fall back to the image's intrinsic size.