PNG para VectorDrawable Android: confira a importação

O Android Studio não traça um PNG como traçados vetoriais. Seu Vector Asset Studio importa arquivos SVG ou PSD e converte a geometria compatível em XML VectorDrawable. Assim, um fluxo confiável de PNG tem duas etapas: traçar os pixels como um SVG real e depois importar esse SVG no Android Studio.

Um conversor direto de PNG para VectorDrawable pode combinar as duas etapas. Isso pode ser conveniente para um ícone simples, mas as mesmas verificações continuam necessárias. Confirme que a saída contém traçados, corresponde à imagem original, usa o viewport pretendido e evita recursos que o importador Android não consegue representar.

Para uma interface Flutter, siga o fluxo de recursos SVG para Flutter. Ele declara e renderiza o SVG com flutter_svg, em vez de convertê-lo em XML VectorDrawable nativo do Android.

Para um projeto .NET MAUI, use a lista de recursos de imagem do MAUI para conferir imagem original, saída de compilação e tamanho de exibição. Siga o pipeline de imagens desse projeto antes de aplicar as etapas de importação nativa do Android VectorDrawable.

O fluxo curto

1. Comece com um PNG limpo, parecido com um ícone, em vez de fotografia ou textura.
2. Trace-o como SVG e confirme que o arquivo contém traçados editáveis, não um PNG incorporado.
3. Simplifique formas soltas e nós em excesso sem alterar a silhueta.
4. Importe o SVG pelo Vector Asset Studio do Android Studio.
5. Examine o XML gerado quanto a viewport, traçados, preenchimentos, contornos, gradientes e recortes.
6. Teste o drawable no tamanho real na versão mais antiga do Android que seu aplicativo suporta.

Escolha entre um conversor direto e o caminho via SVG

Os dois caminhos chegam ao mesmo destino, mas oferecem pontos de verificação diferentes.

O caminho com SVG intermediário costuma ser mais fácil de conferir. Você pode comparar o traçado com o PNG, examinar formas individuais, reparar vazados e reduzir excesso de traçados antes de o Android Studio traduzir o arquivo novamente.

Conversores diretos não são automaticamente errados. Por exemplo, o SVG2Vector atualmente anuncia conversão de PNG para VectorDrawable junto de SVG e outras entradas. Trate seu XML como candidato, não como recurso pronto: visualize no Android Studio, examine os traçados e faça as mesmas verificações em dispositivos descritas abaixo (SVG2Vector).

Etapa 1: transforme o PNG em traçados SVG reais

Comece com a imagem original mais limpa disponível. Ícones chapados com bordas claras e uma paleta restrita são bons candidatos. Fotografias, sombras suaves, brilhos e textura podem produzir muitas formas pequenas sem se tornar recursos Android úteis.

Use a resolução original do PNG. Ampliar um ícone desfocado acrescenta pixels, não informações perdidas das bordas. Remova qualquer retângulo de fundo acidental e decida se o recurso pretendido é monocromático, multicolorido ou baseado em gradiente antes de traçar.

Trace os pixels

Envie a imagem original ao conversor de PNG para SVG do PerfectVector ou use outra ferramenta de traçado que permita examinar o resultado. Se a imagem original está no celular e você precisa primeiro de um SVG padrão, siga o fluxo de SVG no celular Android. Compare o SVG com o PNG no tamanho pretendido da interface, abra-o em um editor vetorial e selecione as formas.

Verifique:

• uma silhueta externa limpa;
• vazados e espaços negativos preservados;
• a quantidade esperada de regiões de cor;
• ausência de manchas isoladas ou caixa de fundo;
• curvas suaves sem cadeias densas de pontos;
• um viewBox que enquadra a arte corretamente.

A extensão .svg não prova que houve traçado. O SVG pode conter conteúdo raster por um elemento <image>, conforme a especificação de conteúdo incorporado do W3C. Se a arte é selecionada como um único retângulo ou revela blocos com bastante ampliação, use o diagnóstico de raster incorporado antes de passar ao Android Studio.

Simplifique apenas onde ajuda

A complexidade dos traçados importa porque o Android precisa interpretar e desenhar a geometria gerada. Não há uma meta universal de nós. Uma curva simples com dezenas de pontos muito próximos merece investigação; uma borda ilustrada irregular pode realmente precisar de mais.

Remova fragmentos isolados e simplifique cadeias óbvias de pontos enquanto compara com a imagem original. Se a limpeza alterar cantos ou fechar pequenos vazados, desfaça-a. O guia de SVGs com nós demais explica como distinguir detalhes úteis de excesso de traçados.

Duas conversões, três verificações

Etapa 2: importe o SVG no Android Studio

