SVG vs PNG

Testing performance of a large number of SVGs

by Alex Alex

HTML

<div class="toolbar">
    <b style="color: red">Image format:</b>
    <label>
        <input type="radio" name="imageType" value="svg" checked /> SVG
    </label>
    <label>
        <input type="radio" name="imageType" value="png" /> PNG
    </label>
</div>
<div class="scroll-container"></div>

SCSS

.toolbar {
    position: fixed;
    height: 30px;
    background: rgba(255, 255, 255, .95);
    border-bottom: 2px solid #888;
    padding-top: 10px;
    text-align: center;
    width: 100%;
    top: 0;
}

.scroll-container {
    .card {
        width: 300px;
    }
}

JavaScript

$('input[name=imageType]').change(function() {

    $('.scroll-container').html('')

    var svgImg = '<img class="card" src="http://www.totalnonsense.com/ks.svg" />';
    var pngImg = '<img class="card" src="http://www.madore.org/~david/images/cards/english/queen-spades.png"/>'

    for (var i = 0; i < 100; i++) {
        var img = $('input[name=imageType]:checked').val() === 'svg' ? svgImg : pngImg;
        $('.scroll-container').append(img);
    }

});

$('input[name=imageType]').change();