04: ¿Por qué SVG? Pequeño. - Trucos CSS

Anonim

El tamaño de un archivo SVG depende de cuán complejo sea, no de cuán "grande" sea. Recuerde que a los SVG realmente no les importa en qué tamaño se renderizan, son flexibles y nítidos sin importar qué.

Imagine una imagen rasterizada de 100 × 100 píxeles. Eso es 10,000 píxeles de información. SVG son solo instrucciones sobre cómo dibujar algo, por lo que si esas instrucciones son lo suficientemente simples, pueden ser un poco más pequeñas que tener que almacenar datos en cada píxel. Es un poco más complejo que eso, ya que la compresión entra en juego en ambos lados, pero la idea general está ahí.

Sin embargo, no es tan simple como "SVG es más pequeño", y no existe una fórmula establecida para decidir qué formato usar que sea siempre correcto. A veces es muy obvio. ¿Una forma sólida del logo de Apple? El vector será más pequeño para prácticamente cualquier tamaño. ¿Una ilustración de un roble con muchas hojas? El vector puede ser demasiado complicado y un formato de imagen de trama será más pequeño.

Imagen de una presentación de Todd Parker.

Es posible que deba guardar una copia en ambos sentidos, optimizar ambos y probar el tamaño del archivo.

SVG suele ser excelente para cosas como:

  • Logotipos
  • Iconos
  • Ilustraciones simples
  • Gráficos
  • Mapas

Apuesto a que ya tienes bastante intuición sobre qué tipo de gráficos tienen sentido para ser vectoriales.

Archivos

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