LESS: Mixin Svg Fallback

.svg-background-image (@filename:@filename){
	background-repeat: no-repeat;
  .svg &{
  	background-image: url("@{i-folder}@{filename}.svg");
  }	
  .no-svg &{
  	background-image: url("@{i-folder}@{filename}.png");
  }	
}

SASS: Mixin Svg Fallback

$svg-path: "img/svg/";
$png-path: "img/png/";

@mixin svg-background-image ($name, $link){  
    .svg &{
        background-image: url(#{$svg-path}#{$name}.svg);
        @if $link == true{
            &:hover{
                background-image: url(#{$svg-path}#{$name}-hover.svg);
            }
        }
    }
    .no-svg &{
        background-image: url(#{$png-path}#{$name}.png);
        @if $link == true{
            &:hover{
                background-image: url(#{$png-path}#{$name}-hover.png);
            }
        }
    }
}

// Use: @include svg-background-image('image-name', true);
// True if :hover img exists.

SASS: Mixin Svg Fallback.Samefolder

$path: "img/icons/";

@mixin svg-background-image ($name, $link){  
    .svg &{
        background-image: url(#{$path}#{$name}.svg);
        @if $link == true{
            &:hover{
                background-image: url(#{$path}#{$name}-hover.svg);
            }
        }
    }
    .no-svg &{
        background-image: url(#{$path}#{$name}.png);
        @if $link == true{
            &:hover{
                background-image: url(#{$path}#{$name}-hover.png);
            }
        }
    }
}

// Use: @include svg-background-image('image-name', true);
// True if :hover img exists.