O fluxo atual do Vector Asset Studio do Android aceita um arquivo SVG ou PSD local, exibe uma prévia e gera um drawable vetorial XML (Android Developers).

1. Na janela Project, clique com o botão direito na pasta res.
2. Escolha New > Vector Asset.
3. Selecione Local file (SVG, PSD) como tipo de recurso.
4. Escolha o SVG e revise a prévia em busca de erros ou mudanças visíveis.
5. Defina o nome do recurso e o tamanho pretendido.
6. Avance por Next, confirme o destino e selecione Finish.

O recurso gerado deve ficar nos recursos drawable do aplicativo como XML. Mantenha o SVG revisado como mestre editável. Se o recurso precisar de uma mudança visual depois, edite o SVG e gere o drawable novamente, em vez de manter à mão duas versões sem relação entre si.

O que sobrevive à importação de SVG para VectorDrawable?

O VectorDrawable não é um renderizador SVG completo. O Vector Asset Studio suporta um subconjunto definido; por isso, um SVG pode parecer correto no navegador e ainda mudar durante a importação.

Esses limites vêm da tabela atual de compatibilidade do Vector Asset Studio. O importador também informa que apenas contornos centralizados são compatíveis. Se a imagem original usa um contorno interno ou externo, expanda-o como forma preenchida ou redesenhe a borda antes de importar.

Gradientes exigem uma verificação extra de versão. A API VectorDrawable documenta valores de gradiente ou lista de estados de cor para fillColor e strokeColor a partir do nível de API 24. Ela também documenta as opções evenOdd e nonZero de fillType a partir do nível de API 24 (referência da API VectorDrawable). Se seu aplicativo suporta versões anteriores, teste o caminho exato de compatibilidade usado pela compilação, em vez de presumir que a prévia do Android Studio resolve a questão.

Leia o XML gerado antes de aceitá-lo

Você não precisa escrever XML VectorDrawable manualmente, mas uma revisão estrutural rápida identifica muitos problemas de importação.

Largura, altura e viewport

O elemento raiz <vector> separa tamanho de exibição de coordenadas de desenho:

• android:width e android:height são as dimensões padrão do drawable, geralmente em dp;
• android:viewportWidth e android:viewportHeight definem o espaço de coordenadas usado pelos traçados.

Alterar apenas largura e altura redimensiona a mesma geometria. Alterar o viewport muda como as coordenadas dos traçados se mapeiam para essa área de exibição. Se o ícone parece recortado, com espaço extra ou esticado, compare esses quatro valores com o viewBox do SVG e o tamanho pretendido do recurso.

Traçados e pintura

Cada <path> contém android:pathData, cujos comandos seguem a mesma sintaxe geral de traçados do atributo d do SVG. Revise fillColor, strokeColor, strokeWidth, extremidades, junções e fillType quando presentes.

Não otimize excluindo comandos de traçado que você não conhece. Compare primeiro a prévia com a imagem original e depois simplifique no SVG mestre, onde a forma continua mais fácil de examinar.

Grupos e recortes

Grupos podem carregar valores de translação, escala, rotação e pivô. Um <clip-path> limita a geometria visível. Se o resultado estiver deslocado ou uma região mascarada desaparecer, examine a hierarquia de grupos e compare-a com as transformações e a estrutura de recorte do SVG original.

Teste o drawable onde o aplicativo vai usá-lo

A prévia de importação prova que o Android Studio interpretou o arquivo. Ela não prova que o recurso está correto em execução.

Use esta lista de aceitação:

• O drawable corresponde à silhueta pretendida do PNG no tamanho normal da interface.
• Vazados, interiores de letras e regiões sobrepostas continuam corretos.
• Preenchimentos sólidos e contornos usam as cores pretendidas.
• Gradientes são renderizados corretamente na versão mais antiga suportada do Android.
• O viewport preserva o espaçamento e a proporção pretendidos.
• O ícone continua legível nos estados claro, escuro, desativado e com cor aplicada usados pelo aplicativo.
• O XML não contém fragmentos acidentais nem dados de traçado claramente excessivos.
• O recurso foi testado no componente real, não apenas na prévia de importação.
• O PNG original e o SVG mestre editável continuam arquivados.

Teste no tamanho real em dp em pelo menos um emulador ou dispositivo que represente sua versão mínima suportada. Confira também qualquer estado ou tema que altere a cor aplicada. Um traçado tecnicamente válido ainda pode falhar quando seu espaçamento, peso visual ou pressupostos de cor diferem do conjunto de ícones ao redor.

