04: Por que SVG? Pequena. - CSS-Tricks

Anonim

O tamanho de um arquivo SVG depende de quão complexo ele é, não de quão “grande” ele é. Lembre-se de que os SVGs não se importam realmente com o tamanho em que são renderizados, eles são flexíveis e nítidos de qualquer maneira.

Imagine uma imagem raster de 100 × 100 pixels. São 10.000 pixels de informação. SVG são apenas instruções sobre como desenhar algo, portanto, se essas instruções forem simples o suficiente, elas podem ser um pouco menores do que ter que armazenar dados em cada pixel. É um pouco mais complexo do que isso, pois a compressão entra em ação em ambos os lados, mas a ideia geral está lá.

No entanto, não é tão simples quanto “SVG é menor” - e não existe uma fórmula definida para decidir qual formato usar que é sempre correto. Às vezes é muito óbvio. Uma forma sólida do logotipo da Apple? O vetor será menor para praticamente qualquer tamanho. Uma ilustração de um carvalho com muitas folhas? O vetor pode ser muito complicado e um formato de imagem raster será menor.

Imagem de uma apresentação de Todd Parker.

Você pode apenas ter que salvar uma cópia dos dois modos, otimizar ambos e testar o tamanho do arquivo.

SVG é normalmente ótimo para coisas como:

  • Logos
  • Ícones
  • Ilustrações simples
  • Gráficos
  • Mapas

Aposto que você já tem uma boa intuição sobre que tipo de gráfico faz sentido ser vetorial.

arquivos

  • 04-icon_62532.png.webp
  • 04-icon_62532.svg