title: SVG <animateTransform> is not loading when i use as a background image
body: <p>Hi here I added SVG as a background image the code inside the path which is <code>&lt;animateTransform&gt;</code> is not loading so, the SVG animation is not working. what might be the issue can anyone suggest to me.
  <a href="https://i.stack.imgur.com/0IMrO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0IMrO.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: red;
  }
  
  /* Using svg like this which is not working */
  .page_loader {
      position:fixed;
      display:block;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:99999;
      text-align: center;
      background-image: url('http://content/uploads/preloader.svg');
      background-repeat: no-repeat;
      background-color: #ffa600;
      background-position: center center;
      background-size: 60px 60px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"&gt;
   &lt;path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
    c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z"&gt;
        &lt;animateTransform 
           attributeName="transform" 
           attributeType="XML" 
           type="rotate"
           dur="2s" 
           from="0 50 50"
           to="360 50 50" 
           repeatCount="indefinite" /&gt;
    &lt;/path&gt;
   &lt;path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
    c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z"&gt;
        &lt;animateTransform 
           attributeName="transform" 
           attributeType="XML" 
           type="rotate"
           dur="1s" 
           from="0 50 50"
           to="-360 50 50" 
           repeatCount="indefinite" /&gt;
    &lt;/path&gt;
   &lt;path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
    L82,35.7z"&gt;
        &lt;animateTransform 
           attributeName="transform" 
           attributeType="XML" 
           type="rotate"
           dur="2s" 
           from="0 50 50"
           to="360 50 50" 
           repeatCount="indefinite" /&gt;
    &lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>