colorindo-icones-svg-com-css-a-partir-de-uma-spritesheet-usando-svg-masks

Este post é uma montanha russa: Para usarmos ícones SVG coloridos, vamos criar uma aplicativo Desktop com base num projeto OpenSource HTML para slicear uma spritesheet SVG! Vem ver:

Analisando a demanda:


Tive um problema em um projeto recente, onde o Designer enviou o layout em .PSD, mas os ícones eram todos smart objects rasterizados!
Isso quer dizer que eu poderia ter salvado eles como .png ou .jpg e inserido como background-image ou mesmo <img src="">.

O problema é que isso simplesmente não parece certo.

Aí, acabei usando os icones to FlatIcon, mas - conforme eu esperava - o Designer reclamou. :P

Bom, só ai que eu percebi que havia um .svg nos arquivos que ele me enviou. À questão é que o arquivo svg era um sprite de quase uma centena de icones.

Bom, na verdade não era um SVG, era um .Ai que eu converti para SVG… vai sacando :P

Qual melhor forma de trabalhar com SVG Sprites?

Bom, acho que não serei eu a dar a resposta absoluta, a MELHOR forma…
Mas funcionou legal o aproach de svg Masks e filters para colorir os ícones, inseridos com css background e background-position.

Para pegar a localização exata dos icones dentro da SpriteSheet, usei o Sprite-Cow.
Ele é uma solução online, mas de código aberto.

Veja, abaixo, como é o Serviço online do SpriteCow:
Sprite-Cow.com

Criando um APP Desktop para slicear os icones

Para tornar mais prático o fluxo de trabalho, aproveitei que o sprite-cow tem (código aberto no Github)[https://github.com/jakearchibald/sprite-cow], e decidi empacotar o app em uma Aplicação Desktop!

Oque fiz foi baixar o source deles, fazer algumas pequenas alterações e empacotei com nw.js

Para empacotar o spritecow em um executável, fazemos o processo do nw.js na pasta /www

Acesse o repositório já modificado que usei para empacotar AQUI

Após empacotamento com NW.js, temos um executável que nos permite abrir a nossa versão modificada do SpriteCow diretamente na área de trabalho.

aplicativo-desktop-empacotado-com-nw-js-html5

Criando um instalador profissional com Winrar

Não vou entrar em muitos detalhes deste processo, pois é legal que seja surpresa :) Usei o Winrar para criar um instalador customizado que, além de compactar os arquivos necessários pra rodar o executável, faz a extração para program files, bem como cria atalhos com ícones, e o próprio instalador tem um ícone customizável.

Você pode baixar e conferir o resultado, Baixando o instalador para Windows Aqui

Confira como ficou o instalador e o fluxo de instalação:

O instalador desktop, criado com o Winrar:
Instalador Desktop Criado com Winrar

A primeira tela do instalador, que é a tela da Licença/Termos de Serviço
tela-termos-de-servico-do-instalador-desktop-gerado-com-winrar

Tela de instalação, onde o instalador oferece para extrair na program/files
tela-do-instalador-desktop-gerado-com-winrar

Atalho automático na área de trabalho, com ícone personalizado:
atalho-na-area-de-trabalho-do-instalador-gerado-com-winrar

Usando o Fatiador para pegar os sprites


Abrindo o arquivo SVG com o nosso recém criado Aplicativo Desktop, temos uma simples interface que nos ajudará à selecionar o ícone desejado.
Ao selecioná-lo, o código CSS é gerado abaixo.

usando-o-fatiador-para-pegar-o-sprite

Colorindo os Sprites SVG


Para Colorir SVG que está sendo inserido via CSS não podemos simplesmente usar o atributo color, nem mesmo o stroke ou path.

Pelo fato do arquivo estar sendo inserido via url(), em nosso CSS, ao invés de ‘embedado’ direto no HTML, propriedades que modifiquem o svg em sí não são aceitas.

Por isso vamos usar SVG MASKs.

O que é uma Mascara? (MASK)

Uma máscara é um conceito já antigo no design. É uma representação de espaço que será preservado ou excluído. Uma máscara nada mais é do que uma seleção.

Então se temos uma máscara no formato do ícone SVG, temos uma seleção naquele formato.

O que precisamos fazer, é pintar essa seleção. Pintar o background dessa seleção.

Saca só:

O código de um sprite selecionado é mais ou menos assim:

1
2
3
4
5
.sprite {
background: url('../lib/images/icones.svg') no-repeat -156px -93px;
width: 23px;
height: 22px;
}

Vamos alterar o código acima. Primeiro, um nome específico para o ícone. Depois, o background vira mask e -webkit-mask.

1
2
3
4
5
6
.iconeDash {
mask: url('../lib/images/icones.svg') no-repeat -156px -93px;
-webkit-mask: url('../lib/images/icones.svg') no-repeat -156px -93px;
width: 23px;
height: 22px;
}

Agora podemos estilizar ele usando classes de cor.

Essas classes de cor serão, nada mais, que classes com o background-color setado para a cor desejada.

Aproveito, também, para definir umas regras que pertencerão à todos os ícones (na classe .icone. A classe .redIcon é um exemplo de como colorir:

1
2
3
4
5
6
7
8
.icone {
display: inline-block;
text-index: 100%;
margin-bottom: -5px;
}

.redIcon {
background-color: red;
}

Portanto, acima, temos a classe .icone que serve de parâmetro para todos os ícones, e a classe .redIcon que contém a propriedade background-color que dará cor ao elemento.

Para usarmos nosso ícone, nosso HTML será assim:

1
<span class="icone iconeDash redIcon"></span>

Dessa forma, o ícone aparecerá vermelho em nossa página.

Mas é importante lembrar que não pintamos o ícone.

Como usamos MASKS, o formato do ícone, no arquivo SVG, é usado como máscara. Por isso a cor de fundo do elemento que tem a máscara aplicada funciona como parâmetro de colorir ;)

Então se usarmos, ao invés de .redIcon , uma classe que contenha uma foto como background, o resultado será um ícone com a textura da foto escolhida. ;)

Essa técnica de máscaras nos permite um leque imenso de opções, mas que ficarão para comentários ou próximos posts.

Por hoje é isso, obrigado por ter vindo :)