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.

Is width="100%" height="100%" not considered as default attributes on <svg> ?

See original GitHub issue

Bug

We’re using this library along with react-native-transformer to load our .svg files directly as react components. We recently added a compression step with SVGO library to reduce our .svgs files. By default, this library removes default attributes. One of them is the width and height on the <svg> tag that has 100% (it looks like it should be 100% by default according to MDN. Unfortunately, by removing those two attributes, our svgs are not displayed anymore.

Is this something expected?

I don’t know if that can help but I also found out that the result svg in react native debugger was : Screen Shot 2020-01-23 at 5 43 38 PM

and by forcing the width and height to 100%: Screen Shot 2020-01-23 at 5 44 10 PM

our svgs were displayed again.

Environment info

React native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 428.48 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 26, 27, 28, 29
      Build Tools: 28.0.2, 28.0.3, 29.0.0, 29.0.2
      System Images: android-26 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild

Library version: 11.0.1

Steps To Reproduce

Import an Svg file with that has the width and height attribute on the svg tag with 100% value import MySVG from '../../mySVGFile.svg' and use it as is in any component : <MySVG />
Remove the width="100%" and height="100%"

Describe what you expected to happen:

I would expect the svg to be still displayed as per the default spec of svgs

Issue Analytics

State:
Created 4 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

1reaction

zoontekcommented, Mar 5, 2020

@msand Version 12.0.2 works! Thanks

0reactions

msandcommented, Mar 5, 2020

🎉 This issue has been resolved in version 12.0.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

Top Results From Across the Web

how to make <svg> 100% width - Stack Overflow

The viewBox defines the co-ordinates you can see. Height and width define the size of the SVG. E.g.. html, body { width: 100%;...

width - SVG: Scalable Vector Graphics - MDN Web Docs

The width attribute defines the horizontal length of an element in the user coordinate system.

Coordinate Systems, Transformations and Units — SVG 2

The bounds of the new SVG viewport are defined by the 'x', 'y', 'width' and 'height' attributes on the element establishing the new...

HTML SVG Graphics - W3Schools

The HTML <svg> element is a container for SVG graphics. ... <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

How to Scale SVG | CSS-Tricks

So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and...