Você sabia que é possível estilizar e manipular arquivos SVG com CSS ou JavaScript? É tão simples quanto fazer isso com um elemento HTML normal no DOM.
Exemplo é este carrinho feio que fiz usando o Inkscape, ele possui duas camadas, uma para a carcaça do carro e outra para as rodas:
Que colocamos no HTML dessa forma quando exportado com Plain SVG:
<svg
width="43.859802"
height="25.696486"
viewBox="0 0 43.859802 25.696486"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-2.1762497,-14.313027)">
<path
style="fill:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
d="m 2.6633785,34.446363 h 1.538841 c 0,0 1.4017621,-5.358813 5.3414968,-5.240459 4.8180997,0.144742 5.9038797,5.122086 5.9038797,5.122086 l 12.192355,-0.118372 c 0,0 2.100726,-4.563324 5.378797,-4.805658 4.014681,-0.296788 5.187983,5.53679 7.735513,6.813599 3.665151,1.836956 5.281791,-1.983477 5.281791,-1.983477 L 45.320162,24.522834 33.982976,24.189853 27.11942,14.313027 6.3613453,14.647835 2.1762497,25.529083 Z"
id="path2" />
</g>
<g
id="layer2"
transform="translate(-2.1762497,-14.313027)">
<circle
style="fill:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
id="path1"
cx="9.7931242"
cy="34.9874"
r="4.8547111" />
<circle
style="fill:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round"
id="circle1"
cx="33.22966"
cy="35.154804"
r="4.8547111" />
</g>
</svg>O que gera esse carro só com a cor preta, por padrão:
Colorindo o carro
Note que podemos selecionar as tags no SVG como elementos normais do DOM, assim, podemos estilizar caminhos e outras formas, apenas editando as propriedades. Como nesse exemplo, note que há um estilo inline na tag “path”.
E olha que maravilha, ainda nos disponibiliza um ID para acessar.
Você pode utilizar CSS normalmente:
svg > g#layer1 #path2 {
/* Precisamos do "!important" pois os estilos que estão inseridos diretamente na tag, inline, tem mais prioridade do que os inseridos externamente. Assim temos que forçar os estilos via CSS. */
fill: #29374b !important;
}Ou usar JavaScript para manipular o elemento, como o exemplo a seguir:
const carro = document.querySelector("svg#svg1");
carro.querySelector("g#layer1 #path2").style.fill = "#29374b";Ambos têm o mesmo resultado:
Agora digamos que quero ostentar uma roda especial prateada para andar nas ruas de São Paulo. Com CSS fazemos dessa forma:
svg > g#layer2 circle {
fill: #848e9f !important;
}E com JavaScript fizemos dessa forma:
carro.querySelector("g#layer2 circle").style.fill = "#848e9f";Resultado:
Posicionando os elementos
Podemos alterar todas as propriedades de estilo e atributos, como exemplo, se você ainda não está contente com essas rodas altas e quer andar com o carro rebaixado, no estilo, quase raspando no chão:
svg > g#layer1 {
transform: translate(-2px, -11px) !important;
}Resultado:
Você pode fuçar o código e aprender através do projeto no codepen. 😅
