Open In App

How to Resize a SVG image ?

Last Updated : 02 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads