"<image>"

Embeds an image into the SVG document.

Embeds an image into the SVG document.

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

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.