04: Perché SVG? Piccolo. - Trucchi CSS

Anonim

La dimensione di un file SVG dipende da quanto è complesso, non da quanto è "grande". Ricorda che gli SVG non si preoccupano davvero delle dimensioni in cui sono renderizzati, sono flessibili e nitidi, non importa quale.

Immagina un'immagine raster di 100 × 100 pixel. Sono 10.000 pixel di informazioni. SVG sono solo istruzioni su come disegnare qualcosa, quindi se quelle istruzioni sono abbastanza semplici, possono essere un po 'più piccole rispetto alla necessità di memorizzare dati su ogni pixel. È un po 'più complesso di così, poiché la compressione entra in gioco da entrambi i lati, ma l'idea generale è lì.

Tuttavia, non è così semplice come "SVG è più piccolo" e non esiste una formula fissa per decidere quale formato utilizzare che sia sempre corretto. A volte è molto ovvio. Una forma solida del logo Apple? Il vettore sarà più piccolo per quasi tutte le dimensioni. Un'illustrazione di una quercia con molte foglie? Il vettore potrebbe essere troppo complicato e il formato di un'immagine raster sarà più piccolo.

Immagine da una presentazione di Todd Parker.

Potrebbe essere necessario salvare una copia in entrambi i modi, ottimizzarli entrambi e testare la dimensione del file.

SVG è in genere ottimo per cose come:

  • Loghi
  • Icone
  • Illustrazioni semplici
  • Grafici
  • Mappe

Scommetto che hai già un'intuizione abbastanza buona su quale tipo di grafica abbia senso essere vettoriale.

File

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