I switched from img tag to svg tag to have more control on the SVG colors, But I couldn’t make my SVG scale with the header content, when i resize the window the elements inside the header scale but my SVG logo doesn’t.

HTML

 <div class="logo-container"> 
            <svg max-width="240" height="39" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="5.6-.063.61-1.032.454-2.205 0-3.056-.452-.85-1.136-1.543-2.131-1.702a2.494 2.494 0 0 " fill="#FF52C1"/><path d="M57.61 4.996c.016-.26.111-.494.287-.701a.875.875 0 0 1" fill="currentColor"/></g></svg>
            <button class="btn try">Try it Free</button>
        </div>

CSS

.logo-container svg {
    max-width: 12rem;
    height: 2rem;
}```

**for more details:**
- Github repo: https://github.com/MajdMohammed/Huddle-landing-page-with-alternating-feature-blocks

- Github deploy:  https://majdmohammed.github.io/Huddle-landing-page-with-alternating-feature-blocks/


 I tried to use max-width in the CSS like I used to do with the img, but it causes clipping  SVG logo. any tips please ?