Editor SVG
Edite arquivos SVG no navegador. Cole o codigo, pre-visualize ao vivo, altere dimensoes e cores, baixe o SVG modificado.
Principais recursos
- Pré-visualização ao vivo do código SVG
- Edição de largura, altura e viewBox
- Localizar e substituir cores
- Baixar ou copiar o SVG modificado
Guide
SVG (Scalable Vector Graphics) é um formato de imagem baseado em XML que descreve formas, caminhos e texto usando coordenadas matemáticas em vez de grades de pixels. Ao contrário dos formatos raster (PNG, JPEG, WebP), imagens SVG escalam para qualquer tamanho sem perder qualidade. Um ícone de 24px e um logo do tamanho de um outdoor podem usar o mesmo arquivo SVG. Isso torna o SVG o formato padrão para ícones, logos, ilustrações, gráficos e qualquer imagem que precise ser renderizada com nitidez em múltiplos tamanhos. Este guia cobre a estrutura do SVG, técnicas de edição, estratégias de otimização e uso prático em desenvolvimento web. Um arquivo SVG é um documento de texto. Você pode abri-lo em qualquer editor de código e lê-lo. O elemento raiz é <svg> com atributos de largura, altura e viewBox. O viewBox define o sistema de coordenadas: viewBox="0 0 100 100" significa que a área de desenho vai de (0,0) a (100,100). Dentro do elemento <svg>, você encontra elementos de forma como <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> e <path>. Cada elemento tem atributos que definem sua geometria, cor de preenchimento, cor do contorno, espessura do contorno e outras propriedades visuais. Entender essa estrutura é essencial para editar SVGs de forma eficaz porque cada mudança visual que você faz em um editor gráfico mapeia para uma mudança nessa marcação XML. O elemento <path> é o elemento SVG mais poderoso e mais complexo. Ele usa uma string compacta de comandos em seu atributo d para descrever qualquer forma arbitrária. Os comandos são: M (mover para), L (linha para), H (linha horizontal), V (linha vertical), C (curva de Bezier cúbica), S (Bezier cúbica suave), Q (curva de Bezier quadrática), T (Bezier quadrática suave), A (arco elíptico) e Z (fechar caminho). Letras maiúsculas usam coordenadas absolutas. Letras minúsculas usam coordenadas relativas. Um caminho típico parece com d="M10 10 L90 10 L90 90 L10 90 Z\
Perguntas frequentes
Meus dados SVG estão seguros?
Sim, todo o processamento acontece no seu navegador. Nenhum dado é enviado a qualquer servidor.
Posso editar SVGs complexos?
Sim, você pode editar qualquer código SVG válido. A ferramenta suporta todos os elementos e atributos padrão do SVG.
