Como editar um SVG: editor visual ou pelo código

Para editar um arquivo SVG, abra uma cópia em um editor visual para alterar formas, cores e curvas, ou em um editor de texto para pequenas mudanças no código de marcação. Salve como SVG e reabra o arquivo para conferir o resultado. O método adequado depende da alteração necessária e dos objetos dentro do arquivo.

Antes de escolher um comando que altere mais a estrutura, identifique o que selecionou. Um grupo, um caminho com várias partes e um PNG incorporado podem parecer um único objeto na área de desenho. Cada um exige uma solução diferente.

Prepare uma cópia e identifique os objetos SVG

Você precisa do arquivo SVG, uma cópia de trabalho, um editor e um visualizador compatível com SVG. Guarde o original até a cópia exportada passar pelos seus controles.

SVG significa Scalable Vector Graphics. Seu código XML pode descrever formas e caminhos vetoriais, mas também conter imagens incorporadas. Um caminho descreve uma linha ou forma; um nó é um ponto editável desse caminho em um editor vetorial. A extensão SVG por si só não informa se o desenho visível permite acessar esses pontos.

Abra a cópia e inspecione o objeto selecionado no painel Camadas ou Objetos. Se necessário, consulte o código em um editor de texto. Identifique o tipo de objeto antes de mudar sua estrutura:

O elemento <image> pode referenciar conteúdo PNG ou JPEG. Esses pixels não viram caminhos porque o arquivo externo termina em .svg. Bordas em blocos ao ampliar são uma pista; o painel de objetos e a referência à origem fornecem um diagnóstico mais específico. Alguns editores também inserem um SVG vetorial válido como um único objeto gráfico, então uma seleção única prova muito pouco.

Um caminho composto pode preservar furos, como o centro de um “O”. Separá-lo pode alterar esses furos. Consulte o diagnóstico de tipos de objeto SVG quando Desagrupar estiver indisponível ou não tiver efeito.

Escolha um editor visual ou o código

Inkscape é gratuito e de código aberto, funciona em macOS, Windows e Linux e usa SVG como formato principal. Illustrator é outra opção se já faz parte do seu trabalho. Figma permite transferir recursos entre ferramentas de design como SVG, embora suas orientações de importação excluam elementos SVG marker e pattern. Confira uma importação complexa antes de escolher um editor.

O fluxo documentado do editor SVG do Canva inclui alterações básicas de cor e disposição. Editores no navegador podem servir para tarefas menores. Confira o suporte a preenchimentos, traços, textos e efeitos do arquivo, junto com as condições atuais de exportação. Para dividir preenchimentos sólidos compatíveis em arquivos alinhados por cor exata, use o Separador de cores SVG; use um editor vetorial quando precisar remodelar caminhos.

Edite as formas visualmente e confira a exportação

Os nomes dos comandos variam conforme o editor, mas o trabalho segue esta ordem:

1. Abra a cópia de trabalho. Compare o desenho importado com o original. Pare se letras, padrões ou efeitos já tiverem mudado.
2. Selecione o objeto desejado. Entre em um grupo ou desagrupe apenas quando o painel o identificar como grupo. Se for um caminho, mude para a ferramenta de nós ou seleção direta.
3. Faça uma alteração. Mude um preenchimento, mova uma parte ou ajuste alguns nós. Ao redimensionar, mantenha a proporção, a menos que queira esticar o desenho.
4. Confira a área alterada. Inspecione curvas e pequenas aberturas de perto e depois observe o desenho inteiro no tamanho previsto.
5. Salve ou exporte um novo SVG. Reabra o arquivo em um visualizador e na aplicação onde será usado. Confirme a parte editada, as dimensões gerais e todos os objetos que precisam continuar selecionáveis.

