SVG 색상변경 Coloring (with scss) / mixins

 

주의: mask-image는 ie 브라우저 미지원!!! 

 

mixins.scss

// mixin
@mixin svg($path, $width, $height, $color) {
	width: $width;
    height: $height;
    background-color: $color;
    -webkit-mask-image: url($path);
    mask-image: url($path);
    background-size: cover;
    -webkit-background-size: cover;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

 

사용하기 (@include)

// 노랑색 배경의 검정 로고
.logo {
	width: 92px;
    height: 92px;
	background: #ffe31d;
    span {
    	@include svg('~@/assets/images/logo.svg', 78%, 21px, #000);
    }
}

 

호환성

https://caniuse.com/svg-css

SVG in CSS backgrounds | Can I use... Support tables for HTML5, CSS3, etc