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.

Why is it remove viewBox attribute?

See original GitHub issue

I added inline svg file.

SVG source:

<svg width="33px" height="31px" viewBox="0 0 33 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Home</title>....

Add code

<img svg-inline class="icon" src="../assets/icons/home.svg" />

after render

<svg svg-inline="" role="presentation" focusable="false" width="33" height="31" xmlns="http://www.w3.org/2000/svg" class="icon">

I don’t resize SVG with CSS due to remove viewbox attribute

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
oliverfindlcommented, Feb 6, 2019

Hello,

I identified issue as svg attributes not being used in svg symbol itself, but in referencing svg. I will try fix it this weekend.

As workaround you can use loader without using svg-sprite directive. Anyway, its only useful, when you use same svg multiple times per component.

So far thanks for reporting. I will respond to this thread when fixed version is online at npm.

1reaction
oliverfindlcommented, Mar 1, 2019

Closing this issue.

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 >
simplify svg (remove viewBox attribute) to obtain pure svg path
Cropping svg adds viewBox attribute which isn't supported by the majority of js pdf library available. This means that position and scale factor ......
Read more >
Sara Soueidan on Twitter: "Pro Tip: _Always_ keep the ...
The `viewBox` attribute is one of SVG's the most powerful features. ... If you use SVGO to optimize your SVGs, disable the "remove...
Read more >
SVGO | Best of JS
removeViewBox, remove viewBox attribute when possible, enabled ; cleanupEnableBackground, remove or cleanup enable-background attribute when possible, enabled.
Read more >
SVG Viewport and viewBox (For Complete Beginners)
The viewport size is set by adding width and height attributes to the svg element, like so: HTML; CSS. Result; Skip Results Iframe....
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