Ao recolorir, diferencie preenchimento, a pintura dentro da forma, de traço, a pintura ao longo do contorno. Uma cor visível pode aparecer em muitos objetos. A seleção por mesmo preenchimento pode ajudar, mas confira a seleção antes de alterar: outra parte pode compartilhar essa cor. O guia para alterar cores SVG explica estilos herdados e cores que não mudam.

Guarde um original de trabalho editável quando o editor usa formato próprio ou metadados adicionais. As opções de salvamento SVG da Adobe incluem configurações para fontes, propriedades CSS, imagens raster e dados de edição do Illustrator. Um arquivo com aparência correta após a exportação ainda pode ter código diferente ou conteúdo rasterizado. Compare os objetos e referências necessários além da imagem.

Edite o código SVG para uma alteração pequena e controlada

Abra a cópia SVG no VS Code ou em outro editor de texto simples. Preserve o namespace, os nomes de elementos e as aspas. Faça uma alteração e renderize o arquivo antes da próxima.

Altere o preenchimento sem alterar o caminho

Salve este exemplo como triangle.svg e abra em um visualizador compatível com SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Substitua #3b82f6 por #f97316 no atributo fill do caminho.
2. Salve e reabra ou atualize o arquivo.
3. Confira se o triângulo está laranja e se o contorno permanece igual. Os dados d, o id e a class devem continuar correspondendo ao original.

Se a cor não mudar, inspecione um atributo style, uma regra de classe, pintura herdada ou um traço que possa controlar o que você vê. Altere a regra responsável, em vez de substituir todas as ocorrências de uma cor no arquivo inteiro.

Nota de método: Renderizamos este exemplo antes e depois da mudança de preenchimento com um renderizador SVG e conferimos os pixels resultantes. O triângulo mudou de cor enquanto dados do caminho, ID e classe permaneceram iguais. Este pequeno exemplo não testa a importação ou exportação de um SVG complexo em um aplicativo de design.

Remova margens vazias com viewBox

O viewBox da raiz tem quatro números: x mínimo, y mínimo, largura e altura. Eles definem o retângulo no espaço de coordenadas SVG que é mapeado para a área de exibição.

No exemplo, o triângulo ocupa x=8 a 40 e y=8 a 40. Mude viewBox="0 0 48 48" para viewBox="8 8 32 32" sem alterar os dados do caminho. Salve e renderize novamente. Agora o triângulo ocupa mais da mesma área de 48 por 48 porque as margens vazias foram removidas.

Essa alteração muda o mapeamento da área de desenho, não a geometria do caminho nem width e height da raiz. Em desenhos reais, deixe espaço para traços e efeitos: uma caixa justa à geometria pode cortá-los. A opção visual mais segura costuma ser ajustar a página ou prancheta ao desenho e inspecionar uma cópia exportada. Se o arquivo for importado no tamanho físico errado, siga o guia de dimensões SVG e viewBox.

Se o desenho desaparecer, for cortado ou esticado, restaure o viewBox original e confira os quatro valores e a proporção. Não “corrija” um problema de área de desenho movendo todos os nós.

Quando um SVG traçado precisa de limpeza

Uma imagem raster armazena pixels em uma grade. A vetorização reconstrói geometria a partir desses pixels, então um arquivo traçado pode organizar cores e contornos de forma diferente do desenho original.

Uma parte visível pode ficar espalhada em caminhos pequenos. Uma cor também pode abranger várias regiões desconectadas. Nós densos, pequenos pontos, formas de fundo e contornos sobrepostos podem tornar uma edição simples demorada. Inspecione essas propriedades específicas em vez de julgar o arquivo apenas pela nitidez em um nível de zoom.

Estrutura fragmentada

Estrutura mais simples

Estas ilustrações explicam o esforço de edição; não são amostras de conversão nem uma comparação medida entre produtos. Se vale a pena manter o traçado, repare as áreas afetadas e simplifique só onde o contorno continuar preciso. Se veio de uma imagem raster e a limpeza seria excessiva, tente vetorizar novamente o original. Preserve geometria vetorial nativa utilizável em vez de traçar uma captura de tela dela.

