linearGradientToSVG SCSS Mixin

_linearGradientToSVG.scss

//----------------------------------------------------------------------
// Create a 2 color, linear gradient SVG image - default of vertical
// @function linearGradientToSVG
// @param {rgba} $colorA first color (top/left) of the gradient
// @param {rgba} $colorB second color (bottom/right) of the gradient
// @param {string} $orientation expects vertical or horizontal
// @returns {url}
//----------------------------------------------------------------------
@function linearGradientToSVG($colorA, $colorB, $orientation: vertical) {
    @if $orientation == vertical {
        $x2Val: 0%;
        $y2Val: 100%;
    } @else if $orientation == horizontal {
        $x2Val: 100%;
        $y2Val: 0%;
    } @else {
        @warn("linearGradientToSVG mixin expected either `vertical` or `horizontal` as third parameter rather than: " + $orientation);
    }
    @return url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradientToSVG" x1="0%" y1="0%" x2="' + $x2Val + '" y2="' + $y2Val + '"><stop offset="0%" style="stop-color:' + $colorA + ';stop-opacity:1" /><stop offset="100%" style="stop-color:' + $colorB + ';stop-opacity:1" /></linearGradient></defs><rect width="100%" height="100%" style="fill:url(#linearGradientToSVG);" /></svg>');
}