👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-09

SVG CSS responsive-design HTML

I'm working on a project and hit a roadblock... I'm working on a responsive web application where I need to use SVG icons embedded in HTML. The icons are being displayed inside a flex container, but they don't seem to scale correctly when the container resizes. For example, when I set the width and height of the SVG directly in the markup, they remain fixed and do not adjust based on the container's dimensions. Here's a simplified version of my code: ```html <div class="icon-container" style="display: flex; width: 100%; max-width: 300px;"> <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> <circle cx="25" cy="25" r="20" fill="blue" /> </svg> </div> ``` In the above code, I expect the SVG to scale down when the container becomes smaller than 300px in width, but it stays at 50x50 pixels. I have tried using CSS to set the `width` and `height` of the SVG to `100%`, but that leads to distortion. The relevant CSS is as follows: ```css .icon-container { display: flex; } .icon-container svg { width: 100%; height: auto; } ``` I've also set the `viewBox` attribute on the SVG, but that hasn't resolved the issue either. My SVG looks like this: ```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="20" fill="blue" /> </svg> ``` In Chrome, Firefox, and Safari, the SVG is not resizing properly within the flex container. When I inspect the elements, I can see the width and height are still set to 50px despite my CSS adjustments. Am I missing something in my approach, or is there a better way to handle SVG scaling within a flex container? Any help would be appreciated! What am I doing wrong? My development environment is macOS. Has anyone else encountered this?