SVG Icon Loader

This page loads multiple SVG icons using just one file.

$(function() {
    $.svgIcons('images/icons.svg', {
        w:32, h:32,
        fallback_path:'images/',
        fallback:{
            'square':'square.png',
            'circle':'circle.png',
            'pencil':'path.png',
            'text':'text.png'
        },
        placement: {
            '.test':'circle'
        },
        callback: function(icons) {
            var sq = icons['square'].clone();
            $('#square2').append(sq);
        }
    });
});

Pros:

1. Fewer HTTP requests allows for faster loading
2. Using one SVGZ file for multiple images allows for great compression
3. SVG markup easily pasted into the master SVG file, much easier than dealing with sprite PNGs
4. Uses IMG elements for icons when available to reduce DOM nodes used

Cons:

1. Extra time required to process the single file
2. SVGZ support not always available on some servers (regular SVG works, but loses compression advantage)

SVG Icon Loader was created by Alexis Deveria and improved by Cuixiping