Animated SVG do not work

[tomastan]

Hi, we use animated SVG, however it is not shown if imported:

Here is the file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#62cb31">
	<path transform="translate(2)" d="M0 12 V20 H4 V12z">
		<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
	</path>
	<path transform="translate(8)" d="M0 12 V20 H4 V12z">
		<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />
	</path>
	<path transform="translate(14)" d="M0 12 V20 H4 V12z">
		<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
	</path>
	<path transform="translate(20)" d="M0 12 V20 H4 V12z">
		<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
	</path>
	<path transform="translate(26)" d="M0 12 V20 H4 V12z">
		<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
	</path>
</svg>

Here is the wrapper:

<template>
   <img :src="loaderUrl" height="64" width="64" alt="">
</template>
<script>
	import loaderUrl from "@/svg/admin/loading-bars.svg"

	export default{
		data(){
			return {
				loaderUrl
			}
		}
	}
</script>

• If ?url is added - it is shown (but an extra http call happens)
• If ?skipsvgo - it is not shown
• svgLoader({ svgo: false }) - not shown

So not sure what could be the problem here. Any ideas?