SVG-bestand te groot? 8 tips voor compressie en optimalisatie

Een SVG weegt vaak honderden KB of zelfs enkele MB, meestal door te veel ankerpunten, overbodige paden, metadata van de editor en een te hoge decimale precisie. De 8 tips hieronder staan in de volgorde "van bron tot oplevering" en zijn allemaal in de praktijk toepasbaar.

1. Padniveau: minder ankerpunten, paden samenvoegen

Tip 1: minder ankerpunten (pad vereenvoudigen)

Hoe meer ankerpunten, hoe groter het bestand en hoe trager de weergave. Verhoog bij het converteren de gladheid enigszins, zodat er vanaf de bron minder ankerpunten ontstaan; voor bestaande SVG's gebruik je in Illustrator "Object → Pad → Vereenvoudigen" of in Inkscape "Pad → Vereenvoudigen" (Ctrl+L) om overbodige ankerpunten te schrappen. In de conversietool van PolySVG kun je gladheid en aantal kleuren ook live afwegen tegen effect en volume.

Tip 2: paden en lagen samenvoegen

Voeg meerdere paden met dezelfde vulkleur samen tot één pad, zodat herhaalde attributen verdwijnen; vlak betekenisloze geneste groeperingen af en verwijder verborgen lagen en lege elementen. In ontwerpsoftware gebruik je de unie van de padverkenner, of je voegt lagen samen vóór de export.

2. Inhoud van het bestand: metadata weg, precisie omlaag

Tip 3: metadata van de editor verwijderen

SVG's uit Illustrator en Inkscape bevatten vaak namespaces van de editor, <metadata>, commentaar en exportinstellingen, die de weergave niet beïnvloeden en die je handmatig kunt wissen of door SVGO kunt laten opschonen. Let op dat je <title> en <desc> behoudt, want die zijn nuttig voor toegankelijkheid.

Tip 4: decimale precisie verlagen

Padcoördinaten hebben vaak 6 tot 8 decimalen, terwijl het scherm er 1 of 2 nodig heeft. Zet in de SVGO-configuratie de numerieke precisie (floatPrecision) op 1 of 2: het volume daalt duidelijk en met het oog is er geen verschil. Bij heel kleine pictogrammen moet je oppassen dat de coördinaten niet te ver worden ingekort, want dan verliest de vorm te veel.

3. Automatisering: SVGO met één klik

Tip 5: automatisch optimaliseren met SVGO

SVGO is de feitelijke standaard voor het optimaliseren van SVG, met tientallen ingebouwde plug-ins: commentaar en metadata verwijderen, paden samenvoegen, padopdrachten optimaliseren, waarden opschonen en meer. Basisgebruik:

npx svgo input.svg -o output.svg

Bij typische bestanden is de winst 30%-70%. Let op twee dingen: verwijder het attribuut viewBox niet, want dan gaat het schalen mis; en laat bij pictogrammen die met CSS van kleur moeten wisselen de fill-overerving intact, zodat de kleur niet vastligt.

Vergelijk voor en na met de bestandsgrootte en met de werkelijk overgedragen omvang in de ontwikkelaarstools van de browser, zodat je de winst bevestigt; verander steeds maar één soort parameter per keer, dan is makkelijk te achterhalen welke stap een probleem veroorzaakte.

4. Structuur en hergebruik: symboliseren, kleurlagen beheersen

Tip 6: grafieken hergebruiken met defs en use

Komt hetzelfde pictogram meerdere keren op de pagina voor, definieer het dan één keer in <defs> en roep het meerdere keren aan met <use>, of maak er een SVG-sprite van: volume en aantal verzoeken dalen samen.

Tip 7: kleurlagen beheersen en geen bitmaps insluiten

Verlaag bij het vectoriseren het aantal kleuren om het aantal lagen te beperken; gebruik een egale kleur in plaats van ingewikkelde verlopen. Vermijd vooral base64-bitmaps in de SVG: dat maakt van een vectorbestand een drager van bitmapdata en het volume loopt uit de hand. Achtergebleven ruimpaden na de conversie kun je in de online editor aanklikken en wissen.

5. Oplevering: compressie bij overdracht en caching

Tip 8: gzip/Brotli en caching inschakelen

Omdat de SVG tekst is, daalt het overgedragen volume met gzip/Brotli op de server doorgaans nog eens 60%-80%; geef statische SVG's lange cache-headers. Zeer kleine pictogrammen kun je rechtstreeks in de HTML insluiten, zodat je een verzoek bespaart. Het principe staat in De voordelen van SVG; en wil je het volume al bij het converteren beheersen, lees dan De methodes om een afbeelding naar SVG te maken.

De volgorde telt: beheers ankerpunten en kleurlagen bij de bron, ruim metadata en precisie in het bestand, ga daarna door SVGO en activeer tot slot de compressie bij overdracht. Met alle vier de lagen op elkaar krijg je doorgaans een orde van grootte kleiner SVG.