O formato de arquivo SVG é uma ferramenta popular para exibir gráficos bidimensionais, tabelas e ilustrações em sites. Além disso, como um arquivo vetorial, ele pode ser aumentado ou reduzido sem perder resolução. Saiba mais sobre os principais recursos das imagens SVG, seus prós e contras, e como o formato SVG tem evoluído.
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.
A história do arquivo SVG remonta ao final dos anos 90, quando o World Wide Web Consortium (W3C) solicitou propostas de desenvolvedores para um novo tipo de formato gráfico vetorial. Seis propostas concorrentes foram apresentadas e ajudaram a moldar o que, por fim, tornou-se o formato SVG do W3C.
Os SVGs levaram algum tempo para ganhar popularidade. Havia relativamente pouco apoio para eles até 2017, quando as pessoas começaram a ver os benefícios de usar os SVGs nos navegadores Web modernos. Os arquivos SVG são agora amplamente utilizados para imagens 2D de sites porque a maioria dos navegadores e aplicativos de desenho para arquivos vetoriais são compatíveis com esse formato.
Os Scalable Vector Graphics percorreram um longo caminho nos últimos anos, mas para que servem os SVGs na prática?
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.
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 da busca. 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 busca. 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
Vale a pena pesquisar as vantagens e desvantagens do SVG antes de salvar suas imagens nesse formato de arquivo.
Do Chrome e Edge ao Safari e Firefox, atualmente todos os principais navegadores permitem que você abra arquivos SVG, quer use Mac ou Windows. Basta iniciar seu navegador e clicar em Arquivo > Abrir para escolher o arquivo que você deseja visualizar. Em seguida, ele será exibido no seu navegador.
Abrir uma imagem SVG com um programa incorporado no seu computador também é muito fácil. Clique duas vezes no nome do arquivo para ver uma lista de programas para abri-lo. Caso contrário, ele será aberto automaticamente em um programa compatível.
Siga estas etapas ao usar o Adobe Photoshop:
Importante: como o Photoshop é um editor gráfico rasterizado, muitas pessoas preferem criar e editar arquivos SVG no Adobe Illustrator, um editor gráfico vetorial.
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 pixelizadas 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 ocuparão 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 pixelizado. 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.
Saiba mais sobre outro formato popular de gráficos e logotipos para a Web.
Descubra por que os arquivos JPEG são projetados com fotos digitais complexas em mente.
Conheça esse novo tipo de arquivo rasterizado com as mentes da Apple.
Descubra esse formato vetorial amplamente utilizado, desenvolvido para o Adobe Illustrator.
Crie ilustrações e artes vetoriais incríveis.
Após 7 dias grátis, R$90,00/mês.
Crie layouts de página elegantes para impressão e mídia digital.
Após 7 dias grátis, R$90,00/mês.
Tenha o conjunto completo de aplicativos de criação e muito mais.
Após 7 dias grátis, R$224,00/mês.