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