Arquivos SVG: como abrir, criar, editar e converter
Um arquivo SVG descreve uma imagem vetorial em XML. Ele guarda caminhos, formas, preenchimentos e linhas em vez de uma grade fixa de pixels. Por isso, logotipos, ícones, gráficos e ilustrações permanecem nítidos em qualquer tamanho.
O que é SVG
SVG significa Scalable Vector Graphics e é um padrão aberto da W3C. PNG guarda pixels; SVG guarda instruções de desenho. viewBox define o sistema de coordenadas interno, enquanto width e height definem o tamanho inicial.
Quando usar SVG
Use SVG para logotipos, ícones de interface, mapas, diagramas, ilustrações lineares e animações. Fotos e texturas geralmente funcionam melhor em PNG ou JPG. Uma vetorização complexa pode ficar maior que um raster otimizado.
Como abrir um SVG
Arraste o arquivo para Chrome, Firefox, Safari ou Edge. Para conferir zoom, recorte e viewBox, abra no SVG Viewer. Inkscape, Illustrator e Figma permitem editar; um editor de código mostra o XML.
Como criar um SVG
Exporte de um aplicativo vetorial ou escreva formas simples:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
O namespace é necessário em um SVG independente. Use title quando a imagem tiver significado.
Editar e converter
Edite nós e curvas em um programa vetorial. Para mudanças pequenas, altere cores, viewBox e caminhos no XML. Verifique com SVG Editor e SVG Viewer. Limpe arquivos de terceiros com SVG Sanitizer.
- SVG to PNG para imagens raster transparentes.
- SVG to JPG para prévias sem transparência.
- SVG to PDF para revisão e impressão.
- SVG to Data URI para CSS ou HTML inline.
Antes de publicar
Confira o desenho, viewBox, proporção, recorte e contraste. Remova metadados desnecessários, saneie uploads e comprima o resultado com SVG Optimizer. Guarde a fonte editável separadamente.
Perguntas frequentes
SVG é melhor que PNG?
SVG é melhor para formas escaláveis; PNG para fotos, texturas e tamanhos fixos em pixels.
Posso abrir sem software de design?
Sim. Um navegador ou SVG Viewer exibe o arquivo.
Posso converter PNG em SVG?
O tracing cria uma aproximação em caminhos. Desenhos simples dão melhores resultados.
Por que o SVG fica vazio?
Verifique viewBox, recorte, fundo, filtros e a sintaxe XML.
SVG é seguro?
Considere uploads como XML não confiável e limpe-os antes de incorporar.
Fluxo SVGView
Visualize no SVG Viewer, edite no SVG Editor, limpe com SVG Sanitizer, otimize com SVG Optimizer e converta apenas quando o destino exigir.