Description
I have been breaking my head over trying to have height set at auto, and would like some help with this regards. This would usually be done by not specifying any height in a View, but for SVG component, this does not seem to work.
Below is what I have tried :
- No Height/Width props
<SvgWave fill={Colors.PRIMARY} />
Here, the SVG occupies the whole screen
- Set arbitrary height
<SvgWave fill={Colors.PRIMARY} height={200} />
Here, the SVG's height reduces to 200. Note that there is padding at the top too, and bottom contains same amount of padding.
The same thing when tried with something like height={null} does not show the SVG itself.
Desired Behaviour : set width to '100%' (doable), while the height is auto adjusted based on the SVG.
The SVG Component :
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1" d="M0,32L48,58.7C96,85,192,139,288,186.7C384,235,480,277,576,272C672,267,768,213,864,192C960,171,1056,181,1152,202.7C1248,224,1344,256,1392,272L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
I have tried doing this with both converting it into a component with SVGR Playground
<Svg viewBox="0 0 360 80" {...otherProps}>
<Path
fill={fill}
d="M0,32L48,58.7C96,85,192,139,288,186.7C384,235,480,277,576,272C672,267,768,213,864,192C960,171,1056,181,1152,202.7C1248,224,1344,256,1392,272L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
/>
</Svg>
AND also using the SVG directly by loading it using SvgXML as below:
<SvgXml xml={svg} {...otherProps} />
where svg contains the SVG's content.
With regards to the SVG, it does not contain any extra padding, and I don't think the SVG is the problem since it works just fine when height is set.
