Get viewBox for SVG tag
See original GitHub issueIt seems (and I might be wrong) that SVG requires either specific width
and height
or viewBox
and a single dimension to scale properly and preserve ratio.
Here’s a a demo with code that’s similar to what this loader generates: http://codepen.io/elado/pen/GZdJZG?editors=1100
If no dimension or viewBox supplied, SVG defaults to 300x150 which is a browser default.
In the demo, the ones without the viewBox
and only height
get the 300px width.
Even though viewBox
is defined on the <symbol>
, the <svg><use ...>
that will contain it won’t grab it.
Is there a way to somehow import the viewBox
to the SVG, or another workaround?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:11 (6 by maintainers)
Top Results From Across the Web
viewBox - SVG: Scalable Vector Graphics - MDN Web Docs
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
Read more >Obtaining an original SVG viewBox via javascript
Open your web browser console · Type the code: var svg = document.querySelector('svg'); var box = svg.getAttribute('viewBox'); box. · Observe the ...
Read more >SVG viewBox Attribute
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can...
Read more >SVG Viewport and viewBox (For Complete Beginners)
In this quick SVG viewport and viewBox tutorial, we're going to break down exactly what viewport and viewBox are in SVG for the...
Read more >Understand the SVG Viewbox
Bird Picture. With a viewBox correctly set on this image, it will scale to the dimensions of it's container and since it's an...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Published my workaround - https://github.com/elado/svg-viewbox-loader
If you have an es6 version, you can output the xlinkHref as default and the viewBox in a separate export. Automatic backwards compatibility.