Como editar um SVG (e por que um arquivo limpo é muito mais fácil)

Existem duas formas de editar um SVG. Você pode abri-lo em um editor visual e clicar nas formas para mudar cores, redimensionar ou movê-las, ou pode abrir o código e alterá-lo manualmente, porque um SVG é, na prática, um arquivo de texto. A maioria das pessoas quer o primeiro caminho, geralmente para trocar uma cor ou redimensionar um ícone, e um editor visual resolve isso em segundos.

A parte que nenhum tutorial menciona: a facilidade de fazer qualquer uma dessas edições depende de como o SVG foi criado. Um arquivo limpo, com poucas formas bem organizadas, é editado em segundos. Um arquivo bagunçado, daqueles que um conversor rápido costuma gerar, pode trazer milhares de pontos soltos e uma única cor dividida em centenas de fragmentos; aí, "basta clicar na forma e mudar a cor" deixa de funcionar. Este guia cobre os dois métodos de edição e mostra como identificar que tipo de arquivo você tem em mãos.

A versão rápida

• Duas formas de editar: visualmente em um editor (mudar cores, redimensionar, remodelar) ou diretamente no código SVG (é só texto).
• Editor visual gratuito: Inkscape. Profissional: Illustrator. No navegador: Figma ou um editor SVG online gratuito. Código: VS Code ou qualquer editor de texto.
• A tarefa mais comum, mudar cores: selecione uma forma e altere o preenchimento. É rápido em um arquivo limpo, doloroso em um arquivo fragmentado.
• Edite o código quando precisar manter nomes de classes e IDs intactos, alterar o viewBox ou fazer um ajuste rápido sem abrir um aplicativo.
• Se você não consegue selecionar a forma desejada, o problema é o arquivo, não o editor. Uma conversão mais limpa costuma ser a solução real.

Primeiro, o que existe dentro de um SVG

Um SVG é editável por causa do que ele é: um conjunto de formas descritas por matemática, escrito em texto puro (mais especificamente, XML). Um círculo é armazenado como um centro e um raio; um logotipo, como uma série de traçados, cada um com sua própria cor de preenchimento. (Veja a explicação mais completa se vetores ainda forem novidade para você.)

É por isso que você consegue mudar a cor ou redimensionar um SVG sem que ele fique borrado, e também por isso ele abre dois tipos de edição completamente diferentes. Abra-o em um editor visual e você trabalha com as formas. Abra-o em um editor de texto e você trabalha com o código que descreve essas formas. O mesmo arquivo, duas portas de entrada.

Confira uma coisa antes de tudo: abra o SVG e tente clicar em uma única forma. Se você consegue selecioná-la e movê-la sozinha, é um vetor real e editável. Se tudo é selecionado como um bloco só e fica pixelado quando você aproxima o zoom, provavelmente é uma imagem raster dentro de um arquivo .svg, um vetor "falso" que você não consegue editar de verdade. Nenhum editor corrige isso; o arquivo precisa ser convertido corretamente primeiro.

As duas formas de editar um SVG e quando usar cada uma

Você quer…	Melhor método
Mudar cores, redimensionar ou mover formas	Editor visual (Inkscape, Illustrator, Figma)
Editar texto ou trocar algumas cores rapidamente	Editor visual, ou código para ajustes pontuais
Manter nomes de classes / IDs para CSS ou animação	Editar o código diretamente
Alterar o viewBox, dimensões ou um valor hexadecimal	Editar o código diretamente
Redesenhar ou remodelar traçados manualmente	Editor visual

A maior parte da edição é visual. Você recorre ao código quando é um desenvolvedor que precisa que a marcação continue exatamente como foi escrita, algo que um editor visual nem sempre respeita (mais sobre isso abaixo).

Editando um SVG visualmente

Este é o caminho que a maioria das pessoas quer, e ele cobre mudar cores, redimensionar, remodelar e apagar partes.

