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

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next