SVG vs PNG performance - scroll (v4)

Revision 4 of this benchmark created by cybermage on January 25, 2016

Preparation HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
img { margin-top: 100px; margin-bottom: 100px; }
.container { width: 300px; height: 300px; float: left; overflow: scroll; }
</style>

<div class="container" id="svgimgContainer">
<img src="http://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg" alt="" id="svgimg" />
</div>

<div class="container" id="pngimgContainer">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/200px-Twitter_bird_logo_2012.svg.png" alt="" id="pngimg" />
</div>
<div style="clear: both;"></div>
<script>
move = 1;
svgimgContainer = $( '#svgimgContainer' );
pngimgContainer = $( '#pngimgContainer' );
svgimgContainerElement = svgimgContainer.get();
pngimgContainerElement = pngimgContainer.get();

</script>

Teardown

    move = (move + 1) % 50;
  

Test runner

svgimgContainerElement.scrollTop = move;

pngimgContainerElement.scrollTop = move;

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Marko Žmak on July 6, 2013
• Revision 4: published by cybermage on January 25, 2016