> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Como editar um SVG: editor visual ou pelo código > Edite formas SVG em um editor visual ou altere o código. Identifique grupos, caminhos e imagens incorporadas e confira cores, área de desenho e arquivo salvo. Source: https://perfectvector.com/pt-BR/blog/how-to-edit-an-svg Language: pt-BR Author: Irene Kim Published: 2026-05-30T08:00:00+09:00 Updated: 2026-10-08T08:00:00+09:00 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. > **Escolha como editar** > > * **Cores, tamanho, movimento e curvas:** use Inkscape, Illustrator ou um editor vetorial compatível no navegador. > * **IDs, classes, uma cor hexadecimal ou a área de desenho:** edite uma cópia do código SVG e confira a renderização. > * **Tudo é selecionado junto:** inspecione o tipo de objeto; use Desagrupar apenas em um grupo real. > * **Você só tem uma imagem raster:** vetorize o original, compare a prévia e desbloqueie o resultado PerfectVector antes de editar e exportar. ## 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](https://www.w3.org/TR/SVG2/). 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: | Conteúdo selecionado | O que inspecionar | Primeira ação | | ------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- | | Grupo | Um contêiner de grupo, frequentemente `` no código | Entrar no grupo ou desagrupar uma vez; repetir apenas para grupos aninhados | | Caminho com partes separadas ou furos | Um caminho com vários subcaminhos | Editar seus nós; separar em uma cópia apenas se precisar de partes independentes | | Um caminho contínuo | Nós editáveis ao longo do contorno | Usar a ferramenta de nós ou seleção direta | | Desenho recortado ou mascarado | Um recorte ou máscara com seu conteúdo | Inspecionar o conteúdo antes de liberar o limite | | PNG ou JPEG incorporado | Um objeto de imagem; `` referenciando dados raster | Editar a imagem original ou vetorizá-la se precisar de caminhos | O [elemento `` pode referenciar conteúdo PNG ou JPEG](https://www.w3.org/TR/SVG2/embedded.html). 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](https://perfectvector.com/pt-BR/blog/svg-wont-ungroup) quando Desagrupar estiver indisponível ou não tiver efeito. ## Escolha um editor visual ou o código | Sua alteração | Método útil | O que conferir depois | | ------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------- | | Recolorir ou mover uma forma | Editor visual | Só os objetos previstos foram alterados | | Remodelar um contorno | Ferramenta de nós ou seleção direta | Curvas, cantos e furos ainda correspondem ao desenho | | Alterar um valor de preenchimento conhecido | Editor de texto | A cor visível mudou; outro estilo não a sobrescreveu | | Preservar referências para CSS ou animação | Editor de texto | IDs e classes necessários continuam no código salvo | | Remover margens adicionais | Ajustar a página/prancheta ou `viewBox` | Nenhum desenho, traço ou efeito é cortado | | Preparar camadas de corte separadas | Fluxo específico para a aplicação de destino | Geometria e camadas importadas funcionam no aplicativo de corte | [Inkscape é gratuito e de código aberto](https://inkscape.org/about/), 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](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). Confira uma importação complexa antes de escolher um editor. O [fluxo documentado do editor SVG do Canva](https://www.canva.com/features/svg-editor/) 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](https://perfectvector.com/pt-BR/svg-color-separator); 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](https://perfectvector.com/pt-BR/blog/how-to-change-svg-color) 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](https://helpx.adobe.com/illustrator/using/saving-artwork.html) 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 ``` 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](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). 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`](https://perfectvector.com/pt-BR/blog/svg-imports-wrong-size). 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** ![Ilustração de formas vetoriais fragmentadas com pontos de ancoragem densos](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp) *Ilustração: muitas peças pequenas e nós densos dificultam a seleção direta e a remodelagem.* **Estrutura mais simples** ![Ilustração de formas vetoriais maiores com menos pontos de ancoragem](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp) *Ilustração: formas maiores e uma distribuição mais econômica de nós são mais fáceis de inspecionar e editar.* 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](https://perfectvector.com/pricing.md) 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](https://www.w3.org/TR/SVG2/) — modelo de documento, formas, caminhos e estilos SVG. 2. [W3C — Conteúdo incorporado SVG](https://www.w3.org/TR/SVG2/embedded.html) — imagens raster podem permanecer incorporadas em um documento SVG. 3. [W3C — Coordenadas, transformações e unidades SVG](https://www.w3.org/TR/SVG2/coords.html) — mapeamento viewBox e distinção entre geometria e dimensões da área de exibição. 4. [Inkscape — Sobre](https://inkscape.org/about/) — informações oficiais sobre plataformas, formato SVG e código aberto. 5. [Adobe — Salvar arte no Illustrator](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — configurações de exportação SVG e dados de edição do Illustrator preservados. 6. [Figma — Copiar recursos entre ferramentas de design](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — transferência SVG e limites de importação de marcadores e padrões. 7. [Canva — Editor SVG](https://www.canva.com/features/svg-editor/) — fluxo documentado de cor, tamanho e disposição básicos. 8. [PerfectVector — Política de preços](https://perfectvector.com/pricing.md) — 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](https://perfectvector.com/pt-BR/image-to-vector), compare a prévia com a origem, desbloqueie antes de editar e confira formas e dimensões exportadas na próxima aplicação. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/how-to-edit-an-svg) - [Caixas delimitadoras SVG: meça as coordenadas certas](https://perfectvector.com/pt-BR/blog/svg-bounding-box.md) - [Unidades de padrões SVG: motivos repetidos no tamanho certo](https://perfectvector.com/pt-BR/blog/svg-pattern-units.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)