Skip to content
Related Articles

Related Articles

How to Resize a SVG image ?
  • Last Updated : 02 Mar, 2021

Resizing an SVG image cannot be done by simply using CSS height and width property to the img tag. To resize the SVG image, follow these steps:

Method1: The SVG image will be taking 100% of all the width and height available to it. To make the image of the desired size set the CSS height and width property of the image

Example 1:

CSS




<!DOCTYPE html> 
<html> 
<style>
   svg{
      height: 200px;
   }
  
</style>
  
<body> 
    <svg xmlns="http://www.w3.org/2000/svg">     
        <image href= 
        /> 
    </svg> 
</body> 
  
</html>

Output:



Method 2: Directly modify the .svg file and set the width and height to the desired value. Below is how the XML file will look, if an SVG image is present

<svg height="40px" width="60px" . . . . . . ></svg>

Example 2:

HTML




<!DOCTYPE html>
<html>
    <body>
        <h1>My first SVG</h1>
  
        <svg width="40" height="60">
            <rect width="40" 
                  height="60" 
                  style=
"fill: rgb(0, 0, 255); stroke-width: 10; stroke: rgb(0, 0, 0);" />
        </svg>
    </body>
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :