SVG <image> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software must support are JPEG, PNG, and other SVG files.

Syntax:

<image attributes="values" >

Attribute:

x: x-axis coordinates positioning of the image.
y: y-axis coordinates positioning of the image.
width: Width of the image.
height: Height of the image.
href: The source of the image.
preserveAspectRatio: Scaling of the image.
Global Attributes: Some global attributes used like core attributes and styling attributes, etc.

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<body>
    <svg width="200" height="200"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            height="200" width="200"/>
    </svg>
</body>
 
</html>

Output:

Example 2: Changing the x and y coordinates of the image.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <svg width="400" height="400"
        xmlns="http://www.w3.org/2000/svg">       
        <image
            href=
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            x="100" y="100" />
    </svg>
</body>
 
</html>

Output:

Supported Browsers:

Chrome 1 and above
Edge 12 and above
Firefox 1.5 and above
Safari 3.1 and above
Internet Explorer 9 and above
Opera 8 and above

HTML

HTML

Contact Us