Build breaks SVG files

[bgebelein]

When running npm run build in a project, some SVG files get broken. As far as i can see, this only seems to happen, when the SVG file contains an internal <style> tag.

SVG file content before build:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <style>
        path{
            animation-name: rotate;
            animation-duration: 40s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            transform-origin: center;
        }

        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }

            100%{
                transform: rotate(360deg);
            }
        }
    </style>
    <path stroke="none" stroke-width="0">
        <animate repeatCount="indefinite" attributeName="d" dur="20s" values="M405.6,122.6c43.3,43,75.6,96.9,74.3,149.4c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1
        c-55.7,4.2-115.7-3.2-156.9-36.9C52.4,393.4,29.6,333.4,32.2,276S63,164.3,104.4,121.3s95.8-74.6,150.2-74.1
        C308.8,47.5,362.6,79.6,405.6,122.6z;
        M406.2,121.3c43.3,43,75.6,96.9,74.3,149.4
        c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1c-55.7,4.2-115.7-3.2-156.9-36.9c-41.2-33.3-64-93.3-61.4-150.7
        S63.6,163,105,120s95.8-74.6,150.2-74.1C309.4,46.2,363.2,78.3,406.2,121.3z;
                M413.2,106.3c43.3,43,59.2,100.9,57.9,153.4c-1.1,52.6-31,123.2-74.3,156.9s-86.1,42.7-141.6,46.9
        c-55.7,4.2-123.6-19.3-164.8-53c-41.2-33.3-51.8-87.8-49.2-145.2s26.1-98.7,67.5-141.7S210.6,47.6,265,48.1
        C319.2,48.4,370.2,63.3,413.2,106.3z;
                M405.6,122.6c43.3,43,75.6,96.9,74.3,149.4c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1
        c-55.7,4.2-115.7-3.2-156.9-36.9C52.4,393.4,29.6,333.4,32.2,276S63,164.3,104.4,121.3s95.8-74.6,150.2-74.1
        C308.8,47.5,362.6,79.6,405.6,122.6z;
                " />
    </path>
</svg>

and after:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>@keyframes rotate{0%{transform:rotate(0deg)}}</style>
</svg>

[tigt]

Does it persist if you have some values in a d attribute on the <path> at all? SVGO may be removing that element mistakenly since it doesn’t have any geometry data and therefore doesn’t render — except that said data is inserted thanks to <animate>.

[bgebelein]

Adding values to the d attribute of the <path> element will result in the follwoing SVG code when running marko build:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <style>@keyframes rotate{0%{transform:rotate(0deg)}}</style>
    <path stroke-width="0" d="M405.6 122.6c43.3 43 75.6 96.9 74.3 149.4-1.1 52.6-36.1 103.8-79.4 137.5s-94.5 49.9-150 54.1c-55.7 4.2-115.7-3.2-156.9-36.9-41.2-33.3-64-93.3-61.4-150.7S63 164.3 104.4 121.3s95.8-74.6 150.2-74.1c54.2.3 108 32.4 151 75.4z" style="animation-name:rotate;animation-duration:40s;animation-timing-function:linear;animation-iteration-count:infinite;transform-origin:center">
        <animate repeatCount="indefinite" attributeName="d" values="M405.6,122.6c43.3,43,75.6,96.9,74.3,149.4c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1 c-55.7,4.2-115.7-3.2-156.9-36.9C52.4,393.4,29.6,333.4,32.2,276S63,164.3,104.4,121.3s95.8-74.6,150.2-74.1 C308.8,47.5,362.6,79.6,405.6,122.6z;
        M406.2,121.3c43.3,43,75.6,96.9,74.3,149.4 c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1c-55.7,4.2-115.7-3.2-156.9-36.9c-41.2-33.3-64-93.3-61.4-150.7 S63.6,163,105,120s95.8-74.6,150.2-74.1C309.4,46.2,363.2,78.3,406.2,121.3z;
        M413.2,106.3c43.3,43,59.2,100.9,57.9,153.4c-1.1,52.6-31,123.2-74.3,156.9s-86.1,42.7-141.6,46.9 c-55.7,4.2-123.6-19.3-164.8-53c-41.2-33.3-51.8-87.8-49.2-145.2s26.1-98.7,67.5-141.7S210.6,47.6,265,48.1 C319.2,48.4,370.2,63.3,413.2,106.3z;
        M405.6,122.6c43.3,43,75.6,96.9,74.3,149.4c-1.1,52.6-36.1,103.8-79.4,137.5s-94.5,49.9-150,54.1 c-55.7,4.2-115.7-3.2-156.9-36.9C52.4,393.4,29.6,333.4,32.2,276S63,164.3,104.4,121.3s95.8-74.6,150.2-74.1 C308.8,47.5,362.6,79.6,405.6,122.6z;" dur="2s"/>
    </path>
</svg>

As you can see, when you compare it to the original SVG code, it still lacks some of the internal CSS. Therefore the inline styles set on the <path> element, will not work.

[tigt]

This is probably a bug in the underlying svgo module, but maybe they’ve already fixed it and we need to update.

Would you mind checking if/how your bug still happens with svgo directly? https://npm.runkit.com/svgo