Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG <image> Tag

  • Last Updated : 15 Oct, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
            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=
            x="100" y="100" />
    </svg>
</body>
  
</html>

Output:

Supported Browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Internet Explorer
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!