How to resize a SVG image

How to resize an SVG image

This is so easy task but at first, I was unknown about it. And I started searching on google How to resize an SVG image.
Resizing an image is easy, but when it comes to Resize SVG, for the first time it is a really thinkable task.

What is SVG?

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 the most commonly used for images and icons to develop applications. Because you can resize it to any dimension without losing image quality.. If you work with a 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 a FrontEnd developer.

Change width and height in XML format

Open the SVG file with your favorite text editor. It should show you XML content, on the top of XML content, you will see something like 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”>

If you don’t see the width and height attributes, don’t worry, you can add those there.

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

Cool & Easy Right!