mistergraphx
12/10/2014 - 7:23 AM

SVG BG-IMG FALLBACK

Sources

http://base.webknit.co.uk/ https://github.com/webknit/Base/blob/master/assets/SASS/modules/_mixins.scss

mixin_svg_with_fallback.scss
content_copyfile_download
/*********************************************
	- 5.0 -  SVG BG-IMG FALLBACK
*********************************************/
	
// Sass mixin for SVG with fallback support using the invisible gradient technique
// http://pauginer.com/post/36614680636/invisible-gradient-technique
@mixin vector-image($img, $fallback, $position: center center, $size: auto) {
	background: transparent url($fallback) $position no-repeat;
	background-image: -webkit-linear-gradient(transparent, transparent), url($img);
	background-image: linear-gradient(transparent, transparent), url($img);
	background-size: $size;
}