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

[sambegin]

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

and by forcing the width and height to 100%:

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

1. 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 />
2. Remove the width="100%" and height="100%"

Describe what you expected to happen:

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

[msand]

This should probably be fixed yeah, can add it to defaultProps of Svg

[zoontek]

This change breaks sizing the svg using StyleSheet.

For example:

Will render with a height & width set at 100%. Isn't it supposed to be 14 & 14? Or should we always use height and width props?

[msand]

@zoontek Can you try the latest commit from the develop branch?

[msand]

🎉 This issue has been resolved in version 12.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[zoontek]

@msand It still does not work correctly.

<Svg viewBox="0 0 200 200" style={{ backgroundColor: "red", aspectRatio: 1, width: "50%" }}>
  <G fill="#FFF">
    <Path d="M120.95 79.05V67.62h11.43v11.42h-11.43z" />
    {/* … */}
  </G>
</Svg>

Will result in:

The SVG is wider than 50%.

[zoontek]

Too bad this change was made, by default Image in React Native / React Native Web doesn't have any size too and we have too set a size to make them appear.

The real issue was with the SVGO config IMHO, removing consistency between <Svg> and <Image> seems a bit like a regression…

EDIT: I confirm, 12.0.1 does not solve it 😕

[msand]

Perhaps the default size should only be applied if both width and height are missing? Wasn't even aware of the single dimension + aspectRatio support. Thanks for bringing this up

[zoontek]

It would be easier to understand to keep default React Native behavior (no size).

SVGO has a removeDimensions option that can be disabled.

[msand]

Well, this is more about aligning with the svg spec, which does specify an initial value of auto, which in the context of an svg element is treated as 100%
https://svgwg.org/svg2-draft/geometry.html#Sizing

[msand]

And in the 1.1 spec: https://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute

width = ""
For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.

height = ""
For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded ‘svg’ elements, the height of the rectangular region into which the ‘svg’ element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.

[zoontek]

I understand, but Image is not totally aligned on img too. b2f7605 might be a good compromise.

[msand]

🎉 This issue has been resolved in version 12.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[zoontek]

@msand Version 12.0.2 works! Thanks