Como fazer isso com PerfectVector

PerfectVector se encaixa quando você precisa criar caminhos a partir de imagens raster, como um PNG ou JPEG original ou o conteúdo raster dentro de um SVG. Use os métodos gerais acima para desenhos vetoriais existentes que deseja preservar.

Para sua própria conversão, siga esta ordem:

1. Envie a imagem raster e compare a prévia vetorial. Procure detalhes ausentes, regiões indesejadas e contornos diferentes da origem.
2. Desbloqueie o resultado antes de editar ou exportar. Conversão e prévia são gratuitas e ilimitadas; a política pública atual de preços informa que um crédito desbloqueia cada resultado único e que baixar novamente um resultado desbloqueado é gratuito.
3. Inspecione e edite a geometria desbloqueada. Confira as formas e nós necessários, ajuste a paleta quando útil e compare o resultado editado no tamanho previsto.
4. Exporte e confira na próxima aplicação. Reabra o SVG, selecione as partes previstas e confira dimensões e detalhes pequenos. Uma prévia sozinha não estabelece que o arquivo está pronto para qualquer editor, impressora ou máquina de corte.

Letras raster são reconstruídas como geometria, então não espere texto digitado editável. Mantenha a opção de corrigir manualmente ou redesenhar quando uma letra, curva ou pequena abertura importante não sobreviver ao traçado.

Perguntas frequentes

Como edito um SVG de graça? Use Inkscape para edição visual ou um editor de texto simples para alterar o código. Ferramentas no navegador também podem oferecer funções gratuitas; confira as condições atuais de exportação e o suporte aos recursos SVG do seu arquivo.

Posso editar um SVG no VS Code? Sim. Edite o código XML para pequenas mudanças no preenchimento, dimensões, viewBox ou IDs e classes necessários. Salve uma cópia e renderize depois. Use um editor visual para remodelar curvas.

Por que não consigo selecionar formas individuais no SVG? Inspecione o tipo de objeto. Pode ser um grupo, um caminho com vários subcaminhos, um desenho recortado ou uma imagem incorporada. Entre ou desagrupe um grupo real; edite nós para a geometria e vetorize conteúdo raster apenas quando precisar de caminhos.

Posso editar um SVG no Canva? O fluxo SVG documentado do Canva cobre mudanças básicas de cor e disposição. Confira o arquivo importado e as condições atuais de download SVG. Use um editor vetorial ou o código quando precisar de alterações precisas no contorno ou controle de IDs e classes.

Posso editar um resultado PerfectVector antes de desbloquear? Na sua conversão, compare primeiro a prévia e desbloqueie o resultado antes de usar os controles de edição e exportação. Inspecione o SVG exportado na aplicação onde será usado.

Fontes

1. W3C — Scalable Vector Graphics (SVG) 2 — modelo de documento, formas, caminhos e estilos SVG.
2. W3C — Conteúdo incorporado SVG — imagens raster podem permanecer incorporadas em um documento SVG.
3. W3C — Coordenadas, transformações e unidades SVG — mapeamento viewBox e distinção entre geometria e dimensões da área de exibição.
4. Inkscape — Sobre — informações oficiais sobre plataformas, formato SVG e código aberto.
5. Adobe — Salvar arte no Illustrator — configurações de exportação SVG e dados de edição do Illustrator preservados.
6. Figma — Copiar recursos entre ferramentas de design — transferência SVG e limites de importação de marcadores e padrões.
7. Canva — Editor SVG — fluxo documentado de cor, tamanho e disposição básicos.
8. PerfectVector — Política de preços — condições atuais de prévia, desbloqueio e novo download.

Mantenha um SVG utilizável e edite sua geometria existente. Se a origem for raster ou o traçado precisar de substituição, experimente a imagem original no PerfectVector, compare a prévia com a origem, desbloqueie antes de editar e confira formas e dimensões exportadas na próxima aplicação.