SVG set Height to auto

[kaushik-prasanna]

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.

[kaushik-prasanna]

@msand , could I bother you to take a glance at this? Should be a common enough occurance. Maybe I am missing something.

[FabioReact]

I ran into the same issue. I don't have a proper fix to it, but you can achieve what you want with a simple calculation:

1. Get the with of the device: docs
2. Get the ratio of your svg (eg. if the dimension is 300 x 100, the ration would be: const ratio = 100/300)
3. Set Svg height as the result of the screen width multiplied by the ratio (height: screenWidth * ratio)
   If it's not pixel perfect, play with a bit of relative positioning.

Hope this helps until a proper fix is introduced.

[kaushik-prasanna]

Thanks for confirming @FabioReact . This requirement is so basic that I thought that it should be implemented and I could not figure out how to do it...

[pke]

@FabioReact what if the image comes from a remote source and can have any widht/height ratio? I think the uri version of this libraries SVG can read the size from the XML stream.

[bohdanprog]

Hi,
I believe that PR will solve that problem.