Importar SVG no Rive: prepare arte editável para animação

Você pode importar um SVG no Rive arrastando o arquivo para o editor ou usando o painel Assets. O Rive converte a arte em objetos vetoriais nativos editáveis. O resultado importado precisa de duas verificações: sua aparência está correta e você consegue selecionar as partes que pretende animar? A documentação de SVG do Rive explica a conversão e seus limites.

Comece pelo arquivo vetorial original quando o tiver. Se a imagem original é PNG ou JPG, escolha entre mantê-la como imagem, desenhar as formas necessárias ou traçá-la em SVG primeiro. Traçar é útil para recuperar contornos editáveis; você ainda precisará organizá-los para animação.

O que acontece com um SVG dentro do Rive?

Após importar, você trabalha com objetos do Rive. O SVG original não é incluído no arquivo .riv exportado, e os runtimes do Rive atualmente não convertem recursos SVG em tempo de execução. Conclua a preparação e a importação SVG no editor antes de exportar o arquivo Rive. O comportamento de exportação do Rive descreve esse limite.

A distinção também importa ao selecionar arte. Uma camada de forma controla seu preenchimento e contorno, enquanto o traçado ou os traçados dentro dela definem a geometria. Expanda uma forma na Hierarchy para inspecionar esses traçados. Selecionar um grupo pai pode mover a ilustração inteira mesmo quando seus filhos são editáveis. O guia de formas e traçados do Rive mostra essa estrutura.

Se o próprio SVG original não se separar, use o diagnóstico de objetos SVG e desagrupamento para identificar um grupo, traçado composto ou imagem incorporada antes de alterá-lo.

Prepare as partes antes de exportar

Anote os movimentos desejados antes de combinar ou achatar a arte. Considere uma luminária de mesa: a cúpula deve inclinar, o braço deve pender e a base deve ficar parada. Esses movimentos sugerem peças separadas que você pode selecionar e organizar.

O mesmo método serve para pálpebras de um personagem, uma mão acenando ou um elemento de logo: nomeie o movimento e confira se o arquivo original contém a peça necessária para realizá-lo.

Planeje as partes móveis

Nomeie as partes significativas no documento original e preserve uma cópia mestre. Mantenha detalhes relacionados juntos quando precisarem se mover juntos. Evite unir uma ilustração inteira em um traçado apenas para encurtar a lista de objetos.

Depois de importar, use grupos do Rive para organizar essas peças e dar a elas controles de transformação separados. O Rive permite criar um grupo e colocar objetos dentro dele na Hierarchy. Também é possível agrupar uma seleção com Command+G no macOS ou Ctrl+G no Windows. A documentação de grupos do Rive aborda esses controles.

Importe de um SVG, Figma ou Illustrator

Um arquivo SVG salvo

1. Salve uma exportação SVG separada para manter o arquivo mestre editável disponível.
2. Arraste o arquivo para o Rive ou clique em + no painel Assets e escolha o arquivo para importar.
3. Posicione a arte onde precisa e expanda sua estrutura na Hierarchy.
4. Selecione uma parte pequena, altere seu preenchimento e desfaça a mudança. Confira se apenas a região desejada mudou.

As duas rotas de importação são documentadas na visão geral de Assets do Rive. Uma importação bem-sucedida é o início da verificação de edição.

Figma

Use Copy as SVG para a arte desejada no Figma e cole no editor do Rive. Confira as formas importadas e a aparência antes de copiar o restante de uma composição grande. Essa é a rota de importação do Figma documentada pelo Rive.

Illustrator

Defina o estilo SVG como Presentation Attributes. O Rive documenta rótulos ligeiramente diferentes para as rotas de exportação do Illustrator:

• Save As: em SVG Options, defina CSS Properties como Presentation Attributes.
• Export As: em SVG Options, defina Styling como Presentation Attributes.
• Copiar e colar diretamente: confira as opções de estilo SVG de Export As, pois o Illustrator usa essas configurações nessa rota.

Desative também Preserve Illustrator Editing Capabilities no SVG de entrega. Mantenha o arquivo mestre do Illustrator separado. O Rive alerta que essa opção adiciona dados extras do Illustrator, aumenta o tamanho do arquivo e pode incluir dados não reconhecidos pelo importador. As orientações de Illustrator do Rive são a fonte dessas configurações.

Relacione o sintoma de importação à primeira verificação

O Rive aceita gradientes lineares e radiais, mas não reproduz todos os recursos SVG. A tabela abaixo transforma sua lista de recursos não aceitos em uma ordem de reparo. A coluna da primeira verificação é uma sugestão de diagnóstico, não uma garantia sobre seu arquivo.

Se um SVG do Illustrator aparecer preto, comece pela configuração de exportação Presentation Attributes e inspecione a pintura da forma afetada. Arte preta sozinha não identifica a causa. Não deve ser confundida com o branco padrão documentado pelo Rive para inherit.

