Resizing SVG In Html? - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Explore Teams Create a free Team
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Resizing SVG in HTML? Ask Question Asked 14 years ago Modified 11 months ago Viewed 521k times 254

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?

• html
• svg

Share Improve this question Follow edited Aug 9, 2023 at 21:54 Matthias Braun 33.5k2626 gold badges149149 silver badges175175 bronze badges asked Jun 25, 2010 at 19:05 J.R.J.R. 5,9591111 gold badges5656 silver badges7878 bronze badges Add a comment |

8 Answers 8

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 301

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.

Share Improve this answer Follow answered Jun 25, 2010 at 19:15 AmadanAmadan 196k2323 gold badges247247 silver badges312312 bronze badges 5

• 110 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, codedread.com/scour. – Erik Dahlström Commented Jun 27, 2010 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. Commented Jun 27, 2010 at 15:28
• 34 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 Commented Oct 18, 2013 at 3:42
• 4 Note that both <div style="width: 50px;height: 50px"><svg viewBox="0 0 1000 1000">...</svg></div> and <svg viewBox="0 0 1000 1000" style="width: 50px; height: 50px" >...</svg> will work. – widged Commented Jan 14, 2014 at 1:39
• 2 To complement the answers from @ErikDahlström and widged, you can go to the official site of Developers Mozilla 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 Commented Aug 25, 2021 at 12:01

Add a comment | 71

Try these:

1. Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag

2. Then scale the picture simply by setting the height and width to the desired percent values. Good luck.

3. 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"> Share Improve this answer Follow edited Aug 7, 2012 at 18:43 CommunityBot 111 silver badge answered Sep 16, 2011 at 19:33 Lorenz Lo SauerLorenz Lo Sauer 24.3k1616 gold badges8686 silver badges8787 bronze badges 0 Add a comment | 40

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

<img width="200px" src="lion.svg"></img> Share Improve this answer Follow answered Aug 9, 2012 at 5:47 TanveerTanveer 1,98733 gold badges2424 silver badges4141 bronze badges 2

• 1 To me this is the best answer as it does not require editing the svg file. – Olivier Sohn Commented Nov 5, 2023 at 2:25
• 2 This won't work if you're going for a responsive layout – reformed Commented Jan 8 at 16:38

Add a comment | 38

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> Share Improve this answer Follow edited Sep 30, 2018 at 15:00 answered Sep 30, 2018 at 14:54 duhaimeduhaime 27k1919 gold badges186186 silver badges238238 bronze badges 1

• 2 Doing this as well as adding width="100%" and height="100%" worked perfectly for me. – n8jadams Commented Oct 30, 2020 at 17:29

Add a comment | 26

Use the following code:

<g transform="scale(0.1)"> ... </g> Share Improve this answer Follow answered Apr 17, 2019 at 8:05 Chris PChris P 2,30955 gold badges3636 silver badges7878 bronze badges 1

• 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 Commented Nov 29, 2022 at 8:51

Add a comment | 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.

Share Improve this answer Follow answered Apr 17, 2015 at 20:23 neuro_tarunneuro_tarun 1,43211 gold badge1111 silver badges88 bronze badges 0 Add a comment | 5

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); Share Improve this answer Follow edited Sep 19, 2017 at 8:25 waldyrious 3,78644 gold badges3636 silver badges4242 bronze badges answered Jul 7, 2017 at 1:03 Lawrence WhitesideLawrence Whiteside 2,61411 gold badge1717 silver badges88 bronze badges 1

• if only you could learn to wrap this into a method – mjs Commented Apr 12, 2023 at 19:10

Add a comment | 3

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>

Share Improve this answer Follow answered Nov 6, 2022 at 0:35 Ronnie RoystonRonnie Royston 18k77 gold badges8484 silver badges9696 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• svg

or ask your own question.

• Featured on Meta
• We spent a sprint addressing your requests — here’s how it went
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Linked

14 SVG Dynamic resizing 3 How to resize an svg? 0 Resize an SVG to 100% of its parent width and keep its aspect ratio 0 how to increase the size of an SVG file with HTML 0 Resizing SVG in HTML 2 resize an SVG background image proportionally

Related

11 How can I resize an SVG? 3 How can I resize svg using CSS? 6 How to resize svg used in img tag in html? 3 How to resize an svg? 1 Resizing svg element 1 How to rescale a SVG image in a HTML page instead of resizing its visible part? 0 How to make SVG larger 5 How to change the size of an SVG via CSS 4 Resizing window with SVGs 0 Resizing SVG in HTML

Hot Network Questions

• Joint brokerage account legalities re: dividend, stock losses
• Everything has a tiny nuclear reactor in it. How much of a concern are illegal nuclear bombs?
• ForeignFunctionLoad / RawMemoryAllocate and c-struct that includes an array
• Best way for a Solar martial artist to block lethal damage barehanded?
• A manifold whose tangent space of a sum of line bundles and higher rank vector bundles
• Next date in the future that satisfies the following conditions
• Is "necesse est tibi esse placidus" valid classical Latin?
• 向こう as a pronoun ("he/she/they")?
• 'adb help' for 'root' says "restart adbd with root permissions", but 'adb root' says "adbd cannot run as root in production builds"
• Why not build smaller Ringworlds?
• Why do Electric Aircraft Seem to Eschew Photovoltaics?
• Using 50 Ω coax cable instead of passive probe
• If Biden steps back or is replaced, until when must he do it?
• When selling a machine with proprietary software that links against an LGPLv3 library, do I need to give the customer root access?
• The reading of the Ethiopian eunuch conversion story without Acts 8:37
• Would it be moral for Danish resitance in WW2 to kill collaborators?
• Challenge the appointment of the prime minister
• Is "sinnate" a word? What does it mean?
• Minimum number of select-all/copy/paste steps for a string containing n copies of the original
• Why was this a draw? What move I supposed to play to win?
• Any alternative to lockdown browser?
• Attaching foam to the bottom of a PCB
• Transhumans, posthumans, and AI attacked by baseline humans
• How do we define addition?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html