Scalable Vector Graphics, ou SVG, desempenham um papel importante no design de sites hoje. Se você não estiver usando SVG em seu trabalho de web design, aqui estão algumas razões pelas quais você deve começar a fazê-lo, 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 raster baseadas 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 dimensionar arquivos SVG para cima ou para baixo para acomodar as mudanças de tamanho e necessidades de layout do seu site responsivo sem comprometer a qualidade de forma alguma.
Geralmente, os SVGs têm uma aparência mais suave e nítida do que as imagens de outros formatos, independentemente do tamanho.
Tamanho do arquivo
Um desafio com o uso de imagens rasterizadas (por exemplo, JPG, PNG, GIF) em sites responsivos é o tamanho do arquivo. Como as imagens rasterizadas não são dimensionadas da mesma forma 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 diminuir uma imagem e manter sua qualidade, mas o mesmo não é verdade para aumentar as imagens. 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.
Por outro lado, os gráficos vetoriais são escaláveis, portanto, você pode usar tamanhos de arquivo muito pequenos, independentemente do tamanho que essas imagens precisem ser exibidas. Isso otimiza o desempenho geral de um site e a velocidade de download.
Estilo CSS
Você pode facilmente adicionar SVG diretamente ao HTML de uma página. Isso é conhecido como SVG embutido. Um benefício de usar 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 inline com CSS. Precisa alterar a cor de um ícone SVG? Em vez de editar essa imagem em um software de edição gráfica e depois exportar e fazer upload do 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.
Linha de fundo
Como você pode estilizar arquivos SVG embutidos com CSS, você também pode usar animações CSS neles. Transformações e transições de CSS são duas maneiras fáceis de adicionar vida aos SVGs. Você pode obter experiências ricas do tipo 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 cores ricas ainda devem estar no formato-j.webp
SVG também é apropriado para algumas ilustrações complexas, como gráficos, tabelas e logotipos de empresas. Todos esses gráficos são escaláveis e podem 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 têm suporte para esses gráficos são as versões antigas do Internet Explorer (que a Microsoft não suporta mais) e algumas versões antigas do Android. Em suma, uma porcentagem muito pequena da população de navegação ainda usa esses navegadores, e esse número continua diminuindo. Isso significa que você pode usar SVG em seu site sem se preocupar.
Se você deseja fornecer um substituto para SVG, use uma ferramenta como o Grumpicon do Filament Group. Este recurso cria PNGs de seus arquivos de imagem SVG.