Para conteúdo de imagem ausente, o guia de raster incorporado em SVG explica como conferir se o arquivo contém traçados reais ou uma figura dentro de um contêiner SVG. O Rive pode importar JPEG, PNG e WebP como recursos de imagem próprios, segundo sua lista de tipos de recurso. Manter um fundo texturizado como raster separado pode ser a escolha certa.

Se a importação nunca termina

Experimente um SVG pequeno e simples na mesma sessão. Se ele também falhar, salve o trabalho e reinicie o editor antes de reconstruir a arte. Se apenas um arquivo falhar, isole seus grupos em cópias de exportação separadas até encontrar a seção afetada. Isso separa um problema de sessão de um problema específico do arquivo; não estabelece um limite universal de complexidade.

Quando o PerfectVector faz parte desse fluxo

O PerfectVector é útil quando a arte original é raster e você precisa de contornos vetoriais editáveis para o Rive. Para uma ilustração PNG ou JPG plana, converta a imagem em traçados SVG e inspecione o resultado em um editor vetorial antes de importar. Confira silhueta, pequenos espaços e limites entre partes que precisam de movimento separado. Um traçado reconstrói regiões visíveis; não recupera os nomes originais de camadas nem decide onde ficam as articulações da animação.

Volte ao exemplo da luminária. Se braço e base viraram uma forma conectada única, separe ou redesenhe esse limite. Se uma peça móvel revelar uma área oculta na imagem de origem, desenhe você mesmo a área ausente. Faça isso antes de construir a animação em torno da estrutura importada.

Use o SVG original quando ele já contém traçados adequados. Use ferramentas de desenho nativas para poucas partes geométricas simples. Mantenha fotografias e texturas pintadas como recursos raster quando sua aparência importar mais que contornos editáveis. Nossa visão geral de vetorização de imagens explica as vantagens e limitações da escolha da imagem original; o guia de traçado do Adobe Animate aborda outro fluxo se o Animate for seu destino.

Confira um movimento antes de criar a animação

Em uma cópia de trabalho, selecione a cúpula e gire-a um pouco. Confirme que os detalhes desejados a acompanham enquanto a base fica parada. Desfaça, selecione o braço e repita. Se as partes erradas se moverem, inspecione a organização de pais e filhos antes de editar mais traçados.

Confira também o pivô. No Rive, filhos herdam as transformações de um pai, e a origem determina onde ocorre rotação ou escala. Freeze permite reposicionar um pai sem mover seus filhos; ative ou desative com Y e desligue após ajustar a origem. Siga o guia de Freeze e Origin do Rive para os controles.

Antes de prosseguir com a animação, confirme que:

• cada peça necessária pode ser selecionada de forma independente;
• preenchimentos, contornos, furos e gradientes ainda correspondem à aparência desejada;
• rasters importados separadamente estão presentes onde você escolheu mantê-los;
• o movimento não expõe espaços acidentais ou arte oculta ausente;
• cada peça móvel gira ao redor da articulação desejada;
• o arquivo original e uma cópia de importação limpa continuam disponíveis.

Perguntas frequentes

Importar um SVG o torna editável no Rive? Sim, para os recursos SVG aceitos pelo Rive. Expanda a arte importada na Hierarchy para selecionar a parte necessária. Se várias regiões ainda agirem como um objeto, inspecione seu agrupamento e estrutura de traçados.

Por que a imagem dentro do meu SVG desapareceu? O Rive ignora imagens incorporadas na importação SVG. Encontre o raster original e importe-o como recurso de imagem ou trace arte adequada em traçados quando precisar de contornos editáveis.

O Rive aceita gradientes SVG? Gradientes lineares e radiais são aceitos. Transformações de gradiente são ignoradas, então seu posicionamento pode precisar de ajuste após importar.

Traçar um PNG cria uma animação do Rive? Traçar pode criar geometria SVG de arte raster adequada. Você ainda precisa inspecionar e separar partes móveis, definir sua hierarquia e origens e construir a animação no Rive.

Fontes

1. Rive — SVG e recursos vetoriais — Conversão em objetos nativos, importação de Illustrator e Figma, comportamento de exportação para runtime e recursos SVG não aceitos.
2. Rive — Assets — Controles de importação de arquivos e recursos de imagem raster separados.
3. Rive — Visão geral de formas e traçados — Estilo das formas e geometria dos traçados dentro de uma camada de forma.
4. Rive — Grupos — Organização de partes e controles de agrupamento na Hierarchy.
5. Rive — Freeze e Origin — Transformações de pais e filhos e reposicionamento de uma origem sem mover a arte filha.

---

Se a arte começa como PNG ou JPG e precisa de contornos editáveis, prepare um SVG com o PerfectVector. Inspecione as partes traçadas, importe o arquivo no Rive e teste um movimento independente antes de construir o restante da animação.