Tools 4 All
Início
Ferramentas de Imagem

Editor de SVG online

Um editor vetorial rápido e profissional no seu navegador: desenhe com a caneta, edite nós, combine formas, aplique gradientes, anime e exporte SVG ou PNG otimizado. Nada é enviado.

GrátisSem cadastroRoda localmente — os arquivos nunca saem do seu dispositivo

Início rápido e atalhos

Escolha uma ferramenta à esquerda (ou pressione a tecla dela), arraste na área de trabalho para desenhar e use o painel Design à direita para estilizar a seleção. Pressione ? a qualquer momento para ver a lista completa de atalhos.

  • Navegue: role para mover a vista, Ctrl/⌘ + rolagem ou pinça para dar zoom, segure Space e arraste para mover a vista. Shift+1 ajusta o zoom à tela.
  • Selecione: clique, Shift-clique ou arraste um retângulo de seleção. Clique duas vezes em um grupo para entrar nele, em um caminho para editar seus nós ou em um texto para digitar.
  • Transforme: arraste as alças para dimensionar (Shift mantém as proporções, Alt dimensiona a partir do centro), arraste o botão redondo para girar e Ctrl/⌘-arraste uma alça lateral para inclinar.
  • Caneta: clique para cantos, arraste para curvas, clique no primeiro nó para fechar o caminho e pressione Enter para terminar.
  • Arquivos: solte SVGs ou imagens em qualquer lugar do editor, cole código SVG ou capturas de tela, e o salvamento automático guarda seu trabalho.
Untitled
Guide, features and FAQ

Como usar o editor de SVG

  1. Abra ou comece a desenhar

    Solte um SVG, PNG ou JPEG na área de trabalho, abra um arquivo ou comece com uma página em branco. Nada é enviado: o editor roda inteiramente no seu navegador.

  2. Desenhe e edite

    Use as ferramentas Caneta, Lápis e de formas, depois refine os caminhos nó por nó, combine formas com operações booleanas e estilize preenchimentos, contornos e gradientes.

  3. Organize

    Agrupe, reordene e bloqueie objetos no painel Camadas, alinhe e distribua-os, reutilize arte como símbolos e edite o código SVG diretamente.

  4. Exportar

    Baixe um SVG, PNG, JPEG ou WebP otimizado em qualquer escala, ou copie o resultado como código SVG, data URI, componente React ou SVG pronto para Tailwind que pega a cor do CSS.

Um editor de SVG profissional que roda inteiramente no seu navegador

O Editor de SVG do Tools 4 All é um aplicativo completo de gráficos vetoriais que abre na hora, sem download, conta ou envio. Use-o para desenhar logotipos, ícones, ilustrações, diagramas e elementos de interface, ou para limpar e ajustar arquivos SVG que você já tem. Ele foi construído em torno do próprio formato SVG, então o arquivo que você exporta é o mesmo documento que você editou: sem formato proprietário, sem conversão oculta.

