Resizing SVG in HTML?

Question

I have an SVG file inside HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.

I know with a JPEG or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.

However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.

Is there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

score 283 · Accepted Answer · answered Jun 25 '10 at 19:15

283

Open your .svg file with a text editor (it's just XML), and look for something like this at the top:

<svg ... width="50px" height="50px"...

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

answered Jun 25 '10 at 19:15

Amadan

191,408
23
240
301

106

Yes that's right, but you also need to add a 'viewBox' attribute (e.g viewBox="0 0 50 50" in your 50x50px example), otherwise the content might not scale properly (will depend on the container dimensions). Scour will do this for you automatically, http://www.codedread.com/scour/. – Erik Dahlström Jun 27 '10 at 12:54
Hooray! That helped! I already had things at 100% in the file, it turns out, but the view box was the key! Thank you both! – J.R. Jun 27 '10 at 15:28
33

In case it's not obvious to anyone else, 'viewBox' is case sensitive. Also, the first two coordinates are the upper-left corner if you're cropping the image, and the second two coordinates are the width and height *before* scaling. – Big McLargeHuge Oct 18 '13 at 03:42
3

Note that both
and will work. – widged Jan 14 '14 at 01:39
2

To complement the answers from @ErikDahlström and widged, you can go to the official site of [Developers Mozilla](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) and see the full documentation for viewBoxes. The 4 values are min-x, min-y, width and height, latter 2 can accept negative parameters. – Gabriel Sánchez Aug 25 '21 at 12:01

score 67 · Answer 2 · edited Aug 07 '12 at 18:43

Try these:

Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag
Then scale the picture simply by setting the height and width to the desired percent values. Good luck.
Set a fixed aspect ratio with preserveAspectRatio="X200Y200 meet (e.g. 200px), but it's not necessary

e.g.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

score 35 · Answer 3 · answered Aug 09 '12 at 05:47

35

you can resize it by displaying svg in image tag and size image tag i.e.

<img width="200px" src="lion.svg"></img>

answered Aug 09 '12 at 05:47

Tanveer

1,937
3
24
40

duhaime · Answer 4 · 2018-09-30T15:00:49.093

34

I have found it best to add viewBox and preserveAspectRatio attributes to my SVGs. The viewbox should describe the full width and height of the SVG in the form 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

edited Sep 30 '18 at 15:00

answered Sep 30 '18 at 14:54

duhaime

25,611
17
169
224

1

Doing this as well as adding `width="100%"` and `height="100%"` worked perfectly for me. – n8jadams Oct 30 '20 at 17:29

score 25 · Answer 5 · answered Apr 17 '19 at 08:05

25

Use the following code:

<g transform="scale(0.1)">
...
</g>

answered Apr 17 '19 at 08:05

Chris P

2,059
4
34
68

This doesn't work without additional considerations. The space for the image will be allocated to the page, however the image will appear as only 10% of the available space in the top left corner leaving the rest blank. This solution will only work with changes implemented in whatever displays the SVG image – Thundter Nov 29 '22 at 08:51

score 12 · Answer 6 · answered Apr 17 '15 at 20:23

12

Changing the width of the container also fixes it rather than changing the width and height of source file.

.SvgImage img{ width:80%; }

This fixes my issue of re sizing svg . you can give any % based on your requirement.

answered Apr 17 '15 at 20:23

neuro_tarun

1,372
1
10
8

score 5 · Answer 7 · edited Sep 19 '17 at 08:25

Here is an example of getting the bounds using svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

At the end you get numbers that you can plug into the svg to set the viewbox properly. Then use any css on the parent div and you're done.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

if only you could learn to wrap this into a method – mjs Apr 12 '23 at 19:10 — mjs, Apr 12 '23 at 19:10

score 2 · Answer 8 · answered Nov 06 '22 at 00:35

Remove height and width attributes in the svg element. Add a viewBox attribute, for example viewBox 0 0 100 100, then use plain old CSS height or width to scale the svg element.

NOTE: the viewBox attribute is case sensitive. If you use a lowercase b it will not work.

.fifty{
height: 50px
}
.hundred{
height: 100px
}

<h3>50x50</h3>
<section>
<svg class="fifty" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg>
</section>
<h3>100x100</h3>
<section>
<svg class="hundred" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg>
</section>

score -4 · Answer 9 · answered Sep 14 '18 at 04:17

I have an SVG file in HTML [....] IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

SVG graphics, like other creative works, are protected under copyright law in most countries. Depending on jurisdiction, license of the work or whether or not you are the copyright holder you may not be able to modify the SVG without violating copyright law, believe it or not.

But laws are tricky topics and sometimes you just want to get shit done. Therefore you may adjust the scale of the graphic without modifying the work itself using the img tag with width attribute within your HTML.

Using an external HTTP request to specify the size:

<img width="96" src="/path/to/image.svg">

Specifying size in markup using a Data URI:

<img width="96" src="data:image/svg+xml,...">

SVGs can be Optimized for Data URIs to create SVG Favicon images suitable for any size:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

Resizing SVG in HTML?

9 Answers9

Linked