Importar SVG no Unity: prepare arte para UI Toolkit ou sprites

A importação SVG no Unity começa com duas decisões: qual versão do editor você usa e onde a arte aparecerá. O Unity 6.3 inclui importação SVG para UI Toolkit e Texture2D. Importações diretas de SVG como recursos Sprite ou uGUI usam o pacote Vector Graphics; editores anteriores usam a linha antiga do pacote. O Unity documenta essa divisão no guia de versões do Vector Graphics.

Se já tem um SVG editável, prepare esse arquivo para o importador. Se o único arquivo original é PNG ou JPG, trace apenas quando precisar de formas vetoriais. Uma textura ou sprite de pixel art pode continuar raster.

Teste um ícone representativo para separar problemas da arte original de problemas de importação e exibição no Unity antes de processar um conjunto inteiro.

Para geometria de cena em outro mecanismo, use as verificações de importação SVG no Unreal Engine para inspecionar formas de origem do Motion Design, aberturas e peças separadas.

Escolha a rota de importação antes de editar a arte

Use o componente de destino para escolher a rota. Um recurso que funciona em um layout UI Toolkit não pertence automaticamente a um campo Sprite Renderer.

A tabela segue os requisitos do pacote do Unity. Fixe as versões de editor e pacote usadas pelo projeto. Instruções para Unity 2018 ou um importador de prévia 2.0 podem descrever opções diferentes de um projeto atual 6.3.

Escolha primeiro o destino

Mantenha um pequeno teste de importação junto da arte

Escolha um ícone com uma curva, um furo interno e qualquer efeito de pintura necessário ao conjunto. Mantenha o SVG original ao lado de uma versão simples feita de formas sólidas. Se a versão simples importar corretamente, investigue a arte complexa antes de mudar o projeto inteiro.

Prepare um SVG que o importador possa reproduzir

Abra o arquivo original em um editor vetorial e inspecione os objetos reais. Preserve o arquivo mestre original e faça uma exportação de entrega separada para o Unity.

Confirme que a arte contém traçados

Um SVG pode conter um bitmap por meio de um elemento <image>; a extensão sozinha não estabelece que a arte seja geometria vetorial. A especificação de conteúdo incorporado do W3C documenta essa distinção. Selecione parte da arte em um editor e inspecione seus objetos ou marcação. Use o diagnóstico de raster incorporado se for um retângulo de imagem único.

Se o arquivo vetorial original existe, exporte-o novamente. Traçar um PNG exportado desse arquivo mestre acrescenta trabalho de reconstrução e pode mudar a silhueta. Para uma família de ícones, combine primeiro tela, espaçamento interno e peso visual; o guia de preparação SVG para kits de interface aborda essas decisões do conjunto.

Substitua recursos não aceitos de forma deliberada

O importador nativo do Unity aceita parte de SVG 1.1. Suas exclusões documentadas incluem texto editável, máscaras de pixels, filtros, interação e animação. Portanto, uma prévia no navegador pode parecer correta enquanto o resultado no Unity difere. Veja as limitações SVG do Unity.

Prepare a cópia de entrega conforme as necessidades da arte:

• Converta letras decorativas em contornos. Mantenha rótulos de interface como texto na interface quando precisarem de edição ou localização.
• Reconstrua uma sombra ou brilho necessário com um efeito aceito pelo destino ou mantenha essa arte raster.
• Inspecione máscaras separadamente dos traçados de recorte. Uma máscara suave de pixels e um recorte geométrico são construções diferentes.
• Planeje a animação no Unity em vez de depender de animação incorporada no SVG.

Não achate todo gradiente só porque um filtro não é aceito. Teste o efeito que o design realmente usa. Se uma insígnia complexa falhar, exporte uma versão de preenchimento sólido e adicione seus efeitos de volta, um por vez. Isso isola o recurso que altera a aparência.

Remova complexidade acidental

Exclua pontinhos soltos, duplicações ocultas e retângulos de fundo que não pertencem ao ícone. Simplifique uma curva obviamente ruidosa apenas comparando com a arte original. Um pequeno furo que fecha durante a limpeza é uma edição malsucedida, mesmo se o arquivo ficar menor.

Não existe uma meta universal útil de nós para toda arte de jogo. Uma seta geométrica e um personagem desenhado à mão precisam de quantidades diferentes de detalhe. O guia de limpeza de nós SVG ajuda a decidir quais pontos carregam informação de forma.

Importe no UI Toolkit do Unity 6.3 ou posterior

Comece por um SVG de entrega cuja silhueta e efeitos já foram revisados.

1. Adicione o SVG à pasta Assets do projeto e selecione-o.
2. Defina Generated Asset Type como UI Toolkit Vector Image no Inspector.
3. Aplique as configurações de importação e use a imagem vetorial resultante no elemento UI Toolkit desejado.
4. Visualize o layout real nos menores e maiores tamanhos de exibição desejados.

O Unity documenta a escolha nativa de recurso em Trabalhar com gráficos vetoriais. Se o consumidor exige Texture2D, selecione essa saída e revise a textura resultante no tamanho pretendido.

Para UI Toolkit, comece pelas configurações básicas recomendadas de tesselação. Target Resolution e Zoom Factor permitem ao importador configurar a subdivisão de curvas para as condições de exibição desejadas. O Unity recomenda usar a menor resolução de destino que forneça resultados satisfatórios. Suas configurações de importação de imagens explicam os controles.

