How to exactly fit an image in a roundedImage for .SVG image?

I’ve been trying to make this work for quite some time and have no clue whatsoever. I’m trying to make an image having a little gradient border, and fit in a rounded box.

<svg viewBox="0 0 2400 400" xmlns="http://www.w3.org/2000/svg" width="100%">
    <defs>
        <linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#5BCEFA; stop-opacity:1" />
            <stop offset="33%" style="stop-color:#FFFFFF; stop-opacity:1" />
            <stop offset="66%" style="stop-color:#F5A9B8; stop-opacity:1" />
            <stop offset="100%" style="stop-color:#5BCEFA; stop-opacity:1" />
        </linearGradient>
        <clipPath id="roundedImage">
            <rect x="12" y="10" width="2373" height="380" rx="15" ry="15" />
        </clipPath>
    </defs>
    <rect x="8" y="7" width="2381" height="387" rx="15" ry="15" fill="none" stroke="url(#borderGradient)" stroke-width="10"/>
    <image href="C:\Users\...\banner.png" x="12" y="10" width="2373" height="380" preserveAspectRatio="xMidYMid slice" clip-path="url(#roundedImage)" />
</svg>

This works well in my navigator, but when it comes to make an image object with that in my readme, I get a very very zoomed banner in my frame. Integrating using ;

<img src="./.../banner.svg" alt="banner" style="width: auto; height: auto;"/>

In navigator (good):

and in editor / on readme.md (bad):

Has anyone any clue why this happens ?

Tried to use preserveAspectRatio, but I’m not really sure this is the way to go.

You need to sign in to view this answers