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

Featured Videos















Core Software Performance Optimization Principles




Advertisements

High-Performance
Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next