Tech and Media Labs
This site uses cookies to improve the user experience.




SVG image element

Jakob Jenkov
Last update: 2015-01-20

The SVG <image> element is used to embed bitmap images inside your SVG image. This way you can draw ontop of, or next to, the bitmap image.

SVG image Video

Here is a ideo version of this SVG image tutorial:

SVG image Example

Here is an SVG image example:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect x="10" y="10" height="130" width="500" style="fill: #000000"/>

  <image x="20" y="20" width="300" height="80"
     xlink:href="http://jenkov.com/images/layout/top-bar-logo.png" />

  <line x1="25" y1="80" x2="350" y2="80"
            style="stroke: #ffffff; stroke-width: 3;"/>
</svg>

Here is the resulting image:

First a black rectangle is drawn. Second my logo as image is drawn ontop of the black rectangle. Finally, a white line is drawn ontop of both my image and the black rectangle.

The order the SVG elements are listed in the file, are the order in which they are drawn. Later elements are drawn ontop of earlier elements.

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

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC