Very simple method of creating a responsive image sprite using background images (good with an SVG image sprite)

Responsive background sprite

// The mixin
@mixin responsive-sprite(
    $sprite-path,
    $sprite-width,
    $sprite-height,
    $icon-width,
    $icon-height,
    $icon-pos-x,
    $icon-pos-y){

    $background-pos-x: 0;
    $background-pos-y: 0;
    
    @if ($sprite-width - $icon-width) != 0 {
        $background-pos-x: ($icon-pos-x * -1) / ($sprite-width - $icon-width);
    }

    @if ($sprite-height - $icon-height) != 0 {
        $background-pos-y: ($icon-pos-y * -1) / ($sprite-height - $icon-height);
    }

    display: inline-block;
    width: 100%;
    height: 0;
    padding-bottom: percentage($icon-height / $icon-width);
    background-image: url($sprite-path);
    background-size: percentage($sprite-width / $icon-width) percentage($sprite-height / $icon-height);
    background-position: percentage($background-pos-x) percentage($background-pos-y);
    background-repeat: no-repeat;
}

// Usage
.sprite {
  @include responsive-sprite(
    'sprite.svg',
    512,
    256,
    50,
    20,
    -4,
    -4
  );
}