SVG-bestanden comprimeren

SVG is code, geen pixels

Een SVG-bestand (Scalable Vector Graphics) is een tekstdocument in XML dat vormen beschrijft: paden, cirkels, verlopen, tekst. Omdat het instructies bevat in plaats van pixels, blijft het scherp op elk formaat, van een favicon van 16 pixels tot een reclamebord. Iconen, logo's, illustraties, grafieken en kaarten op het web zijn vaak SVG, en het formaat is sinds 2001 een W3C-standaard.

Dat het tekst is, heeft een bijeffect: de bestandsgrootte hangt af van hoe omslachtig het programma het heeft geschreven, niet van hoe groot de afbeelding wordt getoond. Twee SVG's die er precies hetzelfde uitzien, kunnen een veelvoud van elkaar in grootte verschillen.

Wat SVG-bestanden zwaarder maakt dan nodig

• Metadata van het programma. Illustrator, Inkscape, Figma en Sketch voegen hun eigen namespaces, laagnamen, exportopmerkingen en soms een ingesloten kopie van het bewerkbare document toe.
• Overbodige precisie. Coördinaten als 12.483920174 waar 12.48 op elk realistisch formaat precies hetzelfde wordt weergegeven.
• Overbodige structuur. Lege groepen, verborgen lagen, standaardwaarden van attributen, ongebruikte definities en stijlen die korter kunnen.
• Lange padsyntaxis. Absolute opdrachten waar relatieve korter zijn, herhaalde opdrachtletters, onnodige spaties.
• Ingesloten bitmaps. Een foto die in een illustratie is geplakt, wordt als Base64-tekst in de SVG opgeslagen, en die is ongeveer een derde groter dan het oorspronkelijke afbeeldingsbestand.

Zo optimaliseert de tool SVG

De tool draait SVGO, de veelgebruikte opensource-optimalisator voor SVG, in je browser. Die verwijdert metadata en opmerkingen, voegt nutteloze groepen samen, verkort padgegevens, rondt getallen standaard af op 3 decimalen (je kunt 0 tot 6 kiezen) en voegt stijlen samen, en herhaalt die rondes tot er niets meer verandert. Het resultaat is nog steeds een gewone SVG die je in elk programma kunt openen of in HTML kunt plakken. In onze tests met acht SVG's, van met de hand geoptimaliseerde iconen tot een Inkscape-export vol programmagegevens, lag de besparing tussen 8% en 42%.

Optimalisatie is in strikte zin met verlies: afronden verandert coördinaten minimaal, en programmaspecifieke gegevens zijn weg, dus je kunt het bestand niet meer openen met al zijn oorspronkelijke lagen. Bewaar het bronbestand uit je ontwerpprogramma en beschouw de geoptimaliseerde SVG als de gepubliceerde versie.

Servers versturen SVG meestal met gzip- of Brotli-compressie, die de tekst onderweg naar de browser nog eens kleiner maakt. Optimalisatie en servercompressie tellen bij elkaar op, omdat verwijderde gegevens helemaal niet meer gecomprimeerd hoeven te worden.

Wanneer een geoptimaliseerde SVG stukgaat

• CSS of JavaScript vindt een element niet meer. Optimalisatoren verkorten of verwijderen ID's en klassenamen die binnen het bestand ongebruikt lijken. Verwijzen de stijlen of scripts van je pagina ernaar, controleer het resultaat dan voordat je het publiceert.
• Het icoon schaalt niet meer. Een SVG heeft het attribuut viewBox nodig om goed mee te schalen. De tool laat dat staan, dus kijk of het origineel er een had; een SVG met alleen een vaste breedte en hoogte schaalde nooit goed.
• Kleine vormen zien er vervormd uit. Heel kleine iconen die op een groot canvas zijn getekend, kunnen last hebben van afronding. Met de standaardprecisie komt dat zelden voor.
• Het bestand bestaat vooral uit een ingesloten foto. Exporteer de foto als aparte JPG of WebP en link ernaar, of zet de hele afbeelding om naar een bitmap.

Vragen over SVG

Verwante pagina's

Bitmapafbeeldingen verwerk je met de afbeeldingscompressor. Wat er lokaal draait en waarom, lees je op Zo werkt het.