How to Resize a SVG image ?

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>

Output:

Article Tags :

HTML

Web Technologies

HTML-SVG