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=  
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        />  
    </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> 