question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Get viewBox for SVG tag

See original GitHub issue

It 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:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
eladocommented, Aug 17, 2016
1reaction
wmertenscommented, Jun 23, 2016

If you have an es6 version, you can output the xlinkHref as default and the viewBox in a separate export. Automatic backwards compatibility.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found