O que você pode fazer

  • Desenhe com precisão: ferramenta Caneta com curvas de Bézier, Lápis à mão livre com suavização, retângulos com cantos arredondados, chanfrados ou invertidos independentes, elipses, linhas, pincel de bolha, borracha, faca e tesoura, e formas editáveis: polígonos, estrelas, triângulos, cruzes, molduras, anéis, setores, luas crescentes, setas, balões de fala, engrenagens, corações, nuvens, flores e espirais, além de texto.
  • Edite caminhos nó por nó: mova nós e alças, converta entre nós de canto, suaves e simétricos, adicione e exclua nós, una e quebre caminhos, curve segmentos diretamente e ajuste alças às tangentes.
  • Combine formas: unir, subtrair, interseccionar, excluir e dividir, além de converter traço em contorno, deslocar caminho, simplificar e inverter, tudo calculado pelo nosso próprio mecanismo de geometria que preserva as curvas, em um worker em segundo plano.
  • Estilize tudo: cores sólidas, gradientes lineares e radiais com alças na tela, padrões, opacidade por preenchimento e por contorno, tracejados, terminações, junções, pontas de seta, modos de mesclagem, efeitos de desfoque e sombra, caminhos de recorte e máscaras.
  • Mantenha-se organizado: painel de camadas com reordenação por arrastar, renomeação e aninhamento, bloquear e ocultar, agrupar e desagrupar, alinhar e distribuir em relação à seleção, à prancheta ou a um objeto-chave, amostras do documento e símbolos reutilizáveis.
  • Trabalhe como um profissional: guias inteligentes com indicação de distâncias e dicas de espaçamento igual, ajuste à grade, aos pixels, às guias da régua, aos nós e aos caminhos, campos numéricos de X/Y/L/A/rotação, desfazer ilimitado e atalhos no estilo do Figma e do Illustrator.
  • Código e exportação: visualização de código SVG bidirecional, exportação SVG otimizada com indicação de tamanho, PNG/JPEG/WebP em qualquer escala e cópia como SVG, data URI, React (JSX ou TSX), SVG para Tailwind ou fundo CSS.
  • Feito para produção web: cores do documento com substituição em um clique e Converter em currentColor, texto em contornos, converter traço em contorno, achatar transformações e desagrupar, ajustar a área de trabalho ao conteúdo e simplificar caminhos com ruído.
  • Um espaço de trabalho de verdade: vários desenhos em abas, cada um com seu próprio histórico de desfazer, menus curtos com submenus, um painel lateral que se recolhe (Ctrl/⌘+B) e edição em tela cheia em celulares e computadores.

Por que um editor nativo de SVG faz diferença

Muitas ferramentas de design tratam o SVG como formato de exportação: você desenha no modelo próprio delas, e o SVG é gerado no fim. Isso funciona para ícones simples. Mas não serve quando você precisa editar um arquivo existente, manter os ids dos quais seu CSS ou JavaScript depende, ou entender por que um arquivo é dez vezes maior do que deveria. Este editor trabalha diretamente no documento SVG. Grupos continuam grupos, gradientes continuam gradientes, e um <symbol> usado cinco vezes continua sendo um único símbolo. Quando você renomeia uma camada, está definindo o id do elemento.

Rápido com arquivos grandes

A velocidade foi um objetivo desde a primeira linha de código. O desenho é renderizado nativamente pelo seu navegador em uma camada isolada. As alças de seleção, os contornos ao passar o mouse e as guias são desenhados em uma sobreposição separada, então mover o mouse nunca mexe no seu documento. Um índice espacial (uma R-tree) encontra o que está sob o ponteiro em microssegundos, mesmo com dezenas de milhares de formas. Em documentos pesados, mover a vista e dar zoom fica a cargo do compositor da GPU, e os vetores são renderizados com nitidez de novo quando você para. Trabalhos pesados, como operações booleanas, deslocamento de caminhos e otimização de SVG, rodam em um Web Worker, para que a interface continue responsiva.

Ferramentas de precisão para trabalho vetorial

Use a ferramenta Caneta para clicar nos cantos e arrastar curvas suaves. Segure Shift para manter ângulos de 45° e Alt para quebrar uma alça. Com a ferramenta Nó, você pode arrastar um segmento para curvá-lo, clicar duas vezes para adicionar um nó ou selecionar vários nós e alinhá-los. As guias inteligentes mostram quando um objeto se alinha às bordas ou aos centros dos vizinhos e quando o espaçamento entre objetos é igual. Você também pode arrastar guias das réguas. Para valores exatos, digite X, Y, largura, altura e rotação no painel Design. Os campos aceitam contas como 120+16 ou 200/3.

Exportações limpas e pequenas

Os editores costumam deixar metadados, definições não usadas, grupos redundantes e números com precisão excessiva nos arquivos que salvam. A caixa de exportação executa em segundo plano um otimizador no estilo do SVGO. Ele arredonda os números para a precisão escolhida, converte os dados de caminho para a forma mais curta, remove metadados de editores e definições não usadas, encurta ids e cores e elimina grupos inúteis. Cada otimização pode ser desativada, e a caixa mostra o tamanho do arquivo antes e depois. Para saída rasterizada, escolha PNG, JPEG ou WebP em 1×, 2×, 4× ou um tamanho exato em pixels, com ou sem fundo transparente.

Feito para produção web

SVGs usados em sites e apps precisam de coisas diferentes das artes para impressão. A lista Cores do documento mostra todas as cores que o arquivo usa: altere uma e tudo o que a compartilha acompanha, ou converta-a em currentColor para que um ícone do React ou do Tailwind pegue a cor do CSS. Arquivos importados muitas vezes trazem grupos aninhados e transformações que dificultam a edição dos caminhos: Achatar transformações e desagrupar aplica tudo às coordenadas em um passo, e Ajustar ao conteúdo recorta o viewBox à arte, incluindo os traços. Texto em contornos e Converter traço em contorno transformam texto e espessuras de linha em caminhos simples que ficam iguais em qualquer lugar, e Simplificar remove as centenas de pontos de uma forma vetorizada ou feita à mão livre.

Seus arquivos ficam no seu dispositivo

Não há nenhum servidor por trás do editor. Abrir um arquivo o lê do seu disco para a página, e exportar gera o arquivo no seu dispositivo. O salvamento automático grava no armazenamento IndexedDB privado do seu navegador, que também guarda sua lista de arquivos recentes. Se você fechar a aba sem querer, seu último documento é restaurado na próxima visita.

Explore mais ferramentas de imagem

Perguntas frequentes

Este editor de SVG é realmente gratuito e privado?
Sim. É gratuito, não precisa de conta e roda 100% no seu navegador. Seus desenhos nunca são enviados: os arquivos são lidos localmente, o salvamento automático vai para o armazenamento do próprio navegador (IndexedDB) e as exportações são geradas no seu dispositivo.
Ele abre arquivos SVG do Illustrator, Inkscape, Figma ou de bibliotecas de ícones?
Sim. O editor trabalha diretamente no documento SVG, então arquivos do mundo real mantêm sua estrutura, ids, estilos, gradientes, símbolos, caminhos de recorte e máscaras. Arquivos bagunçados ou inválidos são reparados ao abrir, os scripts ficam desativados durante a edição e os arquivos .svgz são descompactados automaticamente.
Ele tem ferramenta Caneta e operações booleanas como o Illustrator?
Sim. A ferramenta Caneta desenha caminhos de Bézier com nós de canto, suaves e simétricos, e a ferramenta Nó permite adicionar, excluir, converter, unir, quebrar e alinhar nós. Unir, subtrair, interseccionar, excluir e dividir funcionam em curvas e as mantêm como curvas, e você também pode converter traços em contornos, deslocar e simplificar caminhos.
Posso animar um SVG?
Sim. Abra o espaço de trabalho Animar, mova o indicador de reprodução e altere a posição, a rotação, a escala, a opacidade ou as cores de um objeto: cada alteração vira um quadro-chave com uma curva de suavização, e propriedades que já estão animadas ganham um novo quadro-chave automaticamente. As animações são salvas como SVG padrão (SMIL), então rodam em qualquer navegador sem nenhum script.
Posso editar o código SVG diretamente?
Sim. O painel Código mostra o código-fonte SVG ao vivo, com realce de sintaxe. Editar o código atualiza o desenho, e editar o desenho atualiza o código. Toda alteração, de qualquer um dos lados, pode ser desfeita.
Quais formatos de exportação são aceitos?
Um SVG otimizado, gerado por um otimizador integrado no estilo do SVGO com indicação do tamanho antes e depois, e PNG, JPEG e WebP em 1×, 2×, 4× ou tamanho personalizado, com transparência opcional. Você também pode copiar a seleção como código SVG, como data URI ou como JSX para React.
Vou perder meu trabalho se o navegador fechar?
Não. Seu documento é salvo automaticamente no armazenamento local do navegador logo após cada alteração. Na próxima vez que você abrir o editor, ele restaura sua última sessão, e os documentos mais antigos continuam disponíveis em Arquivo → Arquivos recentes.
Posso fazer um ícone usar currentColor no React ou no Tailwind?
Sim. A seção Cores do documento lista todas as cores do desenho (cada forma de escrever uma cor conta uma vez). Clique em uma amostra para selecionar tudo o que a usa e alterá-la em todos os lugares de uma vez, ou escolha Converter em currentColor: o ícone passa a pegar a cor do CSS, como de uma classe text-… do Tailwind, mantendo a aparência no editor. Copie-o como componente React ou SVG para Tailwind pelo menu Editar ou pelo menu de contexto.
Como converto texto em caminhos ou um traço em uma forma preenchida?
Selecione o texto e escolha Texto em contornos (Ctrl/⌘+Shift+O): cada glifo vira um caminho exatamente onde o navegador o desenhou, incluindo texto em caminho e trechos com estilo. Para traços, Converter traço em contorno transforma o traço em uma forma preenchida com a mesma largura, terminações, junções e tracejado, para que um logotipo mantenha o peso em qualquer tamanho.
Ele consegue limpar SVGs importados com transformações e grupos aninhados?
Sim. Achatar transformações e desagrupar grava cada transformação nas coordenadas dos caminhos e desfaz os grupos em um único passo de desfazer, mantendo só o que mudaria a aparência (grupos com recorte, máscara ou referenciados). Ajustar ao conteúdo recorta a área de trabalho (viewBox, largura e altura) à arte, incluindo os traços, com margem opcional, e Simplificar reduz o número de pontos em caminhos com ruído.
Posso trabalhar em vários desenhos ao mesmo tempo?
Sim. Cada desenho abre em sua própria aba acima da área de trabalho, com seu próprio histórico de desfazer, seleção e zoom. Alterne entre eles à vontade; fechar uma aba mantém o arquivo em Arquivo → Arquivos recentes, e suas abas abertas voltam na próxima visita.
Onde estão todos os comandos? Os menus são curtos.
Os comandos relacionados ficam em submenus (Organizar, Transformar, Caminho, Recorte e máscara, Copiar como, Alinhar e distribuir…). Passe o mouse ou toque neles, ou use as setas do teclado. Todo comando também tem um atalho: pressione ? para ver a lista completa. No computador, você pode recolher o painel lateral com Ctrl/⌘+B para dar mais espaço à área de trabalho.
Funciona em celulares e tablets?
Sim. Em telas pequenas, as ferramentas vão para uma barra inferior e os painéis abrem como folhas. Use a pinça para dar zoom, arraste com dois dedos para mover a vista e toque e segure para abrir o menu de contexto.
Qual o tamanho máximo dos meus desenhos?
O editor foi feito para arquivos pesados. Ele usa um índice espacial para detecção de cliques e seleção, uma camada de sobreposição separada para alças e guias, movimento de vista e zoom só no compositor em documentos grandes e Web Workers para geometria e otimização. Documentos com dezenas de milhares de elementos continuam responsivos.
Todas as ferramentas de imagem →
Compressor de Imagens Reduza o tamanho do arquivo de imagem mantendo a qualidade visual. Conversor de Imagens Converta imagens entre PNG, JPEG, WebP, GIF, BMP, ICO, TIFF e outros formatos. Redimensionador de Imagens Redimensione imagens para dimensões exatas — perfeito para fotos de passaporte. Imagem para PDF Combine uma ou mais imagens em um único documento PDF.