Se você está convertendo uma família inteira, aplique primeiro esse processo a uma amostra representativa. O fluxo de conversão para kit de interface aborda viewports compartilhados, tamanho óptico, comportamento de cor e verificações de entrega do conjunto.

Quando manter o PNG

O VectorDrawable funciona melhor para ícones e ilustrações simples. As orientações do Android alertam que gráficos detalhados, incluindo muitas imagens de abertura de aplicativos, podem ser mais bem atendidos por recursos raster. Elas também informam que o custo inicial de carregamento de um drawable vetorial pode ser maior que o de uma imagem raster e recomendam manter recursos vetoriais em 200 por 200 dp ou menos para evitar tempos longos de desenho (Android Developers).

Mantenha ou redesenhe o raster quando a imagem original depender de:

• detalhes fotográficos;
• textura suave, desfoque ou sombras complexas;
• muitas regiões minúsculas de cor;
• um efeito não compatível que define a aparência;
• geometria tão densa que o XML fica difícil de revisar e manter.

O objetivo não é substituir todo PNG. É usar VectorDrawable onde a geometria de traçados escalável torna o recurso Android menor, mais claro ou mais fácil de adaptar a temas sem transformar uma imagem detalhada em uma pilha custosa de traçados.

Como isso funciona com o PerfectVector

O PerfectVector cuida da primeira conversão. Para um ícone adequado, converta o PNG em SVG, compare as formas traçadas com a imagem original e baixe o SVG que quer manter como mestre editável. Depois importe esse arquivo pelo Vector Asset Studio e confira o XML gerado.

Avalie o resultado na cadeia inteira:

1. O traçado preservou a silhueta e os vazados da imagem original?
2. As formas SVG são editáveis e não contêm raster incorporado?
3. O Android Studio importa os preenchimentos, gradientes, recortes e transformações necessários?
4. O drawable é renderizado corretamente no tamanho real e no nível mínimo de API?

Um SVG limpo melhora a entrega, mas não faz recursos não compatíveis do Android funcionarem. Simplifique o desenho ou mantenha o PNG quando o destino não conseguir reproduzir fielmente a aparência.

Perguntas frequentes

O Android Studio converte um PNG diretamente em VectorDrawable? Não. O Vector Asset Studio atual importa arquivos SVG ou PSD locais, não PNG. Trace o PNG como um SVG real primeiro ou use um conversor direto e confira o XML resultante no Android Studio.

Um SVG é sempre um vetor real? Não. O SVG pode incorporar conteúdo raster com um elemento de imagem. Abra o arquivo em um editor vetorial ou examine sua marcação e confirme que a arte pretendida consiste em traçados ou outras formas vetoriais antes de importar.

Gradientes SVG funcionam no Android VectorDrawable? O Vector Asset Studio suporta gradientes lineares, radiais e angulares, mas o suporte em execução depende do XML gerado e da estratégia de versões Android. A API VectorDrawable documenta cores de preenchimento e contorno em gradiente a partir do nível de API 24; por isso, teste o recurso na versão mais antiga que seu aplicativo suporta.

Por que vazados, máscaras ou texto mudaram após importar? O importador suporta um subconjunto limitado de SVG. Regras de preenchimento exigem testes por versão, o recorte é limitado e texto não é compatível. Converta o texto necessário em contornos, simplifique estruturas de recorte e compare a prévia Android com o SVG antes de aceitar o drawable.

Todo PNG de um aplicativo Android deve virar XML VectorDrawable? Não. Ícones e ilustrações simples são os melhores candidatos. Mantenha fotografias, imagens com muita textura, efeitos complexos e arte detalhada demais como recursos raster, a menos que um redesenho deliberado produza geometria de traçados mais simples.

Fontes

1. Android Developers — Adicione gráficos vetoriais para várias densidades — Documenta o fluxo de importação SVG e PSD do Vector Asset Studio, subconjunto SVG compatível, alertas de desempenho e recursos drawable gerados.
2. Android Developers — Referência da API VectorDrawable — Define atributos XML de vector, path, group e clip-path, incluindo viewport, pintura, regra de preenchimento e comportamento por nível de API.
3. W3C — Conteúdo incorporado do SVG — Confirma que SVG pode conter imagens raster por meio do elemento de imagem.
4. Manual do Inkscape — Traçar uma imagem — Explica a diferença entre traçar pixels raster e trabalhar com o bitmap original.
5. SVG2Vector — Conversão de PNG para VectorDrawable — Apresenta o caminho atual de conversor direto discutido na comparação de fluxos.

---

Pronto para testar um ícone de produção? Converta o PNG em SVG, examine os traçados e importe o arquivo revisado no Android Studio. Mantenha o drawable apenas depois que viewport, cores, vazados e renderização em execução passarem na lista.