Escolha um editor

• Inkscape é gratuito, open-source, e roda em Mac, Windows e Linux. É a resposta mais comum para "com o que eu edito SVGs", e merece esse lugar.
• Adobe Illustrator é o padrão profissional pago e oferece o maior controle se você já usa a ferramenta.
• Figma roda no navegador e lida bem com edições leves e mudança de cores, por isso muitas equipes de produto recorrem a ele.
• Editores online gratuitos como Boxy SVG, ou um editor SVG rápido na web, resolvem pequenas alterações sem instalar nada.

Faça a edição

Os passos são os mesmos em qualquer editor:

1. Abra o arquivo no editor (Arquivo → Abrir, ou arraste o arquivo para dentro).
2. Desagrupe se necessário. SVGs convertidos e exportados muitas vezes chegam como um único grupo bloqueado. Selecione tudo e desagrupe (no Illustrator e no Inkscape) para acessar as formas individuais.
3. Selecione a forma desejada com a ferramenta de seleção ou seleção direta.
4. Altere a forma. Defina uma nova cor de preenchimento, arraste uma alça para redimensionar, mova, edite o texto ou apague uma parte que você não precisa.
5. Salve ou exporte como SVG quando terminar.

A edição mais comum: mudar cores

A maioria das perguntas sobre "como edito um SVG" na verdade quer dizer "como mudo as cores disso". Em um arquivo limpo, é rápido: clique na forma, escolha um novo preenchimento, pronto. Cada cor é sua própria forma editável, então transformar o azul da sua marca em verde é um clique por forma.

Também é exatamente aqui que um arquivo bagunçado começa a desmoronar, como mostra a próxima seção.

Editando o código SVG diretamente

Como um SVG é texto, você pode abri-lo no VS Code, Bloco de Notas ou qualquer editor de texto e alterá-lo manualmente. Este é o caminho de desenvolvedores e, para algumas tarefas, é mais rápido e seguro do que qualquer aplicativo visual:

• Mudar cores: encontre o fill="#3b82f6" da forma e altere o valor hexadecimal.
• Redimensionar a área de desenho: edite width, height ou viewBox.
• Manter seus ganchos intactos: este é o ponto principal. Editores visuais como o Illustrator muitas vezes reescrevem a marcação ao salvar, renomeando ou removendo os atributos class e id dos quais seu CSS ou JavaScript depende. Se o seu SVG está conectado a estilos ou animações, editar o código manualmente é a única forma confiável de manter esses ganchos.

A troca é simples: editar o código é ótimo para mudanças pequenas e cirúrgicas, e para qualquer coisa que envolva classes, IDs ou animação. É a ferramenta errada para remodelar uma curva ou mudar as cores de uma ilustração cheia de detalhes. Para isso existem os editores visuais.

Por que alguns SVGs são um pesadelo para editar (e como corrigir)

Aqui está o que nenhuma página de ferramenta conta: raramente o problema é o editor. O problema é o arquivo.

Abra um SVG limpo e a edição é tranquila. Existem poucas formas nomeadas, um preenchimento por forma e poucos nós, então você clica exatamente no que quer e muda a cor em um segundo.

Abra um arquivo bagunçado, geralmente algo vetorizado automaticamente por um conversor gratuito e rápido, e a mesma edição fica sofrida:

• Uma única cor é dividida em centenas de pequenos fragmentos, então não existe uma única "forma azul" para clicar. Existem centenas delas.
• Curvas suaves ficam cheias de milhares de pontos de ancoragem, então remodelar qualquer coisa é inviável e o editor fica lento. (Este é o problema de SVG com nós demais em detalhes.)
• Retângulos de fundo soltos e bordas recortadas atrapalham o caminho.

Quando isso acontece, a solução geralmente não é um editor melhor nem mais paciência. É um arquivo inicial mais limpo. Converter novamente a imagem original em um SVG organizado entrega algo que você realmente consegue editar.

