In dit artikel
Wat is SVG-optimalisatie?
SVG (Scalable Vector Graphics) is een op XML gebaseerd formaat voor het beschrijven van tweedimensionale vectorafbeeldingen. Hoewel SVG's resolutie-onafhankelijk zijn en perfect schalen naar elke grootte, bevatten bestanden die uit designtools zoals Figma, Illustrator of Inkscape worden geexporteerd vaak overbodige metadata, opmerkingen, verborgen elementen en uitgebreide markup die de bestandsgrootte aanzienlijk vergroten zonder de visuele uitvoer te beinvloeden.
SVG-optimalisatie is het proces van het verkleinen van bestanden door overbodige gegevens te verwijderen en de SVG-markup te vereenvoudigen met behoud van visuele getrouwheid. Een goed geoptimaliseerde SVG kan 30-80% kleiner zijn dan zijn niet-geoptimaliseerde tegenhanger, wat resulteert in snellere paginaladen, minder bandbreedtegebruik en betere Core Web Vitals-scores.
Hoe SVG-optimalisatie werkt
Moderne SVG-optimalisatoren zoals SVGO analyseren de SVG-documentstructuur en passen een reeks transformaties toe om de bestandsgrootte te verkleinen zonder de gerenderde uitvoer te wijzigen.
- Metadata verwijderen — verwijdert editormetadata, XML-opmerkingen, verborgen elementen, lege groepen en ongebruikte definities die designtools insluiten maar browsers negeren
- Padoptimalisatie — vereenvoudigt padgegevens door decimale precisie te verminderen, absolute coordinaten naar relatieve te converteren en aangrenzende padsegmenten samen te voegen waar mogelijk
- Attribuutopschoning — verwijdert standaard attribuutwaarden, verkort kleurwaarden (bijv. #ffffff naar #fff), consolideert overbodige transformaties en integreert kleine stijlblokken
Probeer gratis — geen aanmelding vereist
Optimaliseer uw SVG →Wanneer SVG's optimaliseren
SVG-optimalisatie is waardevol overal waar vectorafbeeldingen op het web worden gebruikt, vooral wanneer prestaties en laadsnelheid van belang zijn.
- Webprestaties — geoptimaliseerde SVG's laden sneller en verminderen het totale paginagewicht, wat direct de Largest Contentful Paint (LCP) en de algehele Core Web Vitals verbetert
- Iconensystemen — iconenbibliotheken met tientallen of honderden SVG's profiteren enorm van optimalisatie, aangezien cumulatieve besparingen over veel kleine bestanden snel oplopen
- Animatievoorbereiding — schone, minimale SVG-markup is gemakkelijker te animeren met CSS of JavaScript en produceert vloeiendere animaties met minder DOM-complexiteit
Veelgestelde vragen
Is SVG-optimalisatie lossy of lossless?
De meeste SVG-optimalisatie is effectief lossless — de visuele uitvoer blijft identiek. Sommige bewerkingen zoals het verminderen van decimale precisie in padgegevens zijn technisch lossy op subpixelniveau, maar het verschil is onwaarneembaar voor het menselijk oog. U kunt het precisieniveau instellen om een balans te vinden tussen bestandsverkleining en wiskundige nauwkeurigheid.
Wanneer moet ik een SVG niet optimaliseren?
Vermijd optimalisatie als de SVG functies gebruikt die optimalisatoren onjuist kunnen wijzigen, zoals complexe filters, animaties die afhankelijk zijn van specifieke element-ID's, of SVG's waarnaar wordt verwezen door externe CSS of JavaScript. Vergelijk altijd de geoptimaliseerde uitvoer visueel voordat u deze in productie gebruikt.
Hoe verhoudt SVG-prestatie zich tot PNG?
SVG's zijn doorgaans kleiner dan PNG's voor eenvoudige afbeeldingen zoals iconen, logo's en illustraties, vooral bij hoge resoluties. Een enkele SVG vervangt meerdere PNG-formaten die nodig zijn voor verschillende schermdichtheden. Voor complexe fotografische beelden of zeer gedetailleerde illustraties met duizenden paden kunnen gerasteriseerde formaten zoals WebP of AVIF echter efficienter zijn.