title: How to record images in SVG animations
body: <p>I have an animated SVG like this:</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>image {
      animation: pulse 5s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(0.5)
    }
    100% {
      transform: scale(1)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
    &lt;image height="200" width="300" href="https://i.imgur.com/4AiXzf8.jpeg"&gt;
    &lt;/image&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I wish to record a video of this animation (using JS not screen-recording software). I'm doing this by recording each frame of the SVG animation onto a canvas with this code (<a href="https://jsfiddle.net/bLq574ko/5/" rel="nofollow noreferrer">JSFiddle demo</a>):</p>
  <pre class="lang-js prettyprint-override"><code>function addFrameToBuffer(canvas, svgElement) {
    const ctx = canvas.getContext('2d')
    const svgURL = new XMLSerializer().serializeToString(svgElement);
    const img = new Image();
    img.onload = () =&gt; {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
  
      const frame = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    };
    img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
  }
  </code></pre>
  <p>The problem is that my code doesn't render images inside SVGs. They appear like this:</p>
  <p><a href="https://i.stack.imgur.com/QxX0f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QxX0f.png" alt="enter image description here" /></a></p>
  <p>I managed to create a work-around, by first converting the images from using external hrefs, to base64 strings. The problem is that these base64 strings are so large that when the browser has to render multiple images it often hangs or lags while animating (especially when using anime.js).</p>