SVG para Rive: importe um SVG e anime
Por equipe Charmotion · Atualizado em
Para animar um SVG no Rive, arraste o arquivo para o editor: o Rive o converte em objetos vetoriais nativos em vez de mantê-lo como arquivo incorporado, então cada forma continua editável. Depois agrupe as formas em partes do corpo, defina o pivô de cada grupo, adicione bones onde as partes devem dobrar, crie os keyframes das animações e conecte tudo em uma state machine.
Principais pontos
- O Rive converte SVGs importados em objetos vetoriais editáveis do Rive.
- A estrutura de camadas do SVG vira a estrutura do seu rig, então nomeie e agrupe as camadas na ferramenta de design antes de exportar.
- Converta contornos em formas e expanda textos se a importação sair estranha; achate os efeitos que o Rive não suporta.
- Personagens vetoriais deixam o .riv pequeno e nítido em qualquer tamanho, por isso a arte plana é o melhor ponto de partida.
Já tem um personagem ou logo? Veja seu personagem em telas reais de app: telas de splash, onboarding, carregamento e estado vazio. É grátis, roda no navegador e não envia nada.
O Rive aceita importar SVG?
Sim. O Rive inclui o SVG entre os formatos que podem ser importados e observa que os SVGs são "convertidos em objetos vetoriais do Rive em vez de exportados como arquivos separados". Essa é a principal vantagem em relação a um PNG: você pode selecionar qualquer caminho, alterar seus pontos, mudar a cor e vinculá-lo diretamente aos bones.
Como preparar o SVG?
- Agrupe por parte do corpo. Cabeça, olhos, boca, corpo, braço esquerdo, braço direito, acessórios. Cada grupo vira algo que você pode girar de forma independente.
- Nomeie as camadas. Os nomes são levados para a hierarquia e evitam adivinhação depois.
- Desenhe o que fica escondido. Se um braço vai balançar, o corpo atrás dele precisa estar completo, senão aparece um buraco.
- Mantenha simples. Converta traços complexos em contornos, transforme textos em formas e achate filtros e efeitos de mesclagem que não correspondem a caminhos vetoriais.
Como fazer o rig de um SVG importado?
Defina a origem de cada grupo no ponto em que ele deve girar (o ombro para um braço, o pescoço para a cabeça). Para partes rígidas, basta vincular a um bone. Para partes que devem dobrar, vincule os vértices do caminho a uma cadeia de bones; o Rive permite vincular vértices e alças Bézier com influência ponderada. Depois, crie os keyframes nas timelines e monte a state machine, como explicado no guia de PNG para Rive.
Por que meu SVG aparece errado no Rive?
- Gradientes ou efeitos faltando: filtros SVG, máscaras e alguns modos de mesclagem não têm equivalente direto; recrie-os com os preenchimentos do próprio Rive ou achate-os na ferramenta de design.
- Milhares de caminhos minúsculos: SVGs vetorizados automaticamente costumam ser importados como centenas de formas. Limpe a vetorização antes; um arquivo mais leve anima e renderiza melhor.
- Tudo em um único grupo: reorganize os grupos antes do rigging, ou a hierarquia vai atrapalhar você em cada keyframe.
Posso ter um .riv com rig pronto sem fazer isso eu mesmo?
Se você prefere não fazer o rig nem os keyframes, o Charmotion gera o .riv a partir de uma imagem do seu personagem: ele vetoriza a arte plana em partes, define os pivôs, faz o rig, cria os keyframes de 17 animações e configura tanto um view model com Data Binding quanto uma state machine clássica. Envie uma exportação do SVG em PNG, JPEG ou WebP. Veja uma prévia com o seu personagem antes de escolher um plano.
Perguntas frequentes
O Rive mantém meu SVG como vetor?
Sim. Os SVGs importados viram objetos vetoriais nativos do Rive, que você pode editar, em vez de uma imagem incorporada.
Posso exportar uma animação do Rive de volta para SVG?
Não como SVG animado. O Rive exporta .riv para os seus runtimes, além de vídeo e sequências de imagens para outros usos.
Devo vetorizar meu PNG em SVG antes de usar o Rive?
Para arte plana com cores sólidas, sim: vetores animam com mais flexibilidade e mantêm o arquivo pequeno. Para arte detalhada ou com sombreamento, mantenha o PNG e use malhas.
Respostas rápidas deste guia
Fontes
- Importing assets, Rive
- Bones, Rive
- Meshes, Rive
- State Machine, Rive
- Exporting for video and static design, Rive