SVG Icon

HTML

<input id="size-slider" type="range" min="16" max="48" step="2" value="16">
<span id="size-px">16px</span> <span>16px, 32px, 48px..</span>

<br><br>

<button class="icon-plus"></button>
<button class="icon-chart"></button>
    <div id="test">test</div>

CSS

html { padding: 50px; font: 14px sans-serif; color: #ccc; }

#test{position:absolute;top:100px;background:red;}
#size-px { padding: 5px; border-radius: 4px; color: white; background: green; font-weight: bold; }

button {
    width:  16px;
    height: 16px;
    border: 0;
    margin: 4px;
    background: url(http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg) no-repeat;
    background-size: auto 100%;
    cursor: pointer;        
}
button.icon-plus { background-position: 0 0; }
button.icon-chart { background-position: 100% 0; }

button:hover { background-color: #ccc; }
button:active { background-color: #666; }

JavaScript

// SVG Icons are only "really" sharp in their original size (in this case 16px) and every multiple: ex. 16px, 32px, 48px..

// And when used as background-image, you can't resize them in Firefox and Opera without becomming really blurry.


// More info: http://simurai.com/19895985870



$(function() {

    $("#size-slider").change(function(e) {
        var sizeValue = $(this).val();
        var sizePx = sizeValue + "px";
        $("#size-px").html(sizePx);
        $("button").css( {"width": sizePx, "height": sizePx });

        if( sizeValue % 16 )   {
            $("#size-px").css( "background", "red");
        } else {
            $("#size-px").css( "background", "green");
        }            
    });

});


function upperElements(el) {
    var top = el.offsetTop,
        left = el.offsetLeft,
        width = el.offsetWidth,
        height = el.offsetHeight,
        elemTL = document.elementFromPoint(left, top),
        elemTR = document.elementFromPoint(left + width - 1, top),
        elemBL = document.elementFromPoint(left, top + height - 1),
        elemBR = document.elementFromPoint(left + width - 1, top + height - 1),
        elemCENTER = document.elementFromPoint(parseInt(left + (width / 2)), parseInt(top + (height / 2))),
        elemsUpper = [];
    if (elemTL != el) elemsUpper.push(elemTL);
    if (elemTR != el && $.inArray(elemTR, elemsUpper) === -1) elemsUpper.push(elemTR);
    if (elemBL != el && $.inArray(elemBL, elemsUpper) === -1) elemsUpper.push(elemBL);
    if (elemBR != el && $.inArray(elemBR, elemsUpper) === -1) elemsUpper.push(elemBR);
    if (elemCENTER != el && $.inArray(elemCENTER, elemsUpper) === -1) elemsUpper.push(elemCENTER);
    return elemsUpper;
};
console.log(upperElements($('.icon-plus')[0]));