Client-only render for SVGs do not render properly

[agliga]

Marko Version: 4.23.4

Details

So when doing a client side render for SVG tags using $!{svgString} it does not parse it as an SVG but rather as a simple HTML. This causes some bad markup since the tags are not closed properly and others get wrapped

Given this Symbol/SVG

<symbol id="icon-{{name}}" viewBox="0 0 16 16">
    <g transform="translate(5.5 4.5)">
        <circle cx="2.3" cy="6.1" r="1"/>
        <path d="M1.8 4.7c0-.6 0-1.1.3-1.4.4-.4.9-.5 1.1-.6.3-.2.6-.5.6-.8 0-.3-.2-.8-1.3-.8-1 0-1.4.6-1.4 1.2H.3c0-1.3.8-2 2.2-2C4.6.4 4.7 1.7 4.7 2c0 .4-.2.8-.7 1.1-.5.4-.9.4-1.1.7-.2.2-.2.5-.2 1h-.9z"/>
    </g>
</symbol>

The actual output is:

<symbol id="icon-{{name}}" viewBox="0 0 16 16">
    <g transform="translate(5.5 4.5)">
        <circle cx="2.3" cy="6.1" r="1">
        <path d="M1.8 4.7c0-.6 0-1.1.3-1.4.4-.4.9-.5 1.1-.6.3-.2.6-.5.6-.8 0-.3-.2-.8-1.3-.8-1 0-1.4.6-1.4 1.2H.3c0-1.3.8-2 2.2-2C4.6.4 4.7 1.7 4.7 2c0 .4-.2.8-.7 1.1-.5.4-.9.4-1.1.7-.2.2-.2.5-.2 1h-.9z"/>
        </circle>
    </g>
</symbol>

Possible Fix

We have a workaround by not rendering in marko but we used innerHTML in component-browser instead.

Your Environment

https://github.com/eBay/ebayui-core/
This is for icons since we initially rendered them as components but now have to string interpolate because they won't get cleaned up properly.