title: Animated SVG not opening in browser
body: <p>I have animated an .svg <a href="https://jsfiddle.net/30t6cwy3/" rel="nofollow noreferrer">here</a> however when I open it in the browser I get an error: </p>
  
  <p><a href="https://i.stack.imgur.com/YMf5L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YMf5L.png" alt="error"></a> </p>
  
  <p>Note the colour is different but the code is the same. </p>
  
  <pre><code>&lt;svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.32 84.01"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .cls-1{fill:#000000;}.cls-2,.cls-3{fill:none;stroke-miterlimit:10;}.cls-2{stroke:#000000;}.cls-3{stroke:#000000;}
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;
      endless 60
    &lt;/title&gt;
    &lt;path class="cls-1" d="M14.45 1.65H1.18v6.11h8.65v1.19H-.01V.42h14.46v1.19zm0 21.92H0v-8.48h9.84v1.19H1.19v6.14h13.26v1.19zM17.59 52.68l-.76.92L1.19 40.76V53.6H0V38.22zM1.08 31.42l.76-.92 15.61 12.84V30.5h1.19v15.38zM6.13 60.91c15 0 15 23.1 0 23.1H.19v-23.1h5.94zm0 21.92c13.3 0 13.3-20.73 0-20.73H1.38v20.72h4.75zM25.62.42h1.19v22h13.27v1.19H25.62V.42zM40.08 31.69H26.81v6.11h8.64v1.19h-9.84v-8.48h14.46v1.19zm0 21.92H25.62v-8.49h9.83v1.19H26.8v6.11h13.27v1.19zM23.45 77.05c0 4 3.7 5.78 7.1 5.78s7.13-1.45 7.13-5.41c0-2.11-1-4.19-4.46-5.51-4.13-1.58-9.21-2.41-9.21-6.67 0-3.47 3.3-5.25 6.54-5.25s6.3 1.72 6.3 5.25h-1.2c0-2.77-2.61-4.16-5.25-4.16s-5.21 1.39-5.21 4.16c0 3.3 4.32 4.09 8.35 5.61s5.31 3.93 5.31 6.54c0 4.52-3.73 6.63-8.32 6.63-3.53 0-8.28-1.85-8.28-7h1.2zM46.63 17.06c0 4 3.7 5.78 7.1 5.78s7.13-1.45 7.13-5.41c0-2.11-1-4.19-4.46-5.51-4.13-1.58-9.21-2.41-9.21-6.67 0-3.47 3.3-5.25 6.54-5.25s6.3 1.72 6.3 5.25h-1.19c0-2.77-2.61-4.16-5.25-4.16s-5.21 1.39-5.21 4.16c0 3.3 4.32 4.09 8.35 5.61s5.31 3.93 5.31 6.54c0 4.52-3.73 6.63-8.32 6.63-3.53 0-8.28-1.85-8.28-7h1.19z"&gt;
      &lt;animate
               attributeName="opacity"
               dur="2000ms" to="#f06d06"
               animate repeatCount="indefinite"&gt;
      &lt;/animate&gt;
    &lt;/path&gt;
  
  
    &lt;circle class="cls-2" cx="211.53" cy="732.35" r="4.06" transform="rotate(-30 -1168.947 677.542)"/&gt;
    &lt;circle class="cls-2" cx="211.7" cy="744.16" r="7.65" transform="rotate(-30 -1168.77 689.35)"/&gt;
    &lt;path class="cls-3" d="M63.82 72.01c0 5.71-4 10.83-9 10.83s-9-4.85-9-10.83 4-10.83 9-10.83 9 4.85 9 10.83z"/&gt;
    &lt;path class="cls-1" d="M44.07 27.34h19"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Any ideas why the animate and <code>'80'</code> does not appear. </p>
  
  <p>Thanks</p>