Flexbox is using original SVG width instead of scaled width

I am trying to make a section which has 2 flex div boxes where:

• Left one: Has the auto width of a img.
• Right one: Has the left width.

I have almost everything working, but I am stuck with this:

It seems to set the original width of the SVG file, not the "scaled" one. The SVG image is contained in an img tag and scaled with height: 100%; and width: auto;.

I have been searching for multiple solutions in internet but none of them worked.

Is there any way to solve it? (without JavaScript if possible)

index.htm

<div id="SideMessage">
    <div class="Decoration">
        <img src="./image.svg" alt="ERROR">
    </div>
    <div class="Message">
        <span>SAMPLE TEXT</span>
    </div>
</div>

style.css

div#SideMessage {
    /**/background: lightblue;
    display: flex;
    height: 64px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
        div#SideMessage > div.Decoration {
            /**/border: 1px dashed green;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
        div#SideMessage > div.Message {
            /**/border: 1px dashed red;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }
                div#SideMessage > div.Decoration > img {
                    height: 100%;
                    width: auto;
                }
                div#SideMessage > div.Message > span {
                    font-size: 20px;
                    letter-spacing: 2px;
                }

image.svg

<svg xmlns="http://www.w3.org/2000/svg" width="18.475px" height="32px" viewBox="0 0 18.475 32">
    <polygon fill="rgb(0, 0, 0)" points="0,0 18.475,0 0,32"/>
</svg>