I have some inline SVG code with a short logo animation in a Code Widget in a Column in a Row in a Container.
The SVG code starts with what I believe is a correct set up (I know the width and height should default to this):
<svg width=“100%” height=“100%” preserveAspectRatio=“xMidYMid meet” viewBox=“127 141 546.8 236” …
But there seems to be no stack up of height changes I can make to classes cause the SVG to be responsive to height changes.
But it is responsive to width changes, and it looks as though the column / row / container representation can be height responsive (the box is in will change). It is like the SVG cannot see this height.
Placing this same SVG in a simple manual html page is properly responsive to both width and height.
What do I have to do to get the SVG to see the height of the container it is in so it can respond to height changes way it does for width?
Thank you in advance for your help.
SVG is fun to get your head around. This is a good read.
Thank you Malachiman – that is a good document, and I had read it a few times over earlier when trying to work this out.
Fundamentally, I don’t think this is a problem with the SVG, but rather some kind of behavior with what blocs generates; it is as if the SVG does not know of the height to respond to. I say that for two reasons:
If I put the inline code just in the body tag of a simple had made page, it does as I expect, and it responds in both width and height and maintains its aspect ratio.
If I put a fixed height in the css in blocs for the enclosing Column, etc., then the height of the SVG follows the height of what it is contained within.
But if I put the height as a percentage, instead of a fixed value, this does not work. It does however work for the width.
I had read somewhere that perhaps everything up the chain to the page needed some kind of height specificity, and I thought I tried that without success, but I might have missed some level, or perhaps this has nothing to do with it.
Landscape view on some modern mobile browsers can be quite short relative to width, and it would be nice to be able to tell the element to adapt by both width and by height for this occasion to maintain its proportioned visibility.
So its not bad , It helps
All these are svgs
