Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

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

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:




My Personal Notes arrow_drop_up

Start Your Coding Journey Now!