SVGcode: confira as formas que você exporta

Para rastreamento de imagem SVGcode, carregue sua arte raster, escolha Color SVG ou Monochrome SVG, ajuste o rastreamento e inspecione o próprio SVG exportado. Verifique suas cores, furos internos e tela antes de aceitá-lo. Em nosso teste de cores planas, o SVGcode produziu caminhos reais e manteve a abertura do quadro, mas ambas as variantes exportadas alteraram a paleta original e usaram uma tela diferente.

Se você quiser outro fluxo de trabalho do navegador para uma imagem que já possui, visualize-a gratuitamente no PerfectVector. Você deve desbloquear o resultado antes de poder editá-lo ou exportá-lo. Use as mesmas verificações de forma e cor abaixo; este passo a passo não compara a qualidade de saída das duas ferramentas.

Experimente com a sua própria imagem

Abrir a ferramenta completa

PNGJPGWEBPPNGSVGSolte sua imagem aquiou clique · cole ⌘VSelecionar imagemSolte para verificar a imagem

Teste grátis. Solte uma imagem e veja a prévia do seu vetor, sem precisar criar conta.

O que o SVGcode rastreia e o que preparar

SVGcode converte imagens raster em gráficos vetoriais SVG. Seu autor descreve uma implementação WebAssembly baseada em Potrace que rastreia cor por cor; o repositório fonte oficial documenta essa implementação. Isso explica a abordagem, mas o arquivo exportado é a prova de sua própria arte.

Comece com uma cópia de um PNG ou outra imagem raster compatível, um navegador que possa acessar o SVGcode e permissão para processar a arte. Para a rota da área de transferência abaixo, seu navegador deve permitir acesso à área de transferência de imagens. Mantenha um editor de texto simples disponível para salvar a marcação SVG copiada, além de um visualizador ou editor SVG para a verificação de conclusão.

Uma marca plana com regiões coloridas distintas é uma primeira entrada útil. Registre as cores e aberturas que você precisa manter antes de alterar as configurações. Para uma foto ou gradiente suave, decida quais detalhes você pode simplificar; o rastreamento não pode inferir todos os limites pretendidos a partir dos pixels. O guia de vetorização de imagens explica essa decisão de raster para caminho com mais detalhes.

1. Carregue a imagem e escolha um modo de rastreamento

Abra SVGcode e carregue sua imagem. Para a rota que testamos, coloque a imagem real na área de transferência e escolha Colar imagem. Confirme se a visualização mostra a imagem pretendida, incluindo áreas transparentes e pequenos detalhes internos, antes de ajustar qualquer coisa.

Escolha Color SVG quando regiões coloridas separadas forem importantes. Use Monochrome SVG quando uma silhueta de cor única for o resultado pretendido. Este passo a passo usou Color SVG por toda parte; não relata um teste monocromático separado.

Mantenha o raster original aberto ao lado da visualização. Não julgue o traço apenas pelo fato de suas bordas parecerem suaves quando ampliadas. Um centro vazio, uma pequena lacuna ou uma cor deliberadamente separada podem ser mais importantes do que uma borda externa lisa.

2. Altere as configurações com um detalhe visível em mente

Comece com um defeito que você possa apontar, como pontos indesejados fora da arte ou uma pequena abertura que desaparece. Altere um controle, aguarde a atualização da visualização e compare esse detalhe novamente.

Suprimir manchas remove pequenas regiões. Aumentá-lo pode ajudar com pontos perdidos, mas verifique os pequenos detalhes que você pretende manter. Posterizar imagem de entrada reduz a variação de cores antes do traçado; a posterização agrupa as cores em menos níveis. O SVGcode passo a passo do autor explica os controles e a posterização por canal.

O aplicativo atual também expõe a largura do traço e configurações especializadas. Deixe os controles desnecessários até que você tenha uma exportação de linha de base. Um grande conjunto de alterações simultâneas torna difícil dizer qual delas alterou o resultado.

Ilustração

O que nosso teste original de cores planas mostrou

Fizemos um 512 × 512 PNG com fundo transparente, uma moldura retangular azul marinho com uma abertura, um retângulo dourado e um retângulo verde-azulado sobreposto. Colamos a imagem original no aplicativo SVGcode público, usamos Color SVG, Suppress Speckles 2 e Stroke Width 0 e, em seguida, copiamos duas saídas SVG reais.

O primeiro usou Posterize Input Image com vermelho, verde e azul em 7 etapas cada e alfa em 1 etapa. O segundo usou a mesma imagem com Posterize Input Image desmarcado. Os controles RGB e alfa foram desativados nesse segundo estado.

Desativar a posterização não restaurou exatamente as cores originais desta imagem. Ambos os SVGs também colocaram a arte em uma tela diferente. Estas são observações de uma imagem controlada, não um benchmark ou uma previsão para cada arquivo. São bons motivos para verificar a exportação real antes de usá-la como mestre de cores ou layout.

3. Copie o SVG e preserve a marcação real

Quando a visualização estiver pronta, escolha Copiar SVG. Aguarde a conclusão da Otimização do SVG antes de ler ou colar a área de transferência. Em nossa execução, uma leitura imediata da área de transferência estava vazia; lê-lo após a otimização retornou a marcação SVG.

Cole a marcação em um editor de texto simples e salve-a com uma extensão .svg, como artwork-trace.svg. Confirme se ele contém um elemento <svg> e um </svg> de fechamento em vez de uma captura de tela ou um documento rich text. Mantenha um nome de arquivo separado para cada variante de configurações para que a exportação posterior não substitua sua referência.

Esta é a rota de marcação copiada que concluímos. O SVGcode também exibe Salvar SVG, mas este passo a passo não prova o comportamento nativo da caixa de diálogo para salvar arquivos ou a importação bem-sucedida para outro aplicativo.

4. Inspecione cores, aberturas e tela no arquivo salvo

Abra o SVG salvo em um visualizador ou editor, ao lado da fonte intocada. Verifique-os separadamente:

1. Paleta: compare preenchimentos importantes com os valores de cores pretendidos. Um traço pode manter três regiões enquanto altera todas as três cores. Se forem necessárias cores exatas, restaure e verifique os preenchimentos pretendidos em seu editor.
2. Aberturas: coloque um fundo contrastante atrás da arte. O novo plano de fundo deve aparecer através dos buracos pretendidos e do espaço externo. Uma forma pintada de branco pode parecer uma abertura em branco. O guia de plano de fundo SVG transparente mostra como distinguir os dois.
3. Tela: inspecione os limites do documento, bem como os limites da arte. O viewBox define o retângulo de coordenadas internas do SVG; não é uma promessa de dimensões físicas. Verifique as margens e o tamanho no aplicativo onde você usará o arquivo.
4. Geometria: selecione regiões importantes individualmente e tente uma pequena recoloração ou movimento, depois desfaça. Um arquivo contendo caminhos ainda precisa de uma verificação de editabilidade para o trabalho pretendido.

SVG pode representar uma abertura com vários contornos dentro de um caminho composto; o padrão de caminho SVG descreve subcaminhos e buracos. Você não precisa de um elemento de caminho separado para cada limite visível. Por outro lado, uma contagem baixa de caminhos por si só não prova que todos os detalhes pretendidos sobreviveram.

Nossa verificação de conclusão foi digital: inspecione a marcação copiada e renderize os SVGs reais. A abertura e o espaço exterior eram transparentes em ambas as variantes. Nenhum resultado de importação, impressão ou corte do editor de destino foi testado. Para uma revisão mais ampla da transferência, use o scorecard de qualidade do rastreamento vetorial.

Recuperar da primeira verificação falhada

Se um furo permanecer errado, o guia de solução de problemas de furos SVG separa a geometria do traço ausente da interpretação da regra de preenchimento. Para um fluxo de trabalho de rastreamento de desktop com ferramentas de limpeza direta, consulte Bitmap de rastreamento do Inkscape.

Mantenha a imagem original e o SVG aceito juntos. Anote qualquer correção de paleta ou ajuste de tela que a próxima pessoa precisará. Se você quiser testar seu trabalho artístico existente em outra ferramenta de navegador, comece gratuitamente com PerfectVector e verifique a silhueta e as aberturas da visualização.

Perguntas frequentes

O SVGcode pode rastrear um PNG em caminhos SVG reais?

Sim. Nosso PNG original de cor plana produziu marcação SVG copiada contendo três caminhos e nenhuma imagem incorporada. Inspecione seu próprio arquivo exportado; esse resultado não garante a mesma estrutura ou fidelidade para todas as imagens.

Desativar a posterização preserva as cores originais?

Isso não aconteceu em nosso teste controlado. Ambas as configurações alteraram os valores originais da cor sólida. Compare os preenchimentos exportados com a paleta pretendida e corrija-os quando a cor exata for importante.

Por que a tela SVG é diferente do tamanho do meu PNG?

O SVG copiado em nosso teste usou um viewBox 1024 × 1024 de uma entrada 512 × 512. Inspecione a tela exportada, os limites da arte e o tamanho de exibição pretendido separadamente, em vez de presumir que as dimensões dos pixels de origem serão mantidas.

Como posso saber se uma abertura é transparente?

Coloque um fundo contrastante atrás do SVG salvo. Deve aparecer através da abertura. Caso contrário, inspecione se o traço perdeu o contorno interno ou criou uma forma pintada ali.

Fontes

1. aplicativo SVGcode — interface de rastreamento de imagem e controles atuais.
2. Passo a passo do autor SVGcode em web.dev — rastreamento cor por cor, supressão de manchas e posterização.
3. Repositório oficial de SVGcode — implementação do projeto e documentação fonte.
4. Caminhos SVG do W3C — caminhos compostos, subcaminhos e aberturas.