Como isso funciona com PerfectVector

O SVG mais fácil de editar é um SVG limpo, e é exatamente essa a parte que o PerfectVector foi criado para acertar. Ele reconstrói sua imagem como traçados limpos com poucos nós e mantém cada cor como sua própria forma editável, então, quando você abre o resultado no Illustrator, Figma ou Inkscape, consegue selecionar e mudar as cores do jeito que os tutoriais presumem que você consegue.

Ele também tem um editor de cores integrado, para você mudar ou mesclar cores logo depois de converter, trabalhando por cor em vez de procurar traçados individuais. Menos cores significam menos formas para gerenciar e um arquivo mais simples de editar depois. Você pode converter uma imagem em um SVG limpo e editável e conferir os traçados por conta própria. Converta suas primeiras imagens de graça, sem precisar de cartão de crédito.

Mude cores por cor, não por traçado

Um checklist rápido antes de editar

• Confirme que é um vetor real. Clique em uma única forma. Se ela for selecionada sozinha, está tudo certo. Se a imagem inteira é selecionada como um bloco só e fica borrada ao aproximar, converta-a para um SVG real primeiro.
• Mantenha o original. Salve uma cópia antes de começar, especialmente se você for mexer no código.
• Escolha o método. Editor visual para formas e cores; código para classes, IDs, viewBox e pequenos ajustes.
• Desagrupe se o arquivo chegar como um único grupo bloqueado.
• Se você não consegue selecionar o que quer, pare de insistir. O arquivo está fragmentado demais, e uma conversão mais limpa vai economizar mais tempo do que uma limpeza manual.

FAQ

Como edito um SVG de graça? Use o Inkscape, um editor gratuito e open-source para Mac, Windows e Linux, para edição visual completa. Para mudanças rápidas, use um editor SVG online gratuito no navegador ou abra o arquivo em um editor de texto como o VS Code e altere o código diretamente. As três opções não custam nada.

Como mudo a cor de um SVG? Em um editor visual, selecione a forma e defina uma nova cor de preenchimento. No código, encontre o valor de preenchimento da forma (como fill="#3b82f6") e altere o hexadecimal. Se uma cor estiver dividida em muitas formas, mude a cor por cor em vez de clicar em cada pedaço, usando uma ferramenta que agrupe as cores para você.

Posso editar um SVG no VS Code? Sim. Um SVG é texto XML, então o VS Code ou qualquer editor de texto consegue abri-lo. É o caminho certo para alterar cores hexadecimais, o viewBox ou dimensões, e para manter atributos class e id intactos para CSS ou animação. Ele não é indicado para remodelar curvas manualmente.

Por que não consigo selecionar formas individuais no meu SVG? Geralmente por um de dois motivos. As formas estão agrupadas, então selecione tudo e desagrupe primeiro. Ou o arquivo é uma imagem raster dentro de um .svg, sem formas separadas para selecionar. Se ele fica pixelado quando você aproxima o zoom, é o segundo caso, e você precisa convertê-lo em um vetor real.

Posso editar um SVG no Canva? Sim, para edições básicas. O Canva permite mudar cores, redimensionar e reposicionar um SVG, o que cobre a maioria das necessidades leves. Para editar traçados com precisão, desagrupar formas complexas ou fazer alterações no código, use Inkscape, Illustrator ou um editor de texto.

Como edito um SVG no Windows ou no Mac? As mesmas ferramentas funcionam nos dois. O Inkscape roda em Windows, Mac e Linux; o Figma e editores online rodam em qualquer navegador; o VS Code edita o código em qualquer um deles. Você não precisa de softwares diferentes para sistemas operacionais diferentes.

---

Editar é muito mais tranquilo quando o arquivo já começa limpo. Se o seu é um emaranhado de traçados soltos, converta o original em um SVG limpo e editável e comece por algo com que você realmente consiga trabalhar.