Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Resize a SVG image ?

Improve Article
Save Article
  • Last Updated : 02 Mar, 2021
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!