Imagem para SVG no Illustrator: como obter traços editáveis para desenho técnico

Uma designer de documentação recebe um lote de desenhos de linha para o manual de um produto. O cliente pede uma única mudança: engrossar levemente todas as linhas, para que as figuras sobrevivam à impressão em papel jornal. Os arquivos são SVG, então deveria ser trabalho de trinta segundos: selecionar tudo, aumentar a espessura do traço, pronto. Mas quando o primeiro arquivo abre no Illustrator, não há traço nenhum para ajustar. Cada «linha» é, na verdade, uma forma fina preenchida: duas bordas paralelas com preto no meio. Mudar a espessura significa deslocar os caminhos um a um, e os trinta segundos viram uma tarde inteira.

Se você já pesquisou converter imagem em SVG e acabou com arquivos assim, o problema não é o Illustrator nem você. É a forma como o SVG foi vetorizado.

Por que alguns SVGs continuam difíceis de editar no Illustrator

«SVG» descreve apenas o contêiner; não diz nada sobre o que há dentro. A maioria dos conversores gratuitos de imagem para SVG — e a configuração padrão do Traçado de imagem do Illustrator — funciona detectando as bordas das áreas escuras e envolvendo cada área em um caminho preenchido. A documentação da Adobe sobre o Traçado de imagem descreve exatamente isso: a arte rasterizada vira formas vetoriais. Para um logo ou uma silhueta, é a resposta certa.

Para desenho técnico, é a resposta errada. Uma linha desenhada, traçada pelo contorno, vira um polígono comprido e fino preenchido de preto. Escala bem, imprime bem — mas a operação mais comum em um desenho técnico, mudar a espessura das linhas, deixa de ser uma propriedade editável. Usuários do Illustrator esbarram nisso o tempo todo: os fóruns estão cheios de discussões perguntando por que o desenho traçado volta como contornos em vez de caminhos pelo centro de cada linha.

O que você realmente precisa para manuais, IFUs e guias de montagem é SVG baseado em traços: cada linha visível é um único caminho com fill: none e um stroke-width, correndo pela linha central do traço desenhado. Assim a espessura vira um número só, e o Illustrator muda tudo globalmente em uma única edição.

Contorno preenchido vs. traço/centerline, em um relance

O Traçado de imagem do Illustrator tem, sim, um modo de traço Linha central, mas ele é calibrado para artes simples de espessura única; em um desenho de produto realista, tende a fragmentar curvas e fundir linhas próximas. O caminho mais confiável é produzir o SVG baseado em traços já na geração, em vez de consertá-lo depois do traçado.

Fluxo 1 — figuras simples: gerar o SVG diretamente

Se a figura é um objeto razoavelmente simples — uma ferramenta, um painel de controle, um diagrama de gesto, uma única vista de produto — descreva-a e gere o SVG como formato de saída nativo. O ManualFig envia seu prompt a um modelo SVG nativo de traços: os caminhos já nascem como traços estilo centerline, em vez de serem traçados depois.

A luminária de mesa abaixo foi gerada diretamente deste prompt, com SVG selecionado como modo de saída:

Dentro deste arquivo (baixar o SVG, 4,3 KB) há 38 elementos — 28 caminhos, 7 círculos, 2 linhas, 1 polilinha — e cada um deles é fill: none com traço. O desenho inteiro usa uma única espessura efetiva (2,5 em uma viewBox de 1000×750) e abre no Illustrator como um conjunto de traços limpos e uniformes.

Fluxo 2 — figuras complexas: gerar a imagem primeiro e depois converter

A geração direta de SVG tem um teto de complexidade. Figuras com detalhes mecânicos finos, estrutura interna densa ou proporções realistas ainda saem melhor como imagem rasterizada, onde o modelo desenha livremente. Para essas, o caminho certo tem dois passos: gerar (ou enviar) o desenho de linha rasterizado, deixá-lo exatamente certo, e então convertê-lo em SVG.

