No HTML5, imagens em SVG podem ser embutidas direto no documento HTML com a tag <svg>
. A vantagem é que você tem elementos no DOM e pode manipulá-los com CSS e JavaScript normalmente.
Quando escrevi meu livro "A Web Mobile", o amigo e designer Thiago Vilaça desenhou a capa e criou um desenho que gostei muito. Aí quando fui montar o hotsite do livro, claro que eu quis colocar o desenho por lá.
Mas, estamos na Web! Interatividade é a regra e eu achei que o desenho tinha tudo pra receber um toque de animação. Solução? Usar SVG com CSS Animations.
SVG inline no HTML5
Colocar um desenho SVG na página é só sair escrevendo a tag <svg>
e pronto. Por exemplo, se quisermos desenhar um círculo em SVG no meio da página:
<!doctype html>
<html>
<body>
<h1>Meu teste de SVG</h1>
<svg>
<circle cx="50" cy="50" r="40" fill="#F90">
</svg>
</body>
</html>
Segundo o Can I use, SVGs inline no HTML5 funcionam em todos os navegadores modernos. As maiores exceções são Internet Explorer 8, Android 2.x e Opera Mini.
Podemos detectar suporte a SVG com Modernizr e oferecer um fallback se for o caso. No caso da página do livro, eu decidi não oferecer fallback já que é uma imagem meramente decorativa. Os navegadores sem suporte a SVG simplesmente não vêem a imagem:
.no-inlinesvg svg {
display: none;
}
PS. há um problema de performance nisso, claro. Os navegadores velhos vão baixar o SVG mesmo sem poderem exibi-lo. Decidi ignorar isso já que o SVG é relativamente pequeno e quase não tenho visitantes desses navegadores velhos por aqui.
CSS modificando o SVG
O legal do SVG também ser um formato de marcação é que você pode colocar classes e IDs nos elementos e depois referenciá-los no CSS. No desenho, por exemplo, eu queria mudar a cor das setas do desenho via CSS. Bastou dar uma classe e mudar a cor no CSS.
Algo assim:
<!doctype html>
<html>
<body>
<style>
.seta {
fill: #fcb870;
}
</style>
<svg>
...
<path class="seta" d="...">
...
</svg>
</body>
</html>
O importante aqui é perceber como coloquei uma classe no elemento <path>
do SVG e depois referenciei no CSS normal da página. Repare também que estou usando propriedades CSS específicas de SVG, como a fill
, que serve pra pintar um elemento de certa cor (quase como um background-color
).
CSS3 Animations no SVG
Sabendo modificar o SVG com CSS, o céu é o limite! No caso da seta que falei antes, queria ainda fazê-la mudar de cor ciclicamente, como se estivesse piscando entre duas cores possíveis. Fácil de fazer com CSS animations:
@keyframes muda-cor {
0%,49% {
fill: #fcb870
}
50%,100% {
fill: #f89c33
}
}
.seta {
animation: muda-cor 3s linear infinite;
}
O que estamos fazendo é alternar entre essas duas cores a cada 5 segundos sem parar. A sintaxe dos keyframes indica que a primeira cor fica fixa na metade do tempo e depois vem a outra cor na outra metade. Não coloquei os prefixos necessários para alguns browsers.
Animações mais complicadas
Dá pra animar de tudo com CSS Animations. Dá pra combinar com CSS transforms e criar uns efeitos legais. Um que eu queria na página era fazer as engrenagens girarem. A princípio, girar algo com CSS é simples:
@keyframes gira {
to {
transform: rotate(360deg);
}
}
.engrenagem {
animation: gira 2s linear infinite;
}
Mas o resultado não é o esperado. O elemento vai girar mas repare que o eixo de rotação não é o próprio elemento, mas o ponto (0,0) do desenho SVG. Pra resolver, é preciso configurar a propriedade transform-origin
apontando a coordenada da origem da rotação — que deve ser o centro da engrenagem. Essa coordenada tem que ser calculada com relação à origem do desenho.
Por exemplo:
.engrenagem {
animation: gira 8s linear infinite;
transform-origin: 43px 40px;
}
Esse número não é a coisa mais fácil de calcular mas também não é um bicho de sete cabeças.
Muitas animações
O efeito final que eu criei nessa página gira duas engrenagens em sentidos opostos, altera as cores de 4 setas e ainda desloca suavemente duas nuvens de fundo de maneira alternada.
Veja o efeito completo abaixo ou no site do livro:
O legal de usar CSS animations para detalhes assim é que elas degradam sem problemas em navegadores sem suporte. O IE9, por exemplo, suporta SVG mas não animações. Lá, o desenho vai aparecer estático sem problemas.
Outro detalhe importante é que a especificação SVG tem uma parte própria de animações que poderíamos ter usado também. Nesse caso, preferi CSS Animations que já são mais conhecidas dos desenvolvedores Web e bem simples de usar.