---
title: "Animação de logo no site: Rive vs Lottie vs SVG ou vídeo"
description: "Animação de logo para o seu site: Rive, Lottie, CSS/SVG ou vídeo comparados em peso, Core Web Vitals e WCAG, com dados de uma logo em Rive no ar."
url: "https://dardo.studio/pt/blog/animacao-de-logo-site/"
language: "pt"
translations: {"en":"https://dardo.studio/en/blog/rive-vs-lottie/","es":"https://dardo.studio/es/blog/logo-animado-pagina-web/"}
updated: "2026-10-29T18:29:18.252Z"
---

[Blog](https://dardo.studio/pt/blog/)

# Animação de logo no site: Rive, Lottie, SVG ou vídeo

Quatro jeitos de colocar uma logo animada no site e quanto cada um custa em peso, velocidade e acessibilidade, medidos na logo em Rive da Gissi.

Por [Nicolás Cerón](https://dardo.studio/pt/nicolas-ceron/) · 29 de outubro de 2026

![Uma sala de música silenciosa à noite: a luz âmbar de um abajur cai sobre um piano e partituras abertas, e uma única fita carmesim se enrola no ar acima das teclas como uma linha em movimento.](https://dardo.studio/_astro/01M646C3607XP9F7J8DP742SAT_20cbCK.webp)

## Pontos-chave

- O player pesa mais que a animação: em gissimusic.com, em 29 de outubro de 2026, o .riv da logo transferiu cerca de 4,5 KB e o runtime do Rive cerca de 378 KB.
- CSS sobre um SVG inline não precisa de player; use Rive ou Lottie quando a logo precisar de estados, interação ou da timeline de um motion designer.
- Publique primeiro o SVG estático, na pose exata em que a animação termina, e pule a animação com movimento reduzido e Save-Data.
- Um canvas não conta para o Largest Contentful Paint, mas o download do runtime disputa a conexão com o elemento que conta.
- Pela WCAG 2.2.2, movimento que dura mais de cinco segundos junto com outro conteúdo precisa de um jeito de pausar, parar ou ocultar.
- Vídeo serve para o que vetores não desenham: uma gravação de 6 segundos em 1440 × 810 do hero da Gissi tem 1,5 MB e não reage ao cursor.
- Faça dos furos recortes de verdade e versione os endereços dos arquivos da logo, ou fundos escuros e caches vão mostrar a marca errada.

## Quatro jeitos de animar uma logo, lado a lado

Uma logo pode se mexer numa página de quatro jeitos: CSS animando um SVG que está no HTML, um player Lottie lendo uma exportação do After Effects, um player Rive lendo um arquivo .riv ou um vídeo. A logo pode ficar quase igual nos quatro. O que muda é o que cada visitante baixa, quem consegue editar o movimento e o que vê quem desativou as animações.

| Caminho              | Formato                                                               | Bom para                                                                                  | O que define o peso                                                                                                                | Interação                                                                                                    | Movimento reduzido                                                  |
| -------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| CSS sobre SVG inline | Código SVG dentro do HTML, animado com keyframes ou transições de CSS | Traços que se desenham, letras que surgem, quiques e fades das partes da logo             | Os paths do SVG; não há player                                                                                                     | Hover e foco no CSS; mais com um pouco de JavaScript                                                         | Uma regra @media (prefers-reduced-motion)                           |
| Lottie               | JSON (lottie-web) ou um arquivo .lottie compactado (dotLottie)        | Timelines que um motion designer monta no After Effects ou nas ferramentas da LottieFiles | O player (76 KB com gzip na versão completa do lottie-web, cerca de 500 KB de WebAssembly no dotLottie) mais o arquivo da animação | Tocar, pausar, velocidade e quadro via código; as máquinas de estado do dotLottie tratam clique, hover e fim | Fica com o seu código: não tocar sozinho e mostrar um quadro parado |
| Rive                 | Arquivo binário .riv                                                  | Logos com estados que reagem ao cursor, ao toque ou a dados                               | O runtime (cerca de 378 KB transferidos com o pacote mais leve, no site da Gissi) mais o .riv                                      | Máquinas de estado com listeners de ponteiro, teclado e foco                                                 | Não é automático: passe a preferência ou não carregue o runtime     |
| Vídeo                | MP4 ou WebM                                                           | Filmagem, renders 3D, granulação e efeitos que vetores não desenham                       | Resolução, duração e bitrate                                                                                                       | Só tocar e pausar                                                                                            | Não tocar sozinho; mostrar o pôster                                 |

## O player costuma pesar mais que a animação

O arquivo de animação de uma logo é pequeno. O que deixa um caminho mais pesado que outro é o código que toca a animação, que chega antes do primeiro quadro. Em 29 de outubro de 2026 baixamos cada player como publicado no npm (via jsDelivr) e o compactamos com gzip, como um servidor faria. Servidores com Brotli ou Zstandard enviam um pouco menos.

| Player                             | O que o navegador baixa                          | Sem compactar | Com gzip |
| ---------------------------------- | ------------------------------------------------ | ------------- | -------- |
| lottie-web 5.13.0, versão completa | JavaScript                                       | 306 KB        | 76 KB    |
| Player web do dotLottie 0.81.0     | Motor WebAssembly, mais uma camada de JavaScript | 1,24 MB       | 496 KB   |
| Rive canvas-lite 2.49.0            | Motor WebAssembly, mais uma camada de JavaScript | 830 KB        | 339 KB   |
| Rive webgl2 2.49.0                 | Motor WebAssembly, mais uma camada de JavaScript | 2,34 MB       | 974 KB   |
| CSS ou vídeo                       | Nada além: o navegador faz o trabalho            | 0             | 0        |

A documentação dos próprios fornecedores aponta na mesma direção. A Rive chama o [canvas-lite](https://rive.app/docs/runtimes/web/canvas-vs-webgl) de seu menor pacote web, porque ele deixa de fora os motores de texto, layout, áudio e scripting; para a maioria dos projetos, recomenda o webgl2, cujo motor, pela nossa medição, é umas três vezes maior. A LottieFiles estima [o motor do dotLottie](https://github.com/LottieFiles/dotlottie-web/tree/main/packages/web) em cerca de 500 KB compactados e o baixa de uma CDN quando o primeiro player começa, a menos que você faça preload ou hospede o arquivo.

Criação de logotipo

Quer que a Dardo faça isso por você?

Conte o que você precisa. Nico responde pessoalmente em até um dia útil.

[Pedir uma proposta](https://dardo.studio/pt/contato/?service=logo-design) · [Ver o serviço](https://dardo.studio/pt/servicos/criacao-de-logotipo/)

## O caso real: a logo da Gissi

A Gissi Music Academy é uma escola de música em Bogotá que se chamava A medio tono até outubro de 2026; em 23 de outubro o site passou para o novo nome e para gissimusic.com. A logo é um lettering rosa de letras arredondadas que forma "gissi", com uma sombra amarela sob os dois pingos dos is. Nesse dia redesenhamos em vetor o arquivo da logo que a escola nos enviou, um contorno suave por letra e o miolo do g como um furo de verdade, e animamos tudo com Rive para o hero da página inicial. Os detalhes abaixo vêm do código do site e do seu histórico de commits; o [case da Gissi](https://dardo.studio/pt/projetos/gissi/) conta o resto do projeto.

### Um desenho só, todos os arquivos

As letras ficam num único arquivo de coordenadas. Um comando de build, npm run logo:build, gera a partir dele:

- o SVG estático usado na barra de navegação, no rodapé e como reserva do hero;
- a cena do Rive, escrita como formas do Rive a partir das mesmas coordenadas (nada é importado de um SVG) e compilada num arquivo .riv com a ferramenta de linha de comando da Rive;
- as logos em PNG e WebP, a imagem de compartilhamento de 1200 × 630, o favicon e os ícones do app.

Como tudo sai das mesmas coordenadas, a animação termina exatamente na pose que o SVG mostra, e a troca de um para o outro não aparece.

### O que a animação faz

- **Entrada.** As cinco letras surgem da esquerda para a direita, cada uma cresce um pouco além do tamanho final e se acomoda. Dura cerca de 1,1 segundo.
- **Repouso.** Uma "onda de piano": cada letra sobe alguns pixels e volta, 0,15 segundo depois da anterior, e então a palavra fica parada. Ela toca uma vez só e dura cerca de 1,8 segundo.
- **Hover ou toque.** A letra sob o ponteiro achata e estica por meio segundo. São [listeners](https://rive.app/docs/editor/state-machine/listeners) do Rive para a entrada e o toque do ponteiro (pointer enter e pointer down), então funcionam com mouse e em telas sensíveis ao toque.
- **Sombras.** A sombra amarela de cada pingo repete o movimento do pingo 0,1 segundo depois, então o pingo se afasta dela e a sombra o alcança.

### Um erro para evitar: furos pintados

A primeira versão, de 23 de outubro, pintava os espaços entre as letras com a cor de fundo da página. Em qualquer outro fundo, esses espaços apareciam como contornos em volta das letras. A correção, publicada no mesmo dia, dá a cada letra com furos uma forma de recorte com a regra par-ímpar (even-odd), então o miolo do g fica transparente e se move com a letra. No SVG, os mesmos furos são uma máscara. Uma logo que vai aparecer sobre fundos claros e escuros precisa de furos que sejam furos de verdade.

## Como a página inicial carrega a logo

- **O SVG estático vem primeiro.** Ele está no HTML como um <img> de 4.425 bytes, cerca de 2,3 KB transferidos. Fica embaixo do canvas da animação, invisível, e o CSS o revela 1,4 segundo depois de renderizado, se a animação ainda não tiver assumido.
- **O runtime e o arquivo da logo carregam juntos.** O runtime é o pacote canvas-lite da Rive. O arquivo WebAssembly é servido de gissimusic.com com a versão do pacote no nome: a documentação da Rive diz que [o WASM precisa bater com a versão do pacote](https://rive.app/docs/runtimes/web/preloading-wasm), e hospedá-lo você mesmo dá controle sobre a origem e o cache.
- **O .riv viaja compactado.** A hospedagem serve arquivos .riv como um tipo binário desconhecido e não os compacta, então o build passa o arquivo pelo gzip (9.872 bytes viram 3.998) e o navegador descompacta com DecompressionStream.
- **Se chegar atrasado, pula a entrada.** Se o runtime chega quando a logo estática já apareceu, a animação começa numa segunda máquina de estado, Calm, que vai direto para a onda, então a logo nunca entra duas vezes.
- **Movimento reduzido e Save-Data recebem só o SVG.** Quem pediu movimento reduzido no sistema, ou navega com Save-Data, não baixa nem o runtime nem o .riv. Com movimento reduzido, a logo estática aparece na hora; com Save-Data, no tempo de sempre.
- **Fora da tela, para.** Quando a página cobre o hero na rolagem, a logo para de ser desenhada com o [stopRendering](https://rive.app/docs/runtimes/web/rive-parameters) da Rive e volta quando o hero reaparece.
- **O nome é anunciado uma vez.** O contêiner tem role="img" e o nome da escola como aria-label; o <img> tem alt vazio e o canvas fica oculto para tecnologias assistivas.

## O que medimos em gissimusic.com

Em 29 de outubro de 2026 carregamos a página inicial no ar com Chromium headless e o cache desativado: três vezes numa janela de desktop de 1440 × 900, duas vezes numa janela de celular de 390 × 844 com a conexão limitada a um 4G lento (150 ms de ida e volta, 1,6 Mbps de download) e a CPU quatro vezes mais lenta, e uma vez com movimento reduzido. "Transferido" inclui os cabeçalhos HTTP.

| O quê                                                  | Sem compactar | Transferido     |
| ------------------------------------------------------ | ------------- | --------------- |
| Logo SVG estática                                      | 4.425 bytes   | Cerca de 2,3 KB |
| Animação da logo (.riv, compactado pelo site)          | 9.872 bytes   | 4,5 KB          |
| JavaScript do Rive (canvas-lite 2.45.0, já empacotado) | 197 KB        | 57,6 KB         |
| WebAssembly do Rive                                    | 792 KB        | 320,5 KB        |
| Animação do fundo do hero (um segundo .riv)            | 150 KB        | 45,7 KB         |
| Página inicial inteira, com movimento (desktop)        | –             | 1,16 MB         |
| Página inicial inteira, movimento reduzido (desktop)   | –             | 0,73 MB         |

O que os números mostram:

- **O arquivo da logo tem cerca de 4 KB. O runtime que o toca, cerca de 378 KB,** mais de 150 vezes o SVG estático.
- **Dividir o runtime muda a conta.** Na Gissi, o mesmo runtime também toca o fundo animado do hero, então a logo só acrescenta seu arquivo de 4 KB. Um site que anima apenas a logo paga o runtime inteiro por ela.
- **O Rive é quase toda a diferença entre os dois carregamentos.** Cerca de 428 KB dos 0,43 MB de diferença são o runtime e os dois .riv; o resto é um pequeno script de rolagem suave que também fica desligado com movimento reduzido.
- **A reserva cobre as conexões lentas.** No desktop sem limitação, a animação assumiu cerca de 1,4 segundo depois do início da navegação, então a logo estática nem precisou aparecer. No celular limitado, o espaço da logo ficou vazio durante os 1,4 segundo que a página espera pela entrada, a logo estática apareceu por volta de 2,6 segundos e a animação assumiu entre 6,4 e 6,5 segundos, no estado Calm e sem repetir a entrada. Nesse intervalo, o visitante viu a logo pronta, não uma caixa vazia.
- **O canvas nunca foi o elemento do Largest Contentful Paint.** No desktop, o LCP foi a logo SVG da barra de navegação, um <img>; no celular limitado, a imagem de fundo do hero. [O web.dev lista os elementos que o LCP considera](https://web.dev/articles/lcp): imagens, <image> dentro de um SVG, vídeo, imagens de fundo de CSS e blocos de texto. O canvas não está na lista, e o Chromium ignora elementos com opacidade 0, como a reserva oculta. Mesmo assim, o download do runtime divide a conexão com o elemento que é o LCP; o nosso [guia de Core Web Vitals](https://dardo.studio/pt/blog/melhorar-core-web-vitals/) cobre o resto.

Os limites: são testes de laboratório a partir de um só lugar, num só motor de navegador e com dois ou três carregamentos por configuração, não dados de campo de visitantes reais. Não medimos o uso de CPU nem a taxa de quadros da animação.

## O caminho do vídeo, em números

Para o case da Gissi no nosso próprio site, gravamos a mesma entrada da página inicial em vídeo: 6 segundos em 1440 × 810 e 60 quadros por segundo, em H.264 e sem faixa de áudio. São 1.513.399 bytes, cerca de 1,5 MB. O vídeo mostra a logo e o fundo animado juntos, então a comparação não é exata, mas ele pesa umas três vezes e meia tudo o que o Rive envia para a página inicial e não responde a hover nem a toque.

O vídeo continua sendo a escolha certa quando o visual é filmagem, 3D, granulação ou efeitos que um player vetorial não desenha, ou quando a animação é uma prévia de um site e não parte dele, como no nosso portfólio. Se for usar:

- Tire o áudio ou deixe mudo. Os navegadores [não bloqueiam o autoplay](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay) de um vídeo sem faixa de áudio ou com o áudio mudo.
- Use autoplay, loop, muted e playsinline para ele se comportar como um GIF, mais uma imagem de pôster. Esqueça o GIF animado: no [exemplo do web.dev](https://web.dev/articles/replace-gifs-with-videos), um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB.
- Um <video> pode ser o elemento LCP. Conta o pôster ou o primeiro quadro, o que vier antes, então mantenha o pôster leve.
- Com movimento reduzido, mostre o pôster e não toque sozinho. Um loop de mais de cinco segundos precisa de controles, como explica a próxima seção.

Se o que você precisa é de um filme, e não de uma logo em movimento, é outro trabalho: o nosso serviço de [vídeos de lançamento](https://dardo.studio/pt/servicos/videos-de-lancamento/) cuida disso.

## As regras de acessibilidade para uma logo em movimento

### Cinco segundos: WCAG 2.2.2 Pausar, parar, ocultar

O critério [2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) da WCAG 2.2, de nível A, cobre conteúdo em movimento que começa sozinho, dura mais de cinco segundos e aparece junto com outro conteúdo: precisa haver um jeito de pausar, parar ou ocultar, a menos que o movimento seja essencial. Uma entrada de logo que termina em um ou dois segundos e fica parada está fora. Um loop, não.

A entrada da Gissi dura cerca de 1,1 segundo. Até 29 de outubro, a onda de piano que vem depois se repetia a cada 4,5 segundos, sem controle de pausa. Quem pedia movimento reduzido nunca a via, e ela parava de ser desenhada quando a página cobria o hero, mas o documento Understanding do W3C não diz que uma configuração do sistema operacional conta como o mecanismo, então, pela nossa leitura, o loop não atendia ao 2.2.2. Encontramos o problema ao pesquisar para este artigo e mudamos no mesmo dia: agora a onda toca uma vez só. No Chromium headless, conferindo o canvas da logo a cada 100 milissegundos, a versão anterior voltava a se mexer a cada 4,5 segundos enquanto observamos; a nova para cerca de 3,5 segundos depois de a página abrir e fica parada. Passar o cursor ou tocar numa letra ainda a faz quicar, porque é o visitante quem inicia esse movimento.

### O movimento que você provoca: WCAG 2.3.3 Animação a partir de interações

O critério [2.3.3](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) é de nível AAA: o movimento disparado por uma interação, como o achatar e esticar das letras da Gissi no hover, deve poder ser desligado, a menos que seja essencial. A técnica suficiente do W3C é a media query prefers-reduced-motion ([C39](https://www.w3.org/WAI/WCAG22/Techniques/css/C39)). Na Gissi, com movimento reduzido o .riv nunca carrega, então esse efeito não tem como acontecer.

### Movimento reduzido é responsabilidade sua, em qualquer formato

O [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) descreve o prefers-reduced-motion como o jeito de detectar que alguém pediu ao dispositivo para minimizar movimentos não essenciais, que podem causar desconforto em pessoas com distúrbios vestibulares. Nenhum player aplica isso por você. A documentação da Rive diz que [não aplica o movimento reduzido automaticamente](https://rive.app/docs/editor/accessibility/reduced-motion) e sugere passar a preferência para o arquivo via data binding, com um caminho reduzido na máquina de estado. O README do lottie-web não fala disso, então é o seu código que decide se toca sozinho. Com CSS, é uma media query. Para uma logo, a versão reduzida mais simples é a logo parada.

### Dê nome à logo uma vez só

Para tecnologias assistivas, [um canvas é só um bitmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas), então uma logo em Rive, ou em Lottie desenhada em canvas, precisa do nome num elemento contêiner (role="img" com aria-label) e do canvas oculto. O renderizador SVG do lottie-web pode acrescentar um título e uma descrição ao SVG que desenha, e o runtime web da Rive tem uma opção experimental que cria uma camada acessível sobre o canvas. O nosso guia de [manual de marca](https://dardo.studio/pt/blog/manual-de-marca/) cobre os limites de flashes e como registrar as regras de movimento, e o [checklist WCAG 2.2](https://dardo.studio/pt/ferramentas/checklist-wcag-2-2/) ajuda a testar o resto da página.

## Como escolher

- **CSS sobre SVG inline** quando o movimento são deslocamentos, escalas e fades das partes da logo. Coloque o SVG no HTML para o CSS alcançar cada letra; carregado como <img>, o SVG é uma imagem só para a página e [scripts dentro dele não rodam](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG%5Fas%5Fan%5Fimage). [Anime transform e opacity](https://web.dev/articles/animations-guide), que o navegador consegue resolver na etapa de composição, e use [transform-box: fill-box](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform-box) para a letra escalar a partir do próprio centro, e não do centro do SVG. [Animações CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) não precisam de JavaScript, e o navegador pode desacelerá-las em abas que ninguém está vendo.
- **Lottie** quando um motion designer monta a timeline no After Effects, exportada com o Bodymovin, ou nas ferramentas da LottieFiles, e a logo toca em vez de reagir. O [lottie-web](https://github.com/airbnb/lottie-web) desenha em SVG, canvas ou HTML; o player completo tem 76 KB com gzip. Os arquivos [dotLottie](https://dotlottie.io/) vêm compactados e podem reunir várias animações, temas e máquinas de estado, mas o player traz cerca de 500 KB de WebAssembly.
- **Rive** quando a logo tem estados ou reage: hover, toques, um estado de carregamento, um tema. Compensa mais quando o mesmo runtime toca outras coisas no site, como o fundo do hero da Gissi. Comece pelo canvas-lite se o arquivo não usa textos, layouts, áudio nem scripting do Rive.
- **Vídeo** quando o visual não pode ser desenhado com vetores e ninguém precisa interagir com ele.

Seja qual for a escolha, valem as mesmas cinco regras:

1. Publique primeiro o SVG estático, exatamente na pose em que a animação termina.
2. Carregue a animação depois do conteúdo principal e pule-a com movimento reduzido e Save-Data.
3. Pare de desenhar quando a logo sai da tela.
4. Mantenha o movimento automático abaixo de cinco segundos ou dê a ele um controle de pausa.
5. Dê nome à logo uma vez só para leitores de tela.

## O que pedir a quem desenha a sua logo

- Um arquivo mestre em vetor em que cada parte que vai se mexer seja uma forma própria com nome, e cada furo seja um recorte, não um remendo na cor de fundo.
- A pose de repouso da animação, que também é a logo estática.
- Uma seção de movimento no [manual de marca](https://dardo.studio/pt/blog/manual-de-marca/): durações, curvas de aceleração, o que se repete e o que nunca se mexe.
- Uma versão para movimento reduzido, quase sempre a logo parada.
- Endereços de arquivo versionados para a web. O /logo-mark.svg da Gissi ficava um dia em cache, então quem tinha visto a marca anterior continuou vendo-a na barra de navegação depois da troca; em 23 de outubro o endereço passou a levar um hash do conteúdo, como o do .riv já levava. O nosso [checklist de lançamento de rebranding](https://dardo.studio/pt/blog/checklist-lancamento-rebranding/) cobre os outros arquivos que pedem o mesmo cuidado.

Se a logo ainda vai ser encomendada, [quanto custa uma identidade visual](https://dardo.studio/pt/blog/quanto-custa-uma-identidade-visual/) compara preços publicados; peça os arquivos para animação no mesmo briefing, porque separar as formas depois obriga a redesenhar.

## Onde a Dardo entra

Desenhamos logos no serviço de [criação de logotipo](https://dardo.studio/pt/servicos/criacao-de-logotipo/), construímos identidades completas em [criação de marca](https://dardo.studio/pt/servicos/criacao-de-marca/) e fazemos o trabalho de animação e WebGL em sites no [desenvolvimento criativo](https://dardo.studio/pt/servicos/desenvolvimento-criativo/). Se a sua logo precisa se mexer, [conte para a gente](https://dardo.studio/pt/contato/) onde ela vai ficar e o que deve fazer.

## Perguntas frequentes

**Uma logo animada deixa o site mais lento?**

O arquivo da animação raramente; o player pode. Em gissimusic.com, em 29 de outubro de 2026, o arquivo da logo em Rive transferiu cerca de 4,5 KB e o runtime do Rive cerca de 378 KB, contra 2,3 KB do SVG estático. Mostre o SVG primeiro, carregue a animação depois do conteúdo principal e pule o runtime com movimento reduzido e Save-Data.

**O que é mais leve, Rive ou Lottie?**

Depende do player. Com gzip, como estavam publicados em 29 de outubro de 2026: a versão completa do lottie-web tem 76 KB de JavaScript, o pacote web mais leve do Rive traz 339 KB de WebAssembly e o player do dotLottie cerca de 496 KB. Os arquivos de animação costumam ser pequenos nos dois casos; o .riv da Gissi tem 4 KB. Para uma logo sozinha, CSS sobre um SVG é mais leve que os dois.

**Posso usar um GIF animado como logo?**

Pode, mas um vídeo ou um SVG animado pesam menos. No exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB. Além disso, o GIF é um bitmap, então não fica nítido em todos os tamanhos como um SVG.

**Uma logo animada precisa de botão de pausa?**

Só se ela se mexe sozinha por mais de cinco segundos junto com outro conteúdo: é o critério 2.2.2 da WCAG 2.2, de nível A. Uma entrada curta que termina e fica parada não precisa. Um loop que continua rodando precisa, a menos que você o pare antes dos cinco segundos.

**O que deve ver quem prefere movimento reduzido?**

Quase sempre, a logo parada. Confira a media query prefers-reduced-motion antes de carregar qualquer player. No site da Gissi, esses visitantes não baixam nem o runtime do Rive nem o arquivo da animação e veem o SVG estático na hora. Nem o Rive nem o Lottie aplicam essa preferência por você.

**Uma logo animada afeta o Largest Contentful Paint?**

O canvas não está entre os elementos que o LCP considera, então uma logo em Rive não será o elemento LCP; uma logo SVG num <img> ou um <video> podem ser. Nos nossos testes na página inicial da Gissi, o LCP foi a logo SVG da barra de navegação no desktop e a imagem de fundo do hero num celular com conexão limitada. O download do runtime ainda disputa a conexão com eles.

**A logo da barra de navegação também deve ser animada?**

No site da Gissi ela não é: a barra de navegação e o rodapé usam o SVG estático, e só o hero da página inicial é animado. Movimento no cabeçalho acompanha o visitante em todas as páginas, então reservamos a animação para um lugar onde a logo tem espaço.

**Dá para animar a minha logo atual ou é preciso redesenhar?**

Ela precisa estar em vetor, com cada parte que se mexe como uma forma separada. Se você só tem uma imagem chapada, ela é redesenhada primeiro: a logo da Gissi chegou como uma imagem de 1619 × 971 e redesenhamos cada letra como um contorno vetorial antes de animar.

## Fontes e leituras adicionais

Fontes desta página, com mais detalhes dos publicadores originais.

- [Rive Docs: Canvas vs WebGL, como escolher o pacote web](https://rive.app/docs/runtimes/web/canvas-vs-webgl) · rive.app
- [Rive Docs: runtime web (JS)](https://rive.app/docs/runtimes/web/web-js) · rive.app
- [Rive Docs: preload do WASM](https://rive.app/docs/runtimes/web/preloading-wasm) · rive.app
- [Rive Docs: parâmetros do Rive (stopRendering, semântica)](https://rive.app/docs/runtimes/web/rive-parameters) · rive.app
- [Rive Docs: máquinas de estado](https://rive.app/docs/editor/state-machine/state-machine) · rive.app
- [Rive Docs: listeners](https://rive.app/docs/editor/state-machine/listeners) · rive.app
- [Rive Docs: movimento reduzido](https://rive.app/docs/editor/accessibility/reduced-motion) · rive.app
- [Rive Docs: formato de arquivo .riv](https://rive.app/docs/runtimes/advanced-topic/format) · rive.app
- [Airbnb: lottie-web no GitHub](https://github.com/airbnb/lottie-web) · github.com
- [LottieFiles: dotlottie-web no GitHub](https://github.com/LottieFiles/dotlottie-web/tree/main/packages/web) · github.com
- [dotLottie: o formato de arquivo .lottie](https://dotlottie.io/) · dotlottie.io
- [W3C: Understanding SC 2.2.2 Pausar, parar, ocultar](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) · w3.org
- [W3C: Understanding SC 2.3.3 Animação a partir de interações](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) · w3.org
- [W3C: técnica C39, a media query prefers-reduced-motion](https://www.w3.org/WAI/WCAG22/Techniques/css/C39) · w3.org
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) · developer.mozilla.org
- [MDN: usando animações CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) · developer.mozilla.org
- [MDN: transform-box](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform-box) · developer.mozilla.org
- [MDN: SVG como imagem](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG%5Fas%5Fan%5Fimage) · developer.mozilla.org
- [MDN: o elemento canvas (acessibilidade)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) · developer.mozilla.org
- [MDN: guia de autoplay de mídia](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay) · developer.mozilla.org
- [web.dev: Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) · web.dev
- [web.dev: animações CSS de alto desempenho](https://web.dev/articles/animations-guide) · web.dev
- [web.dev: troque GIFs animados por vídeo](https://web.dev/articles/replace-gifs-with-videos) · web.dev
- [Página inicial da Gissi Music Academy (medida em 29 de outubro de 2026)](https://gissimusic.com/) · gissimusic.com
- [jsDelivr: arquivos do player lottie-web 5.13.0](https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/) · cdn.jsdelivr.net
- [jsDelivr: arquivos do @lottiefiles/dotlottie-web 0.81.0](https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/dist/) · cdn.jsdelivr.net
- [jsDelivr: arquivos do @rive-app/canvas-lite 2.49.0](https://cdn.jsdelivr.net/npm/@rive-app/canvas-lite@2.49.0/) · cdn.jsdelivr.net
- [jsDelivr: arquivos do @rive-app/webgl2 2.49.0](https://cdn.jsdelivr.net/npm/@rive-app/webgl2@2.49.0/) · cdn.jsdelivr.net

[Nicolás Cerón](https://dardo.studio/pt/nicolas-ceron/)

Nicolás Cerón é o fundador da Dardo, um estúdio de marca, design e desenvolvimento web em Bogotá, na Colômbia.

## Artigos relacionados

- [**Quanto custa uma identidade visual em 2026? Preços de estúdios, marketplaces e registro no INPI**Preços publicados de logo e identidade visual no Brasil, de R$ 69,99 a R$ 13.000, o que cada pacote inclui e quanto custa registrar a marca no INPI.](https://dardo.studio/pt/blog/quanto-custa-uma-identidade-visual/)
- [**Manual de marca: o que incluir, seção por seção, com o exemplo do Governo Federal, um checklist e um modelo**Logo com área de proteção e tamanho mínimo, cores para tela e impressão com contraste testado, fontes licenciadas, tom de voz com exemplos e um responsável.](https://dardo.studio/pt/blog/manual-de-marca/)
- [**Registro de marca no INPI em 2026: passo a passo, taxas atuais, prazos e motivos de indeferimento**Os dez passos do registro de marca no INPI, as taxas em vigor (R$ 880 por classe, R$ 440 com desconto), os prazos de 60 dias e o que leva ao indeferimento.](https://dardo.studio/pt/blog/registro-de-marca-inpi/)
- [**Sites 3D: quando valem a pena e como mantê-los rápidos**Quando um site 3D vale a pena, quando vídeo ou imagens funcionam melhor e como mantivemos rápidos, acessíveis e usáveis os dez mundos 3D do Janus Observatory.](https://dardo.studio/pt/blog/sites-3d/)

## Continue explorando.

- [Serviço · **Criação de logotipo: uma marca que funciona em qualquer lugar**](https://dardo.studio/pt/servicos/criacao-de-logotipo/)

- [Seu projeto · **Vamos conversar**](https://dardo.studio/pt/contato/)