SVG <image>
SVG Image - <image>
The <image> element is used to insert an
image in SVG.
SVG software must support JPEG, PNG, and other SVG files.
The <image> element has some basic attributes to position and shape the
image:
| Attribute | Description |
|---|---|
| width | Required. The width of the image |
| height | Required. The height of the image |
| href | Required. The URL of the image |
| x | The x-position for the top-left corner of the image |
| y | The y-position for the top-left corner of the image |
Insert an Image
Here we insert a .jpg image inside SVG:
Here is the SVG code:
Example
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<image height="200" width="300" href="pulpitrock.jpg" />
</svg>
Try it Yourself »
Code explanation:
- The
heightattribute defines the height of the image - The
widthattribute defines the width of the image - The
hrefattribute defines the URL of the image
Add Some Graphic
Here we show the image on top of a blue circle, and add a text under the image:
Here is the SVG code:
Example
<svg height="250" width="300" xmlns="http://www.w3.org/2000/svg">
<circle r="105" cx="150" cy="120" fill="lightblue" />
<image x="0"
y="60" width="300" height="100" href="pulpitrock.jpg" />
<text
x="84" y="180" fill="black">Pulpit Rock, Norway</text>
</svg>
Try it Yourself »
