04: Pourquoi SVG? Petit. - Astuces CSS

Anonim

La taille d'un fichier SVG dépend de sa complexité et non de sa «taille». N'oubliez pas que les SVG ne se soucient pas vraiment de la taille à laquelle ils sont rendus, ils sont flexibles et nets quoi qu'il arrive.

Imaginez une image raster de 100 × 100 pixels. Cela représente 10 000 pixels d'informations. SVG n'est que des instructions sur la façon de dessiner quelque chose, donc si ces instructions sont assez simples, elles peuvent être un peu plus petites que d'avoir à stocker des données sur chaque pixel. C'est un peu plus complexe que cela, car la compression entre en jeu des deux côtés, mais l'idée générale est là.

Ce n'est pas aussi simple que «SVG est plus petit» cependant - et il n'y a pas de formule fixe pour décider quel format utiliser qui est toujours correct. Parfois, c'est très évident. Une forme solide du logo Apple? Le vecteur sera plus petit pour à peu près toutes les tailles. Une illustration d'un chêne avec beaucoup de feuilles? Le vecteur peut être trop compliqué et un format d'image raster sera plus petit.

Image d'une présentation de Todd Parker.

Vous devrez peut-être simplement enregistrer une copie dans les deux sens, optimiser les deux et tester la taille du fichier.

SVG est généralement idéal pour des choses comme:

  • Logos
  • Icônes
  • Illustrations simples
  • Graphiques
  • Plans

Je parie que vous avez déjà une assez bonne intuition sur le type de graphisme qui a du sens pour être vectoriel.

Des dossiers

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