How to resize SVG type image?

Resizing an image using width or height attribute or using CSS is quite simple and easy to do. But when the image type is SVG, it can be a bit hectic if we don’t know the proper way of doing it.

What is SVG?

SVG stands for “Scalable Vector Graphics”. According to MDN:

Scalable Vector Graphics (SVG) is an XML based markup language for describing two dimensional based vector graphics.

In modern web applications, we use SVG for images and icons to make it look good for any screen resolutions. It is really important to know how to deal with SVG.

How to resize a SVG image?

There are different ways to resize an SVG image. Let’s discuss the approaches of resizing SVG image in the following section:

Change width and height in SVG XML

We need to open the SVG XML in a file editor. Once it is opened, we will see the width and height attribute in it. We simply need to change the value of those attributes and it should work.

<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path fill="#575757" d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path></svg>

The above approach might not work if the SVG is not changeable.

By using background-size

As we know background-size is a CSS property, we can use this CSS property to resize SVG image. Following is an example of how to use backgound-size with a SVG image:

background-size: 50px 100px;

The first value 50px specify the height of the SVG image. The second value 100px specify the width of the SVG image.