How To Resize A SVG Image - Medium
Có thể bạn quan tâm
Sign up
Sign in
WriteSign up
Sign in
![](https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png)
![Ayumi Saito](https://miro.medium.com/v2/resize:fill:88:88/1*HRVQUKFodfEdTip8Yw_3oA.png)
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 imageThere 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 Processing![Ayumi Saito](https://miro.medium.com/v2/resize:fill:144:144/1*HRVQUKFodfEdTip8Yw_3oA.png)
Written by Ayumi Saito
200 FollowersFrontend developer originally from Japan, currently based in Berlin, Germany. Lifelong traveller & learner.
FollowHelp
Status
About
Careers
Press
Blog
Privacy
Terms
Text to speech
Teams
Từ khóa » Html Scale Svg Element
-
How To Scale SVG | CSS-Tricks
-
Resizing SVG In Html? - Stack Overflow
-
Scale - SVG: Scalable Vector Graphics - MDN Web Docs
-
Basic Transformations - SVG: Scalable Vector Graphics | MDN
-
Intrinsic Sizing - SVG
-
How To Make An Svg Scale With Its Parent Container ? - GeeksforGeeks
-
How To Resize SVG In HTML - W3docs
-
Html Scale Svg Code Example - Code Grepper
-
Scale SVG Graphics With Only Css - Gists · GitHub
-
Resizing An SVG When The Window Is Resized In D3.js - Chartio
-
SVG Viewport And ViewBox (For Complete Beginners) - Web Design
-
Scaling SVG Elements - CodePen
-
HTML Svg ViewBox Attribute - Dofactory
-
Html – Scale An SVG Element Using A Transform Origin - ITecNote