Yesterday, I encountered an small issue. The issue was about resizing a SVG image.
?Resizing an image? sounds easy. But it was not easy it sounds actually. So I suppose it worth writing my finding about resizing SVG in a blog post.
What is SVG?
SVG stands for ?Scalable Vector Graphics?. According to MDN, the definition of SVG is as bellow.
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.
SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.
SVG is mostly common used for images and icons to develop applications. If you work with an Web designer, he or she will send you images with SVG format, not JPEG or PNG. So knowing how to deal with SVG is essential for FrontEnd developer.
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!