Esta é a luminária rasterizada que geramos primeiro — um desenho de linha PNG comum:

E esta é a mesma imagem depois da conversão em um clique para SVG no ManualFig:

O arquivo convertido (baixar o SVG, 3,8 KB) contém 33 elementos. O trabalho de linha — segmentos do braço, articulações, elipses da base — é baseado em traços, com as espessuras definidas uma única vez em seis classes CSS, de modo que o Illustrator ainda pode reestilizá-las por classe ou por seleção. Dois elementos são formas preenchidas: a ponta de seta sólida. Vale dizer com precisão:

Esse equilíbrio é o estado honesto da técnica. Pontas de seta e outras marcas deliberadamente sólidas devem continuar preenchidas; o que importa é que o desenho em si — as linhas que você vai querer reestilizar — chegue como traços.

A mesma luminária, dois caminhos: o que muda de verdade

Baixe os dois arquivos acima e abra-os lado a lado no Illustrator — a diferença ao selecionar e reestilizar diz mais que qualquer captura de tela.

Ajustando espessuras de traço no Illustrator

Com SVG baseado em traços, o trabalho do papel jornal do primeiro parágrafo realmente leva trinta segundos:

1. Abra o SVG no Illustrator (Arquivo → Abrir, não Inserir, se quiser editar).
2. Selecionar → Tudo, e defina uma nova espessura no painel de Controle ou de Traço — todos os caminhos com traço atualizam de uma vez.
3. Para mudanças seletivas, use Selecionar → Mesmo → Espessura do traço para capturar uma classe de espessura (detalhes de articulação vs. contornos principais, por exemplo) e ajustá-la separadamente.
4. Antes de redimensionar, confira «Dimensionar traços e efeitos» (Preferências → Geral), para que as espessuras acompanhem — ou fiquem fixas — de propósito, e não por acaso.

Como os arquivos convertidos agrupam as espessuras em poucas classes, o passo 3 funciona especialmente bem: as seis espessuras da luminária acima se comportam como seis camadas nomeadas de hierarquia de linha.

Precisa remover o fundo antes?

Para a conversão, um fundo branco ou liso dá ao vetorizador um limite de figura sem ambiguidade — as imagens de desenho de linha geradas pelo ManualFig convertem bem do jeito que estão. Se for converter uma foto ou captura de tela com fundo carregado, converta-a primeiro em desenho de linha (veja nosso guia de foto para desenho de linha) em vez de vetorizar a foto diretamente — vetorizar o sombreado fotográfico produz exatamente a sopa de áreas preenchidas que este artigo tenta evitar.

PNG ou SVG para a entrega final?

Versão curta: PNG quando a figura vive em um único lugar, em um único tamanho; SVG quando aparecerá em dois ou mais tamanhos, ou quando alguém adiante pode precisar reestilizá-la. Nosso guia de desenho de linha de produto cobre a decisão em detalhe. Para manuais que vão para impressão e web, o SVG baseado em traços é o formato de arquivo mais seguro: rebaixar para PNG é uma exportação, e as espessuras de linha ficam a uma única edição de distância.

Gere a sua

As duas luminárias deste artigo saíram da mesma ferramenta sem nenhuma limpeza manual:

1. Abra o ManualFig e descreva sua figura — ou envie uma imagem existente.
2. Escolha SVG como modo de saída para a geração direta, ou gere uma imagem e clique em Converter para SVG no resultado.
3. Abra o SVG exportado no Illustrator e reestilize os traços como precisar.

Se a figura é simples, gere-a diretamente como SVG. Se precisa de detalhe, acerte a imagem primeiro e converta. Pelos dois caminhos, as linhas chegam como linhas — e não como contornos fingindo ser linhas.

Ferramentas relacionadas: Gerador de manuais com imagens, Foto para desenho de linha para manuais.