SVG element attributes get mangled after build

[ransagy]

In one of my components, I have a simple inline SVG with a path in it:

<svg class="notif-icon" viewBox="0 0 24 24" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
</svg>

Notice the casing on viewBox and preserveAspectRatio.
After building and running the page containing said component, The result looks like this:

<svg class="notif-icon" viewbox="0 0 24 24" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
</svg>

The CSS on that element, if that matters:

.notif-icon {
    fill: white;
    width: 36px;
    margin-left: 10px;
    cursor: pointer;
}

The casing on the attributes got flattened to lower-case in the process. At least in Firefox 61 and Chrome 68, This produces an invalid result. Applying any edit to the element in respective browser's devtools or simply correcting the casing produces the expected result.

[SQL-MisterMagoo]

I found this problem only occurred if I was binding properties in the SVG to variables in my code.
If I just have plain svg on the page, it does not mangle the attributes.

[mkArtakMSFT]

Closing as we will be tackling this as part of #18271