How To Resize A SVG Image - Medium

Open in app

Sign up

Sign in

Write

Sign up

Sign in

How to resize a SVG imageAyumi Saito

Ayumi Saito

Follow

2 min readDec 16, 2017

--

8

Listen

Share

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.

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!

SVGCSSWeb DevelopmentWeb DesignImage ProcessingAyumi SaitoFollow

Written by Ayumi Saito

200 Followers

Frontend developer originally from Japan, currently based in Berlin, Germany. Lifelong traveller & learner.

Follow

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams

Từ khóa » Html Scale Svg Element