Home » Finance Homes Digest » How Do You Scale an Svg?

How Do You Scale an Svg?

Chloe Bennett • • 4 min read
How Do You Scale an Svg?
Contents

Just set the viewBox on your , and set one of height or width to auto . The browser will adjust it so that the overall aspect ratio matches the viewBox .

How do I scale an SVG image?

How to resize a SVG image

  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_xlink=” …
  2. 2 . Use “background-size” Another solution is to use CSS.

How do I fix SVG size?

2 Answers

  1. Give your SVG element a fixed height. If you do not do this the height of the element will change proportional to the width.
  2. Adjust your viewBox to crop to the height of your content.
  3. Fix your preserveAspectRatio value to have the proper case-sensitive value, e.g. xMinYMin (not xMinYmin ).

5.02.2015

Chloe Bennett
Author

Chloe Bennett

Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.