Mantenha duas revisões separadas: se o SVG descreve a forma certa e se o recurso importado exibe bem essa forma. Aumentar a tesselação não restaura um furo que desapareceu na exportação de origem.

Importe para Sprite Renderer ou uGUI

Instale o pacote com.unity.vectorgraphics compatível pelo Package Manager quando o destino precisar do suporte dele a Sprite ou uGUI. Escolha o recurso gerado correspondente ao componente e confirme que ele o aceita. A documentação atual do pacote distingue esses tipos de importação da rota UI Toolkit integrada.

Para Sprite Renderer, verifique o tamanho do objeto na cena e seu pivô antes de copiá-lo para prefabs. Para uGUI, verifique o fluxo SVGImage usado pelo projeto. Um fluxo comum de sprite raster continua sendo uma alternativa quando a arte já aparece corretamente nas dimensões necessárias.

O pacote antigo 2.0 documenta unidades SVG por unidade de cena, pivôs de sprites e controles de tesselação. Também identifica o pacote como experimental e desaconselha seu uso em produção. Equipes que mantêm essa rota devem revisar o manual do pacote 2.0 junto das restrições do projeto antes de adicioná-lo.

Se está atualizando um projeto existente, faça o teste de importação em uma cópia ou branch com controle de versão. Compare tipos de recursos gerados e referências nos prefabs e cenas reais. Não use uma prévia de miniatura bem-sucedida como único teste de migração nem aplique uma edição em massa de .meta de um fórum antigo sem reproduzir seu problema específico.

Diagnostique a primeira diferença visível

Use um registro curto de teste para cada recurso representativo: arquivo de origem, versões do editor e pacote, componente de destino, tamanho esperado de exibição e primeira divergência visível.

Por exemplo, suponha que uma insígnia de estrela importe, mas seu furo central desapareça. Primeiro abra o SVG de entrega e confirme que o furo existe ali. Se existir, compare uma exportação simplificada da insígnia no Unity. Se o furo sobreviver nessa versão, inspecione as formas sobrepostas, a construção de preenchimento ou a máscara da insígnia original. Traçar novamente a imagem original só é útil se a própria geometria dos traçados estiver errada.

Teste o recurso aceito em uma compilação de destino além do editor. Registre se permanece legível no menor tamanho, se cores e transparência correspondem e se referências de cenas ou prefabs sobrevivem a uma nova importação. Decisões de desempenho exigem medir sua própria cena; uma extensão SVG não é uma medição de desempenho.

Como isso funciona com o PerfectVector

O PerfectVector entra antes da importação no Unity quando a única arte original adequada é raster e você precisa de formas editáveis. Envie um PNG ou JPG de cores chapadas ao conversor de imagem para vetor do PerfectVector, compare a silhueta e os furos traçados com o original e inspecione o SVG baixado em um editor vetorial antes de importar no Unity.

Use o mesmo ícone representativo em toda a entrega. Aceite o traçado apenas quando puder editar suas regiões desejadas, os espaços negativos continuarem abertos e a limpeza não tiver distorcido a forma. Aplique então o teste de destino do Unity acima.

Mantenha fotografia, textura, brilho suave ou sprite intencional de pixel art como raster quando isso preservar a aparência desejada. Para um símbolo geométrico simples, desenhar manualmente pode ser mais fácil de controlar que traçar. O PerfectVector prepara a geometria SVG de origem; não altera o conjunto de recursos aceitos pelo Unity nem valida sua renderização em execução. Se a distinção de formato não é familiar, comece por o que contém um arquivo SVG.

Perguntas frequentes

O Unity 6 precisa do pacote Vector Graphics? A resposta depende da versão secundária e do destino. O Unity 6.3 tem importações SVG integradas para UI Toolkit e Texture2D. Importações Sprite e uGUI usam o pacote de prévia 3.0. Versões anteriores do Unity usam a rota do pacote de prévia 2.0 compatível.

Mudar a extensão de PNG para SVG cria um sprite vetorial? Não. Renomear um arquivo não traça seus pixels. Use o arquivo vetorial original, desenhe as formas ou trace arte raster adequada e inspecione os traçados resultantes antes de importar no Unity.

Traçar pode corrigir um SVG que o Unity importa incorretamente? Somente quando a geometria de origem precisa de reconstrução. Se o SVG contém traçados corretos, mas o tipo de recurso gerado errado ou um efeito não aceito causa o problema, corrija primeiro essa decisão de importação ou exportação.

Fontes

1. Unity — Guia do pacote Vector Graphics 3.0 — Define a divisão por versão do editor e as rotas integradas versus pacote Sprite/uGUI.
2. Unity — Trabalhar com gráficos vetoriais — Documenta escolhas de recursos nativos e recursos SVG não aceitos.
3. Unity — Configurações de importação de imagens — Explica configurações de imagem vetorial UI Toolkit e controles de tesselação.
4. Unity — Manual do pacote Vector Graphics 2.0 — Aborda o importador antigo, controles de unidades de cena e pivô e seu status experimental.
5. W3C — Conteúdo incorporado SVG — Estabelece que um SVG pode incluir conteúdo de imagem raster.

---

Se seu recurso do Unity começa como PNG ou JPG de cores chapadas e precisa de traçados editáveis, converta sua imagem com o PerfectVector. Inspecione silhueta, furos e formas de fundo indesejadas e teste o SVG no componente do Unity e nos tamanhos de exibição que pretende entregar.