They key to the solution provided in that link is viewBox. You need to set the viewBox based on the original documents coordinate system. I found this to be the solution for my usage as well.
The problem is, this requires you to manually code these values, and now your Javascript/Typescript is duplicating information that is in the source .SVG. Edit's the source .SVG may break it.
One possibility is to default viewBox to be '0 0 ${width} ${height}` where width and height come from the SVG file. A less appealing but related solution would be to also export some of the SVG data in a Metadata object:
{ height: 90, width: 90}
I am not an SVG expert, and maybe these properties are not always there and maybe there are some SVGs for which this is insufficient, but I think it would improve things by default for many users.
Googling around, there are numerous people that want the image to scale up to the full size of the parent view. One such example is this StackOverflow request: https://stackoverflow.com/questions/61657859/how-to-find-correct-values-for-width-height-and-viewbox-with-react-native-svg/61792447#61792447
They key to the solution provided in that link is viewBox. You need to set the viewBox based on the original documents coordinate system. I found this to be the solution for my usage as well.
The problem is, this requires you to manually code these values, and now your Javascript/Typescript is duplicating information that is in the source .SVG. Edit's the source .SVG may break it.
One possibility is to default viewBox to be '0 0 ${width} ${height}` where width and height come from the SVG file. A less appealing but related solution would be to also export some of the SVG data in a Metadata object:
{ height: 90, width: 90}I am not an SVG expert, and maybe these properties are not always there and maybe there are some SVGs for which this is insufficient, but I think it would improve things by default for many users.