SVG <image> Image Element

The SVG <image> element is used to embed bitmap images within SVG images. This allows you to draw above or next to the bitmap image. SVG image format conversion software supports JPEG, PNG formats; in SVG, the image element can also embed any raster image. In raster images, you can use SVG filters, masks, rotations, clipping, and all other tools on the content.

SVG image example

This is an SVG image example:

　　　　<svg　width="500"　height="160">
　　　　　　　　<rect x="10" y="10" height="130" width="500" style="fill: #000000"></rect>
　　　　　　　　<image　x="20"　y="20" width="300"　height="80" xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg
　　　　　　　　<image　x="20"　y="20" xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line x1="25" y1="80" x2="350" y2="80"></line>
　　　　</svg>

Image effect after running:

First, draw a black rectangle. Next, my logo is drawn on the top of the black rectangle as an image. Finally, a white line is drawn on the top of both my image and the black rectangle.

The order in which SVG elements are listed in the file is the order in which they are drawn. The subsequent element is drawn on top of the previous element.

You can also use the <image> element to embed other SVG images. It does not have to be a bitmap image.

Rotation Image Example:

<svg　width="500"　height="160">
<image　x="90"　y="-65"　width="100"　height="146"　transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

Usage Explanation:

• width and height define the width and height of the image.

• xlink:href defines the link of the image.

The final running effect is as follows: