PerfectVector
Por Irene Kim

AutoTrace de PNG para SVG: use a opção de linha central

Execute o comando de linha central do AutoTrace em um PNG, salve um SVG e inspecione seu atributo de traçado, seu atributo de preenchimento e seus subcaminhos abertos antes de tratar o desenho como uma rota contínua.

8 min de leitura
Nesta página

Para converter um PNG em SVG de linha central com a CLI autônoma do AutoTrace, adicione --centerline, solicite a saída SVG e nomeie o arquivo salvo. Em seguida, inspecione a geometria. Nosso controle AutoTrace 0.40.0 produziu um caminho desenhado com um traço SVG e sem preenchimento de cor, mas esse elemento de caminho continha dois subcaminhos abertos separados. Um pequeno número de elementos de caminho SVG não é prova de que a rota do desenho seja contínua.

Se parte do seu trabalho artístico precisar de formas contornadas com preenchimento de cor, comece gratuitamente com PerfectVector e verifique as silhuetas e os furos internos da visualização. PerfectVector não cria linhas de centro. Você deve desbloquear o resultado antes de poder editá-lo ou exportá-lo. Para a tarefa da linha central, use o fluxo de trabalho local completo abaixo.

Experimente com a sua própria imagem
Abrir a ferramenta completa
Teste grátis. Solte uma imagem e veja a prévia do seu vetor, sem precisar criar conta.

Confirme que você está usando a CLI do AutoTrace independente

Este guia usa o executável autotrace instalado, descrito pelo projeto oficial do AutoTrace. AutoTracer.org é um serviço de upload de navegador com interface própria; seus controles não são os comandos abaixo. A interface central do Inkscape é outro caminho para a tarefa. O guia SVG de desenho em linha única cobre o fluxo de trabalho da GUI, preparação da fonte, limpeza e verificações posteriores da plotadora.

Você precisa de um executável AutoTrace instalado, um terminal, um PNG permitido e um visualizador SVG ou editor de texto simples. Coloque uma cópia de trabalho chamada line-control.png em uma pasta separada e preserve o original. Nossa referência de teste foi um 160 × 120 RGB PNG criado especificamente: uma haste vertical preta espessa com duas barras à direita em um fundo branco opaco.

Verifique sua versão instalada antes de rastrear:

autotrace --version
autotrace --help
autotrace --list-input-formats
autotrace --list-output-formats

Nossa versão retornou AutoTrace version 0.40.0. Suas listas de formatos incluíam entrada PNG e saída SVG. O projeto observa que o suporte ao formato depende da construção. Se PNG estiver faltando em sua lista de entrada real, resolva o suporte de entrada dessa compilação antes de copiar o comando de conversão.

1. Salvar um SVG de referência rastreado por contorno

Primeiro salve o rastreamento comum com seu próprio nome de arquivo:

autotrace --background-color FFFFFF \
  --output-format svg --output-file outline.svg line-control.png

O manual de comando do mantenedor documenta a cor de fundo como uma cor hexadecimal a ser ignorada e as opções de saída como o formato solicitado e o arquivo de destino. FFFFFF identifica o branco aqui. Mantenha essa escolha vinculada à sua fonte, em vez de adicioná-la cegamente a cada imagem.

O outline.svg real continha um caminho fechado com fill:#000000; stroke:none;. Descreveu o limite da região preta espessa. Para uma explicação mais ampla da arte de linha traçada representada por formas preenchidas com cores, consulte arte de linha para SVG.

2. Adicione a linha central e salve um SVG separado

Execute a mesma fonte com a opção centerline e um novo nome de arquivo de saída:

autotrace --background-color FFFFFF \
  --output-format svg --output-file centerline.svg \
  --centerline line-control.png

O projeto oficial e o manual distinguem o traçado da linha central do traçado do contorno. Nosso centerline.svg salvo tinha stroke:#000000; fill:none;, um elemento de caminho e nenhum elemento de imagem. A sua geometria seguia rotas finas através das regiões espessas da fonte, em vez de preencher a sua forma limite.

Também testamos a mesma fonte sem a opção explícita de fundo branco:

autotrace --centerline --output-format svg \
  --output-file centerline-background-retained.svg line-control.png

Esse arquivo era idêntico, byte por byte, a centerline.svg nesta referência de teste. O sinalizador de plano de fundo explícito, portanto, não era necessário para esta fonte e construção. Não trate isso como uma solução universal para ramificações ausentes ou como uma explicação para cada resultado em segundo plano.

3. Inspecione as rotas salvas, não apenas a contagem de caminhos

Estas são observações dos três arquivos salvos reais, inspecionados como marcação SVG e renderizados localmente. Os arquivos foram retidos do nosso teste de linha de comando original; a inspeção reutilizou esses resultados e não estamos afirmando que realizamos uma segunda execução de conversão.

Arquivo salvoElementos do caminhoPintura e fechamentoO que estabelece
outline.svgUmPreenchimento preto, sem traço; um subcaminho fechadoUm traço de limite preenchido comum
centerline.svgUmTraço preto, sem preenchimento; dois subcaminhos abertosGeometria da linha central com uma lacuna em um caminho de desenho
centerline-background-retained.svgUmBytes idênticos ao arquivo da linha centralOmitir a opção de plano de fundo não fez diferença aqui

Um subcaminho é um contorno separado dentro de um elemento de caminho. Nos dados de caminho SVG, M inicia um subcaminho e Z o fecha, conforme definido na especificação de caminhos SVG. Nosso caminho central tinha dois comandos M e nenhum comando Z. Os dados salvos relevantes, com espaços em branco adicionados para leitura, foram:

M30 30L30 75
C30 80.0707 28.3961 88.5616 31.6034 92.8519
C35.7319 98.3743 47.9272 96 54 96L117 96
M31 56L87 56

A primeira rota começa ao longo de uma haste vertical em x = 30. O segundo começa em x = 31, y = 56. Esse início separado não é evidência de uma filial unida. Mesmo essa entrada simples precisa de inspeção de endpoint antes que alguém a trate como uma rota contínua.

Ilustração
Documento de caminho conceitual contendo curvas abertas separadas com pontos finais e uma lacuna ampliada
Verifique pontos finais e lacunas em um caminho de desenho dentro do objeto de caminho salvo.

Abra o SVG ao lado da fonte. Verifique a haste principal, cada ramificação lateral, pontos finais e loops inesperados. Use os atributos de traçado/preenchimento salvos e dados de caminho para responder questões estruturais; uma visualização fina por si só pode ocultar um contorno preenchido ou um galho desconectado. Essas verificações verificam o conteúdo do arquivo. Eles não verificam a importação bem-sucedida ou a plotagem de caneta em outra ferramenta.

Recuperar de uma verificação falhada

Falha na verificaçãoPróxima ação
O PNG foi rejeitadoVerifique a lista de formatos de entrada instalados e as dependências dessa compilação
O SVG ainda é uma forma fechada preenchidaConfirme se --centerline foi usado e inspecione a saída recém-nomeada em vez do SVG de referência rastreado por contorno
O caminho é difícil de verInspecione seu traço e preenchimento e escolha um fundo contrastante para o visualizador
Uma ramificação está faltando ou desconectadaRevisite a origem, inspecione os pontos finais e repare a rota deliberadamente
Um caminho está sendo tratado como uma linha contínuaInspecione partidas M separadas e conexões reais dentro desse elemento

Mantenha o SVG aceito com seu PNG original, versão AutoTrace e comando completo. A verificação de conclusão para esta tarefa CLI é um SVG salvo com os caminhos de desenho pretendidos representados por traços SVG e quebras inspecionadas. Não testamos aplicativo de recebimento, edição nativa, desenho físico com caneta ou corte físico. Use o guia de desenho de linha única e verificações da plotadora para as próximas decisões; o traçado automático não é prova de reconstrução perfeita do ramo.

Se uma parte separada do projeto exigir formas sólidas com preenchimento de cor, comece gratuitamente com PerfectVector e compare as formas externas e os furos internos da visualização com sua fonte. Mantenha a parte da linha central em um fluxo de trabalho compatível com a linha central.

Perguntas frequentes

Qual ​​é o comando AutoTrace para PNG de linha central para SVG?

Use o autotrace com --centerline, --output-format svg, um destino --output-file e a entrada PNG. Verifique primeiro a versão instalada e os formatos de entrada suportados e, em seguida, inspecione o traçado, o preenchimento e as rotas do SVG salvo.

Um caminho SVG é sempre uma linha central contínua?

Não. Um elemento de caminho pode conter vários subcaminhos. Nosso SVG de linha central real tinha um elemento de caminho, mas dois subcaminhos abertos, portanto, a contagem de elementos por si só não provou uma rota contínua.

A opção de fundo branco é obrigatória?

Não foi necessário para nossa imagem de teste de fundo branco no AutoTrace 0.40.0: omiti-lo produziu bytes SVG idênticos. Escolha o tratamento em segundo plano para sua fonte e construção instalada, em vez de presumir que ele repara a geometria da linha central.

O PerfectVector pode gerar a mesma saída da linha central?

PerfectVector cria formas vetoriais delineadas com preenchimento de cor em vez de linhas de centro. Ele pode servir para uma tarefa separada de forma preenchida, enquanto as marcas que precisam de uma rota pelo meio exigem uma ferramenta com capacidade de linha central ou um desenho deliberado.

Fontes

  1. Projeto oficial do AutoTrace — CLI independente, suporte de linha central, uso e formatos de entrada dependentes de construção.
  2. Manual de comando do AutoTrace — opções de linha central, plano de fundo, arquivo de saída e formato de saída.
  3. Especificação de caminhos SVG do W3C — subcaminhos, comandos moveto e encerramento.
  4. AutoTracer.org — o serviço de navegador separado diferenciado da CLI instalada.

Mais do blog

PerfectVector

Transforme sua imagem em
caminhos vetoriais limpos e editáveis

Vetorize e confira a visualização grátis, sem limite diário.