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> <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:
Please Login to comment...