Arquivos SVG.

O que você aprenderá.

• O que é um arquivo SVG?
   
• História do arquivo SVG
   
• Para que os arquivos SVG são usados?
   
• Prós e contras dos arquivos SVG
   
• Como abrir um arquivo SVG
   
• Como criar e editar um arquivo SVG
   
• Arquivos SVG: perguntas frequentes

O que é um arquivo SVG?

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.

História do arquivo 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.

Para que os arquivos SVG são usados?

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 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

Prós e contras dos arquivos SVG.

Vale a pena pesquisar as vantagens e desvantagens do SVG antes de salvar suas imagens nesse formato de arquivo.

Vantagens dos arquivos SVG.

• Ao contrário dos arquivos rasterizados, que são compostos de pixels, gráficos vetoriais como SVGs sempre mantêm sua resolução, não importa quão grandes ou pequenos eles sejam. Você não precisa se preocupar com imagens SVG perdendo sua qualidade em certos navegadores ou quando as redimensiona para aparecerem em lugares diferentes.
   
• Os arquivos SVG básicos geralmente são menores que as imagens rasterizadas, as quais são construídas a partir de muitos pixels coloridos em vez de usar algoritmos matemáticos. 
   
• Como os arquivos SVG tratam o texto como texto (e não como desenho), os leitores de tela podem escanear qualquer palavra contida nas imagens SVG. Isso é muito útil para as pessoas que precisam de ajuda para ler as páginas da Web. Os mecanismos de pesquisa também podem ler e indexar textos de imagens SVG.

Desvantagens dos arquivos SVG.

• Os arquivos SVG são ótimos para gráficos da Web, como logotipos, ilustrações e gráficos. Mas a ausência de pixels dificulta a exibição de fotos digitais de alta qualidade. Os arquivos JPEG são geralmente melhores para fotografias detalhadas. 
   
• Somente navegadores modernos são compatíveis com imagens SVG. Você pode achar um desafio utilizar arquivos SVG com o Internet Explorer 8 e outros navegadores mais antigos.
   
• O código contido nas imagens SVG pode ser difícil de entender se você nunca usou esse formato. 

Como abrir um arquivo SVG.

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.

Como criar e editar um arquivo SVG.

Siga estas etapas ao usar o Adobe Photoshop: 

1. Depois de montar a imagem no Photoshop, clique em Arquivo > Exportar > Exportar como.
    
2. Clique no menu suspenso Formato dentro da caixa que aparece e selecione SVG.
    
3. Selecione Exportar tudo e salve o arquivo. 

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.

Arquivos SVG: perguntas frequentes.

Os arquivos SVG suportam animação?

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.

Como posso identificar um arquivo SVG?

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.

Os arquivos SVG só podem ser usados na Internet?

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.

Qual é o tamanho dos arquivos SVG?

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.

Qual é a diferença entre os arquivos SVG e PNG?

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.