HTML `<svg>` Element Not Scaling Correctly with Viewport Size - Unexpected Gaps in Chrome
I've encountered a strange issue with I'm sure I'm missing something obvious here, but I'm trying to create a responsive layout using an `<svg>` element to render some icons. The scenario I'm working with is that when I adjust the viewport size, the `<svg>` does not scale proportionally and leaves unexpected gaps around it. I'm using Chrome version 117.0.5938.92, and I've set the width and height attributes in percentages, but it seems like the internal viewBox settings are not respected during resizing. Here's the code I'm currently using: ```html <div style="width: 100%; height: 100%;"> <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </div> ``` When I resize the browser window, the SVG does not fill the div completely, and I see white space on the sides. I've tried playing with the `preserveAspectRatio` attribute, but none of the values seem to fix the scenario. I've also verified that my parent div is indeed taking the full viewport height and width. Are there any specific attributes I might be missing, or is there a configuration that works better for responsive SVGs in Chrome? Any advice would be greatly appreciated! My development environment is Ubuntu. Thanks, I really appreciate it!