title: SVG animations: sluggish/poor performance in Chrome
body: <p>We're developing a fairly complex scene with a lot of moving parts, which up until now didn't involve any SVG animation.</p>
  
  <p>Everything has been smooth and performing well, until we introduced an SVG with a few dashed lines that we animated using the stroke-dashoffset property.</p>
  
  <p>It makes absolutely no difference in Edge or Firefox, but in Chrome the animation of the entire scene becomes choppy and sluggish.</p>
  
  <p>We've even tried both means to the same end - CSS keyframes and SMIL inside the SVG element - but both perform equally poorly.</p>
  
  <p>Is there a performance trick for Chrome that we're missing?</p>
  
  <p>Edit: Example</p>
  
  <p>Markup:</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>.stream {
    animation: stream 10s infinite;
  }
  
  @keyframes stream {
    100% {
      stroke-dashoffset: 100;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.0" id="streams" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225.32 66.19" enable-background="new 0 0 225.32 66.19" xml:space="preserve"&gt;
        &lt;path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M107.38,50.54c0,0-6.78-84.52-106.51-22.2" /&gt;
        &lt;path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M110.49,45.31c-0.63-13.01-4.56-44.87-27.83-43.8c-27.6,1.27-37.33,39.66-38.49,60.34"/&gt;
        &lt;path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M180.63,59.88c-0.69-9.65-3.6-30.18-15.76-45.51C148.44-6.34,131.85,2.22,128.87,5c-2.89,2.7-12.81,7.14-14.28,42"/&gt;
        &lt;path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M118.59,45.41c2.4-10.18,9.9-31.97,30.87-37.59c26.03-6.98,55.13,9.32,72.02,19.37"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>