Como mudar a cor do SVG

Recentemente, em um trabalho, tive que mudar a cor de diversos arquivos SVG (Scalable Vector Graphic) e vi que era possível mudar a cor através do Ilustrator, mas que seria uma tarefa muito demorada, pois eram quase 200 arquivos e que os mesmos estavam em diversas pastas.

Contudo, é possível fazer essa mudança através de um editor de texto.

Mas, antes de mostrar como fazer isso através de um editor de texto, vamos primeiro saber o que é um arquivo SGV.

Scalable Vector Graphic (SVG)

É um arquivo em XML que descreve de forma vetorial, um desenho ou gráficos bidimensionais. Portanto, o arquivo pode ser aberto em um editor de texto para manipular, por exemplo a cor como é o intuito desse tutorial.

Voltando ao tema, primeiramente procure saber qual é o valor hexadecimal da cor que você deseja usar. Existem diversos sites que mostram uma lista de cores, como o Adobe Kuler, ou em um editor de imagens como Photoshop ou no próprio editor de texto, caso o mesmo possua um plugin instalado que exiba uma paleta de cores, como no caso do Sublime Text. Abaixo um exemplo no PhotoShop. (Clique na imagem para visualizar melhor).

como-mudar-cor-svg-achar-cor-hexadecimal

Abra o arquivo SVG em um Editor de Texto. O atributo que você deve encontrar é fill e/ou stroke. Abaixo, o exemplo mostrando o atributo fill antes e depois. Clique nas imagens para melhor visualização.


Código Antes

como-mudar-cor-svg-codigo-depoisCódigo Depois

Abaixo a imagem com uma cor cinza (antes) e vermelha (depois).

como-mudar-cor-svg-antesCor Cinza

como-mudar-cor-svg-depoisCor Vermelha

 

 

 

Espero que tenham gostado desta dica. Fiquem de olho em nosso próximo tutorial.

EDITADO: Conforme Reginaldo Passos informou no comentário, também é possível fazer a mudança através do CSS, sendo até mais rápido a mudança da cor, usando a propriedade fill.

Referências:

//ggnome.com/wiki/How_to_Change_the_Colors_of_Scalable_Vector_Graphics

//color.adobe.com/pt/create/color-wheel/

2 comentários em “Como mudar a cor do SVG

  • Muito bom o tutorial, mas também dá pra mudar usando a propriedade fill no CSS, basta utilizar uma classe ou id no ícone para aplicar diretamente no CSS. 🙂

    • Obrigado Reinaldo pela dica, vou colocar essa informação tanto no texto como no vídeo que estou preparando. Na época que tive que alterar esses diversos arquivos e nas pesquisas que fiz, não encontrei nada dizendo sobre mudar via css e realmente fica até mais rápido fazer essa mudança.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *