04: Waarom SVG? Klein. ​ CSS-trucs

Anonim

De grootte van een SVG-bestand hangt af van hoe complex het is, niet hoe "groot" het is. Onthoud dat SVG's niet echt kunnen schelen op welke grootte ze worden weergegeven, ze zijn hoe dan ook flexibel en scherp.

Stel je een rasterafbeelding van 100 × 100 pixels voor. Dat zijn 10.000 pixels aan informatie. SVG is slechts instructies voor het tekenen van iets, dus als die instructies eenvoudig genoeg zijn, kunnen ze een stuk kleiner zijn dan dat u gegevens op elke pixel moet opslaan. Het is een beetje ingewikkelder dan dat, omdat compressie aan beide kanten een rol speelt, maar dat het algemene idee er is.

Het is echter niet zo eenvoudig als "SVG is kleiner" - en er is geen vaste formule om te beslissen welk formaat moet worden gebruikt dat altijd correct is. Soms is het heel duidelijk. Een solide vorm van het Apple-logo? Vector zal voor vrijwel elk formaat kleiner zijn. Een illustratie van een eik met veel bladeren? De vector is mogelijk te gecompliceerd en het formaat van een rasterafbeelding zal kleiner zijn.

Afbeelding uit een presentatie van Todd Parker.

Mogelijk moet u een kopie op beide manieren opslaan, beide optimaliseren en de bestandsgrootte testen.

SVG is doorgaans geweldig voor zaken als:

  • Logo's
  • Pictogrammen
  • Eenvoudige illustraties
  • Grafieken
  • Kaarten

Ik wed dat je al een redelijk goede intuïtie hebt over wat voor soort afbeeldingen zinvol zijn om vector te zijn.

Bestanden

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