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.