Timeline for How can I make an SVG scale with its parent container?
Current License: CC BY-SA 4.0
19 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jul 22 at 21:47 | comment | added | TrinitronX |
This answer is a bit misleading, no thanks to the misnomer width and height attributes on an svg element, and how these operate differently on SVG vs. raster images. The width and height specify the viewPort size, not the size of the svg itself. Think of this like a "portal" or "window" which you're looking through to view the SVG. If the "port" is smaller, it will cut off some of the SVG, just like looking through a small window at something larger outside. Meanwhile, the viewBox specifies the top-left and bottom-right corners of the SVG coordinate rendering box.
|
|
| Jun 2 at 5:46 | comment | added | Jamie_M_ | This is the most usable description of SVG sizing I have seen. I wish I had come across it months ago. | |
| May 7, 2023 at 5:00 | comment | added | Normajean |
For the sake of better compatibility, is there a way to do this without the <polygon> tag (or other comparable tags such as <path>)? I want to do something like this <svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none" url="/mySvg.svg"></svg> but it doesn't work.
|
|
| Feb 27, 2023 at 21:58 | comment | added | isherwood | @serge, SVG images are just text files containing markup. The solutions here would be applied to the image file as appropriate. | |
| Feb 27, 2023 at 21:51 | history | edited | isherwood | CC BY-SA 4.0 |
added 488 characters in body
|
| Feb 18, 2021 at 18:03 | comment | added | serge | don't understand this answer. The question is about an IMG tag with a SVG source, not an SVG inline picture. | |
| May 28, 2019 at 14:45 | history | rollback | Brian Campbell |
Rollback to Revision 9
|
|
| May 26, 2019 at 21:51 | history | edited | now | CC BY-SA 4.0 |
Replace the broken svg links with images hosted in a Firebase bucket
|
| May 3, 2018 at 15:16 | comment | added | Ryan Griggs | This works for me. I first create a viewBox attribute on the SVG element and set the value to "0 0 [original svg width] [original svg height]". Next I change the SVG element's width attribute to "auto" and height attribute to "100%". The container must also have a defined height. This scales the vector to 100% of the container height, allowing the width to float. Finally, set the SVG's CSS max-width to 100% to prevent overshooting the container. | |
| Feb 8, 2017 at 14:48 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/6.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/6.svg
|
|
| Feb 8, 2017 at 14:47 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/5.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/5.svg
|
|
| Feb 8, 2017 at 14:47 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/4.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/4.svg
|
|
| Feb 8, 2017 at 14:47 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/3.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/3.svg
|
|
| Feb 8, 2017 at 14:47 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/2.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/2.svg
|
|
| Feb 8, 2017 at 14:47 | history | edited | URL Rewriter Bot |
replaced http://ephemera.continuation.org/stackoverflow/svg-scale/1.svg with https://ephemera.continuation.org/stackoverflow/svg-scale/1.svg
|
|
| Feb 1, 2015 at 10:58 | history | edited | Dominique | CC BY-SA 3.0 |
fixed missing quotes for the stretch horizontally sample: preserveAspectRatio="none"
|
| Oct 21, 2013 at 3:58 | history | edited | Brian Campbell | CC BY-SA 3.0 |
Add images
|
| Oct 21, 2013 at 3:33 | vote | accept | bjb568 | ||
| Oct 21, 2013 at 2:28 | history | answered | Brian Campbell | CC BY-SA 3.0 |