A magia do SVG - UX-REPUBLIC

SVG o futuro da imagem da Web?

NB: SVG é um formato de imagem vetorial, comumente usado para ilustrações, logotipos, etc. Mas há pouco ou nenhum interesse em certos tipos de imagens (fotografias, etc.).
Qual web designer ainda não teve esse grande debate: “é SVG o formato de imagem do futuro da web”? Com problemas de vários dispositivos, as imagens vetoriais parecem ser a panacéia. Infinitamente redimensionável, uma imagem é suficiente para todos os tipos de telas.
No entanto, os críticos do SVG têm um forte argumento. SVG pode ser pesado... Acho que essa afirmação merece investigação.

De volta à noção do peso de uma imagem

A digitalização de imagens, que se desenvolveu na década de 80, deu origem a duas técnicas distintas. Isso existe :

Imagens raster,
Dsão imagens vetoriais.

Imagens raster

As imagens raster (bitmap) são compostas pela montagem de pixels (unidade básica usada para medir a definição de uma imagem digital raster. Seu nome vem da frase em inglês elemento de imagem, que significa elemento de imagem).
Uma imagem é representada por uma matriz de pixels. Um pixel é representado por sua cor, codificada pelo número de bits.
1 bit: 2 cores (preto e branco)
4 bits: 16 cores (ou níveis de cinza) possíveis
8 bits (1 byte): 256 possíveis
24 bits (3 bytes): 16 milhões possíveis
E 1 kilobyte ( ko ) = 1 bytes
O peso de uma imagem raster depende, portanto, do seu número de pixels, que por sua vez depende do número de cores usadas.

Imagens vetoriais

As imagens vetoriais consistem na descrição dos elementos constituintes (figuras geométricas simples, segmentos de reta, curvas de Bézier, etc.), sua cor e sua localização.
O tamanho de uma imagem SVG depende de sua complexidade. As coordenadas, dimensões e estruturas dos objetos vetoriais são indicadas de forma numérica em XML.
Um sistema de estilo específico (CSS ou XSL) permite indicar as cores e fontes a serem utilizadas. Este formato suporta algumas formas geométricas básicas (retângulos, elipses, etc.), mas também caminhos (caminhos), que usam curvas de Bézier e, assim, permitem obter praticamente qualquer forma. O preenchimento pode ser feito usando gradientes (gradientes) cores padrão (de cinto de segurança) que são quaisquer objetos SVG ou filtros. Você também pode aplicar padrões ao longo dos caminhos (marcadores) e use as funções de preenchimento. O canal alfa, para transparência, é gerenciado em todos os níveis.

Quanto mais informações houver, mais pesada será a imagem.
(Não entre em pânico, não há necessidade de codificar para fazer SVG, você pode exportar a imagem em svg diretamente do ilustrador em particular).

Por que uma imagem pesada é ruim?

O peso aumenta o tempo de carregamento de uma página. É certo que hoje a fibra está se espalhando e esse tipo de problema surge menos, exceto que… os smartphones também são uma legião e o 3G está trazendo de volta esse problema de carregamento acentuando-o. Como diria um dos meus colegas:

Uma imagem grande demora muito para carregar, então em uma conexão 3G, o carregamento é caro e a exibição não é perfeita. Em outras conexões, um navegador não consegue fazer mais de duas requisições simultâneas para o mesmo servidor; com quatro imagens grandes, é preciso esperar as duas primeiras carregarem completamente antes de carregar as outras.

Portanto, não é mais útil provar a você que a leveza é melhor (no que diz respeito às imagens, é claro!).

Lugar para testar

Vamos acompanhar a evolução de uma imagem, tornando-se gradualmente mais complexa para comparar seu peso entre o png e o svg. Eu então uso ImageOptim (https://imageoptim.com/fr.html) para reduzir o tamanho das imagens png (PNG otimizado). Eu então compacto meu SVG (formato SVGZ).

1 – Imagem básica

2 – Imagem com várias formas

3 – Adicionando um fundo gradiente

4 – Adicionando uma forma complexa (as listras)

5 – Adicionando sombras projetadas

6 – Finalmente exporto esta última imagem em png colocando 1200 px de largura. O SVG sendo vetorial, mantém o mesmo peso qualquer que seja o lugar que ocupe na tela do internauta, não é o caso do png.

	PNG	PNG otimizado	SVG	SVGZ
1	4 KB	3 KB	4 KB	2 KB
2	8 KB	4 KB	12 KB	4 KB
3	29 KB	20 KB	13 KB	4 KB
4	87 KB	77 KB	33 KB	8 KB
5	96 KB	89 KB	34 KB	8 KB
6	219 KB	196 KB	34 KB	8 KB

Minha experiência tem o defeito de ser um caso específico, não tem caráter universal. No entanto, demonstra que SVG não é necessariamente mais pesado que PNG… Realmente não (por outro lado, você tem que respeitar algumas regras básicas [intuitivas], como não deixar objetos ocultos, de preferência usando formas vetoriais…).

Você encontrará as fontes da minha experiência seguindo este link: https://github.com/apdr/The-Magic-of-SVG.

Saiba mais

Por Ana Pedro

UX-ACTIVIST na UX-REPUBLIC

Nenhum evento encontrado!