Aplicando cor no SVG com CSS

Nessa super dica vamos aprender como aplicar cor no SVG através do CSS. Tem coisas que ninguém de conta!

Existe pelo menos três formas de aplicar cor no SVG com CSS:

Quando o SVG está no src da tag image, direto no HTML

Nesse caso no CSS, basta adicionar cor ao fill do SVG:

.svg-image{
	fill: @hexa-color;
}

Quando o SVG é um background-image, e ele é um gráfico positivo

Para gráficos SVG cujo preenchimento se dá na parte positiva da imagem, usa-se uma máscara com background-color.

A cor será aplicada no círculo preto
.svg-mask{
	-webkit-mask-image: url( @image.svg );
	mask-image: url( @image.svg  );
	
	background-color: @hexa-color
}

Quando o SVG é um background-image, e ele é um gráfico negativo

Agora quando o preenchimento é na área negativa, usa-se duas máscaras, uma preenche o positivo e o outro o negativo.

A cor será aplicada no círculo transparente
.svg-mask:before{
	content: " ";
	display: block;
    	height: @height;
    	width:@with;
        background-color: @hexa-color-positive
}

.svg-mask:after{
       content: " ";
	display: block;
    	height: @height;
    	width:@with;
        position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
        background-color: @hexa-color-negative

        -webkit-mask-image: url( @image.svg );
	mask-image: url( @image.svg  );
	
	-webkit-mask-size: @size;
	mask-size: @size;

	-webkit-mask-repeat:@repeat;
	mask-repeat: @repeat;
	
	-webkit-mask-position:@position-x @position-y;
        mask-position: @position-x @position-y;	
}

Fica a dicaaaaaaaa!

 

Curso online sobre: Tipografia, Font-face e Fallbacks!

Compartilhe...Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

Comentários no Facebook