Guia
O que é SVG? O arquivo .svg explicado
SVG é a sigla de Scalable Vector Graphics, ou gráficos vetoriais escaláveis. Um arquivo SVG descreve a imagem com formas e coordenadas em vez de pixels, por isso fica nítido em qualquer tamanho.
O que é um arquivo SVG
Um SVG é um arquivo de texto escrito em XML. Em vez de guardar a cor de cada pixel, ele guarda instruções: desenhe um círculo aqui, um caminho por estes pontos, preencha com esta cor. O navegador ou o editor lê essas instruções e desenha a imagem no tamanho em que ela for exibida.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Esse trecho é um SVG completo: um círculo verde-limão em uma área de 100 por 100 unidades. Por ser texto, um SVG pode ser aberto em um editor de código, pesquisado, comprimido e alterado à mão.
O SVG é um padrão aberto do World Wide Web Consortium, publicado pela primeira vez em 2001 (W3C). Todos os navegadores modernos o exibem sem plugins.
O que é a extensão de arquivo .svg
Os arquivos SVG usam a extensão .svg e o tipo de mídia image/svg+xml. Uma variante comprimida, .svgz, é o mesmo arquivo compactado com gzip. Alguns programas de plotters de recorte e de criação de fontes também usam SVG, mas o formato é o mesmo.
Para que serve o formato SVG
- Logos e ícones em sites e aplicativos, porque um único arquivo fica nítido em qualquer densidade de tela.
- Ilustrações, gráficos e mapas que precisam de zoom ou de impressão em tamanho grande.
- Animações e gráficos interativos, já que cada forma pode receber estilo com CSS ou ser alterada com JavaScript.
- Plotters de recorte e cortadoras a laser, que seguem os contornos das formas.
- Favicons nos navegadores modernos.
O SVG não é uma boa escolha para fotos. Uma foto tem tons contínuos que exigiriam milhões de formas minúsculas; JPG e WebP a guardam de forma muito mais eficiente.
Como abrir um arquivo SVG
Qualquer navegador abre um SVG: arraste o arquivo para uma janela do Chrome, Firefox, Safari ou Edge. Para ver o código ao lado da imagem, use o nosso visualizador SVG. Para editar o desenho, use um editor vetorial como o Inkscape (gratuito), o Figma ou o Adobe Illustrator. No Windows, o Explorador de Arquivos pode mostrar miniaturas de SVG com uma extensão; no Mac, a Visualização Rápida mostra o arquivo com a barra de espaço.
Arquivo SVG ou PNG: diferenças
| SVG | PNG | |
|---|---|---|
| Feito de | Formas e coordenadas | Pixels |
| Ampliação | Nítido em qualquer tamanho | Borra quando ampliado |
| Transparência | Sim | Sim |
| Editável como texto | Sim | Não |
| Melhor para | Logos, ícones, diagramas | Capturas de tela, imagens detalhadas, lugares que não aceitam SVG |
Dá para ir nos dois sentidos: o conversor de PNG para SVG transforma pixels em formas, e o conversor de SVG para PNG transforma formas em pixels no tamanho que você escolher.