How to resize a SVG image

How to resize a SVG image

There are two ways to resize a SVG image. Let’s take a look it one by one.

1. Change width and height in XML format

Open the SVG file with your text editor. It should show lines of code as below.

<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

As you can see, width and height are defined here. So you just have to change width and height to what you want.

It’s easy! Right?

In my case, this solution didn’t work out. I wanted to scale down the size of image but the SVG image that the designer sent to me was not changeable from the file somehow. So I had to look for other ways.

2 . Use “background-size”

Another solution is to use CSS. However, setting ```width``` and ```height``` don’t change the situation.

Instead, you have to use background-size. This property specifies the size of image.

For instance, you can write like this.

i {
  background-size: 20px 30px;
}

First value (20px) specify the height of image. Second value(30px) specify the width of image.

Whenever you make an website or application, most likely you will have to use SVG image anyway. Whenever you need to resize them, please try the above two ways!