Why is SVG scrolling performance so much worse than PNG? : <p>A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window.  When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow.  However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.</p>

<p>Here's a demonstration of the difference: <a href="https://jsfiddle.net/NathanFriend/42knwc1s/" rel="noreferrer">https://jsfiddle.net/NathanFriend/42knwc1s/</a></p>

<p>Why is the SVG scrolling performance so much worse than the PNG scrolling performance?  After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing).  Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?</p>

<p><br /></p>

<pre><code>                                                                                          `
</code></pre>
