O Scalable Vector Graphics (SVG) é um formato de arquivo vetorial compatível com a Web. Ao contrário dos arquivos rasterizados baseados em pixels, como JPEGs, os arquivos vetoriais armazenam imagens por meio de fórmulas matemáticas baseadas em pontos e linhas em uma grade. Isso significa que arquivos vetoriais, como SVG, podem ser redimensionados significativamente sem perder nenhuma de suas qualidades, o que os torna ideais para logotipos e gráficos online complexos.
Não são apenas suas habilidades de redimensionamento que tornam os SVGs muito populares entre os web designers. Os SVGs são escritos em código XML, o que significa que eles armazenam qualquer informação de texto como texto literal e não como formas. Isso permite aos mecanismos de pesquisa, como o Google, ler gráficos SVG para suas palavras-chave, o que pode potencialmente ajudar um site a subir no ranking de busca.
Você pode identificar facilmente um arquivo SVG pela extensão .svg.
Os Scalable Vector Graphics percorreram um longo caminho nos últimos anos, mas para que servem os SVGs na prática?
Ícones e logotipos do site.
Os designers normalmente usam SVGs para exibir ícones de sites como botões, assim como logotipos de empresas. A capacidade desse tipo de arquivo de aumentar ou reduzir sem nunca comprometer sua qualidade o torna ideal para gráficos que precisam aparecer em vários lugares e em diversos tamanhos.
Infográficos e ilustrações.
Graças ao uso de XML nos arquivos SVG, os mecanismos de pesquisa, como o Google, conseguem ler gráficos e tabelas com muito texto, o que pode ajudar na otimização de mecanismo de pesquisa. Como o Google pode detectar palavras-chave dentro dos SVGs, ele pode empurrar uma página Web para uma posição mais alta nos resultados de pesquisa. Além disso, para ajudar a tornar as páginas Web muito mais interessantes, os SVGs também aceitam animação.
Descubra mais arquivos vetoriais
O formato do arquivo SVG não é apenas para imagens estáticas. Você descobrirá uma gama de ferramentas online para inserir elementos móveis nos seus gráficos da Web. As animações SVG podem incluir elementos relativamente básicos, como um controle deslizante para mover entre diferentes slides em um infográfico. Também é possível fazer as ilustrações se movimentarem, como ponteiros de um relógio.
A maneira mais fácil de localizar um arquivo SVG é verificando o código de extensão. Um SVG aparece como um arquivo .svg. Você também pode detectar imagens vetoriais, como SVGs, ampliando-as para 200% ou mais na tela do seu computador. Uma imagem vetorial manterá linhas nítidas e cores sólidas, em vez de pixeladas ou desfocadas.
Embora as imagens SVG sejam usadas principalmente na Web, elas têm vida além do mundo online. Por exemplo, como eles não se distorcem quando redimensionados em relação às dimensões originais, os arquivos SVG são úteis como modelos para impressão em roupas, como camisetas. Um arquivo JPEG criado com muitos pixels não manteria essa nitidez.
O tamanho de um arquivo SVG depende de quantos dados de imagem ele contém, mas geralmente é menor que a maioria dos outros tipos de arquivo. Gráficos complexos com muitos caminhos e pontos de ancoragem ocupam mais espaço de armazenamento do que designs mais simples e nítidos. Tente minimizar o número de instruções complexas contidas no arquivo.
Resumindo, os SVGs são arquivos vetoriais, e os PNGs são arquivos rasterizados. Se você estica ou reduz muito um arquivo PNG, ele se torna borrado e pixelado. Os SVGs não contêm nenhum pixel, portanto, nunca perderão a resolução. Além disso, os PNGs não são compatíveis com animação.
