Skip to content
Related Articles

Related Articles

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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Supported Browsers:

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :