Editor de SVG online grátis — desenhe formas e texto e baixe em SVG

Desenhe formas, setas, linhas à mão livre e texto em uma tela e baixe um SVG ou PNG limpo. Grátis, no navegador, sem cadastro.

Clique em uma forma para selecioná-la, arraste para mover, arraste uma alça para redimensionar. As setas do teclado fazem ajustes finos (Shift para 10 px).

Atalhos de teclado

V Selecionar / mover
R Retângulo
E Elipse
G Triângulo
S Estrela
L Linha
A Seta
P Caneta à mão livre
T Texto
Ctrl/⌘ Z desfaz, com Shift refaz
Ctrl/⌘ D duplica
Del exclui o que está selecionado
Setas move 1 px, com Shift 10 px
Shift ao desenhar: quadrado, círculo, linha a 45°
Esc desmarca ou cancela um arraste

Tudo acontece no seu navegador: nada é enviado, e seu desenho é salvo automaticamente no próprio dispositivo, para que você não o perca ao atualizar a página. Precisa de um logo, um diagrama ilustrado ou uma identidade visual completa em vez de um esboço rápido? Conheça mais ferramentas grátis.

Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.

Este editor de SVG grátis permite desenhar um gráfico vetorial no navegador e baixá-lo como SVG limpo ou PNG, sem conta e sem enviar nada. Escolha uma ferramenta de forma, arraste na tela, defina o preenchimento e o contorno, acrescente uma seta e um rótulo, e o arquivo está pronto. Ele foi feito para o trabalho de trinta segundos: um diagrama para um slide, um ícone simples, um logo provisório, uma caixa com anotações para a documentação.

Ele não é, de propósito, um clone do Illustrator. Não há painéis de camadas, operações booleanas nem edição de nós bézier, porque é isso que faz as suítes vetoriais completas levarem uma tarde para aprender. Em vez disso, você tem todas as ferramentas de que um desenho rápido precisa, atalhos de teclado para todas elas, um desfazer que funciona como você espera e uma exportação que contém só as suas formas: sem metadados do editor, sem fontes incorporadas, sem surpresas quando você abre o arquivo em outro lugar.

Como usar

Escolha um tamanho de tela entre as predefinições (ícone, post quadrado, Full HD) ou digite o seu, e escolha um fundo transparente ou colorido.
Selecione uma ferramenta: retângulo (R), elipse (E), triângulo, estrela, linha (L), seta (A), caneta à mão livre (P) ou texto (T). Arraste na tela para desenhar; segure Shift para um quadrado, círculo ou linha de 45° perfeitos.
Clique em uma forma com a ferramenta de seleção (V) para movê-la, arraste uma alça para redimensioná-la e edite o preenchimento, o contorno, a opacidade ou o raio dos cantos no painel. As setas do teclado movem 1 px; com Shift, 10 px.
Duplique com Ctrl/⌘ D, exclua com Del, reordene com os botões Frente / Trás e desfaça qualquer coisa com Ctrl/⌘ Z.
Baixar SVG gera um arquivo escalável, Baixar PNG (1× a 3×) gera um bitmap, e Copiar código permite colar o SVG direto no HTML. Seu desenho é salvo automaticamente neste navegador caso você queira voltar a ele.

Perguntas frequentes

Este editor de SVG é mesmo grátis e sem cadastro?

Sim. Não há conta, marca d'água, limite de exportação nem oferta de upgrade. O editor roda inteiramente no seu navegador; você pode se desconectar da internet depois que a página carregar e ele continua funcionando. Criamos essas ferramentas porque elas trazem pessoas ao site, e algumas delas depois precisam do trabalho de design, web ou software que fazemos para clientes.

O que dá para desenhar com ele?

Retângulos (com cantos arredondados), elipses e círculos, triângulos, estrelas de cinco pontas, linhas retas, setas, traços de caneta à mão livre e texto em três famílias de fontes. Cada forma tem preenchimento, contorno, espessura do contorno e opacidade próprios, pode ser movida, redimensionada, duplicada e reordenada, e se encaixa em uma grade de 10 px se você quiser. Isso cobre diagramas, ícones simples, anotações e logos provisórios. Não cobre edição de nós bézier, degradês, camadas nem operações booleanas; para isso, use o Inkscape ou o Figma.

Posso abrir e editar um arquivo SVG existente?

Em parte, e o editor diz exatamente em que parte. Abrir SVG importa retângulos, círculos, elipses, linhas, polilinhas, polígonos, paths e texto, mantendo cores e posições. O que ele não consegue representar fielmente é ignorado em vez de estragado, e uma mensagem informa o que ficou de fora: elementos com o atributo transform, grupos com transformações, referências <use> e <image>, preenchimentos com degradê e folhas de estilo CSS. Ícones e diagramas simples abrem sem problemas; uma ilustração complexa exportada do Illustrator geralmente não, e preferimos dizer isso a fingir o contrário.

Devo baixar em SVG ou PNG?

SVG se o gráfico vai ser redimensionado, editado depois ou usado em um site: ele continua nítido em qualquer tamanho, geralmente é bem menor que um PNG e pode ser estilizado com CSS. PNG se você precisa de um bitmap fixo: colar em um documento ou slide que lida mal com SVG, enviar para uma plataforma que recusa SVG ou mandar para alguém que só quer uma imagem. As opções 2× e 3× dão um PNG nítido para telas de alta densidade. Na dúvida, baixe os dois; são grátis.

Meu desenho é enviado para algum lugar?

Não. Desenho, edição e exportação acontecem no seu navegador com as APIs padrão de SVG e Canvas. Nada é enviado ao nosso servidor. O desenho é salvo automaticamente no armazenamento local do navegador, para que uma atualização da página ou o fechamento acidental da aba não o perca; essa cópia fica no seu dispositivo e é apagada quando você clica em Novo.

Posso usar os arquivos SVG comercialmente?

Sim. O que você desenha é seu, sem licença associada e sem necessidade de atribuição, para uso pessoal ou comercial. O arquivo exportado contém só as suas formas e marcação SVG padrão, então não há nada nosso nele para licenciar.

Por que a exportação fica um pouco diferente da tela?

O editor desenha com o mesmo SVG que o seu navegador vai renderizar, então as formas são idênticas. Duas coisas podem variar: a grade, que existe só no editor e nunca é exportada, e o texto, que usa famílias de fontes genéricas (Arial, Georgia, Courier New) para que o arquivo seja renderizado igual em qualquer máquina sem incorporar fontes. Se um visualizador não tiver uma dessas fontes, ele usa uma equivalente parecida, o que pode mudar a largura do texto em alguns pixels.

SVG ou PNG: o que a diferença realmente significa

Um SVG é um arquivo de texto que descreve formas: um retângulo nestas coordenadas, com esta largura, nesta cor. Um PNG é uma grade de pixels. Essa única diferença explica todas as consequências práticas. O SVG se ajusta a qualquer tamanho sem borrar, muitas vezes tem poucas centenas de bytes para um diagrama simples, pode ser editado depois e pode ter as cores alteradas com CSS em uma página web. O PNG fica fixo no tamanho em que foi exportado, fica mais pesado à medida que a imagem cresce e só pode ser editado como pixels.

SVG é o padrão certo para logos, ícones, diagramas e qualquer coisa em um site. PNG é o certo quando o destino não aceita SVG (muitos clientes de e-mail, algumas ferramentas de documentos, a maioria das redes sociais) ou quando quem recebe só quer uma imagem para colocar em qualquer lugar. O editor exporta os dois a partir do mesmo desenho, então a escolha não custa nada.

Para que este editor serve, e para que não serve

• Diagramas rápidos: caixas, setas e rótulos para um slide, um README ou um chamado de suporte. A grade e o encaixe mantêm tudo alinhado sem esforço.

• Ícones simples e favicons: desenhe em 256 × 256 ou 512 × 512 com fundo transparente, baixe o SVG e depois passe pelo gerador de favicon para obter todos os tamanhos de que um site precisa.

• Logos e marcas provisórios: uma forma, uma letra, uma cor. O suficiente para tirar um protótipo ou uma apresentação para investidores da fase do espaço em branco.

• Anotações: abra um gráfico ou diagrama SVG simples, acrescente um círculo e uma seta em volta da parte que você está discutindo e exporte.

Ele não é a ferramenta para ilustração, design com muita tipografia ou qualquer coisa com curvas que você precise modelar ponto a ponto. Os traços à mão livre são suavizados automaticamente, mas não podem ser editados depois. Para esse tipo de trabalho, o Inkscape é grátis e excelente, e o plano gratuito do Figma serve bem para gráficos de interface. Saber a hora de partir para algo maior faz parte de usar bem uma ferramenta pequena.

Dicas para arquivos SVG limpos

Desenhe no tamanho que você pretende usar. Um ícone desenhado em uma tela de 1920 × 1080 é exportado com esse viewBox, e todo mundo que o usar vai ter de redimensioná-lo. Defina antes a tela nas dimensões pretendidas; as predefinições cobrem as mais comuns.

Prefira contorno a preenchimento em desenhos de linha e mantenha a espessura dos contornos consistente; espessuras misturadas são o jeito mais rápido de deixar um diagrama com cara de amador. Duas ou três cores quase sempre bastam, e as amostras do painel foram escolhidas para combinar entre si.

Mantenha o texto como texto. Este editor exporta elementos <text> de verdade em vez de convertê-los em paths, o que deixa o arquivo minúsculo e pesquisável e permite mudar o texto depois. Se uma ferramenta mais adiante exigir contornos, faça essa conversão lá, na última etapa.

Deixe o fundo transparente, a menos que você precise de uma cor específica. Um SVG transparente se encaixa em qualquer página ou slide; um retângulo branco atrás de um logo, não.

Ferramentas grátis relacionadas

Criador de diagrama ER — Escreva o esquema do seu banco de dados como texto e veja o diagrama entidade-relacionamento ser renderizado ao vivo. Exporte para PDF ou SVG.
Criador de mapas mentais — Digite uma lista de tópicos com recuo e veja o mapa mental na hora — exporte em PDF ou SVG. Sem conta, sem arrastar e soltar.
Gerador de favicon — Transforme qualquer logotipo num pacote completo de favicons (favicon.ico, todos os tamanhos em PNG, Apple touch icon e webmanifest) com um clique.
Conversor de imagens — Converta entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP e SVG. A maioria das conversões nem sai do seu navegador.