Skip to content

Por que você deve usar SVG em seu site

1 de maio de 2021

Os gráficos vetoriais escaláveis, ou SVG, desempenham um papel importante no design de sites atualmente. Se você não está usando SVG atualmente em seu trabalho de design da web, aqui estão alguns motivos pelos quais você deve começar a fazer isso, bem como alternativas que você pode usar para navegadores mais antigos que não suportam esses arquivos.

Resolução

O maior benefício do SVG é a independência de resolução. Como os arquivos SVG são gráficos vetoriais (ao contrário de imagens rasterizadas com base em pixels), você pode redimensioná-los sem perder a qualidade da imagem. Isso é especialmente útil quando você está criando sites responsivos que devem ter uma boa aparência e funcionar bem em uma ampla variedade de tamanhos de tela e dispositivos. Você pode aumentar ou diminuir os arquivos SVG para acomodar as necessidades de alteração de tamanho e layout de seu site responsivo sem comprometer sua qualidade de forma alguma. Geralmente, os SVGs têm uma aparência mais lisa e nítida do que as imagens de outros formatos, independentemente do tamanho.

Tamanho do arquivo

Um desafio com o uso de imagens raster (por exemplo, JPG, PNG, GIF) em sites responsivos é o tamanho do arquivo. Como as imagens raster não escalam da maneira que as imagens vetoriais, você deve entregar suas imagens baseadas em pixels no maior tamanho em que serão exibidas. Isso ocorre porque você sempre pode tornar uma imagem menor e manter sua qualidade, mas o mesmo não é verdadeiro para tornar as imagens maiores. O resultado são imagens muito maiores do que o tamanho em que estão sendo visualizadas, forçando os navegadores a baixar arquivos grandes. Em contraste, os gráficos vetoriais são escalonáveis, portanto, você pode usar tamanhos de arquivo muito pequenos, independentemente do tamanho que essas imagens precisem ser exibidas. Em última análise, isso otimiza o desempenho geral de um site e a velocidade de download.

Estilo CSS

Você pode adicionar SVG diretamente ao HTML de uma página. Isso é conhecido como SVG embutido. Um benefício de usar o SVG embutido é que, como os gráficos são realmente desenhados pelo navegador, não há necessidade de uma solicitação HTTP para buscar um arquivo de imagem. Outro benefício: você pode estilizar SVG embutido com CSS. Precisa mudar a cor de um ícone SVG? Em vez de editar essa imagem em um software de edição de gráficos e, em seguida, exportar e enviar o arquivo novamente, você pode alterar o arquivo SVG simplesmente com algumas linhas de CSS. Você pode usar CSS para alterar SVGs para estados de foco e outras necessidades de design também.

Animações

Como você pode estilizar arquivos SVG embutidos com CSS, também pode usar animações CSS neles. As transformações e transições CSS são duas maneiras fáceis de adicionar um pouco de vida aos SVGs. Você pode obter experiências ricas como o Flash em uma página sem usar o Flash – que o iPad não suporta mais. Na verdade, a Adobe está eliminando o Flash até o final de 2020.

Usos de SVG

Por mais poderosos que sejam os SVGs, eles não podem substituir todos os outros formatos de imagem. Fotos que exigem profundidade de cor rica ainda devem estar no formato JPG ou PNG, mas imagens simples como ícones são perfeitamente adequadas para serem executadas como SVG. O SVG também é apropriado para algumas ilustrações complexas, como gráficos, tabelas e logotipos de empresas. Todos esses gráficos se beneficiam de serem escalonáveis ​​e poderem ser estilizados com CSS.

Suporte para navegadores mais antigos

O suporte atual para SVG é muito bom em navegadores modernos. Os únicos navegadores que não oferecem suporte para esses gráficos são as versões antigas do Internet Explorer (versão 8 e inferior) e algumas versões antigas do Android. De modo geral, uma porcentagem muito pequena da população que navega ainda usa esses navegadores, e esse número continua diminuindo. Isso significa que você pode usar o SVG em seu site sem se preocupar. Se você deseja fornecer um fallback para SVG, use uma ferramenta como o Grumpicon do Filament Group. Este recurso cria PNGs a partir de seus arquivos de imagem SVG.