Afbeeldingstools

SVG-optimalisator

Verklein SVG-bestanden tot fractie van hun originele grootte. Verwijder editor-kruimels, ronde decimalen en mineer.

SVG-broncode

Sleep hier een SVG-bestand of klik om er een te kiezen

Commentaar verwijderen Metadata verwijderen Nutteloze groepen samenvoegen Width/height verwijderen (responsive SVG)

Numerieke precisie 2

Lager = kleiner bestand maar zichtbare afronding op curves. 2 is veilig voor iconen; 3 voor illustraties.

Geoptimaliseerde SVG

Waarom SVG optimaliseren

SVG-bestanden geëxporteerd uit ontwerptools (Figma, Sketch, Illustrator, Inkscape) zijn doorgaans 30-70% groter dan nodig. Editors laten commentaar, metadata-handtekeningen, overbodige CSS, lege groepen en buitensporige numerieke precisie achter die geen menselijk oog kan waarnemen. Een optimizer schrijft dezelfde tekening om naar een kleinere, equivalente SVG — pixel-identiek voor een renderer, maar een fractie van de bestandsgrootte. Alles gebeurt lokaal op je apparaat — je SVG wordt nooit geüpload, nooit naar een server gekopieerd, nooit gelogd. Die privacygarantie is belangrijk voor brandingbestanden, interne product-iconen en elke SVG die niet op een server van derden hoort te staan. De standaardinstellingen zijn afgestemd op icon-kwaliteit: precisie staat op 2 decimalen, commentaar en editor-metadata gaan eruit, nutteloze groepen worden samengevoegd, en de originele viewBox blijft intact voor responsive schaling. Voor illustraties met subtiele curves zet je de precisie op 3; voor responsive iconensets verwijdert de optie Width/height verwijderen de vaste width/height-attributen zodat CSS de iconen kan schalen naar elke maat die je in je stylesheet instelt.

Hoe gebruik je de optimalisator

Plak de SVG-markup of sleep een .svg-bestand op de dropzone. Pas de optie-checkboxes aan — de standaardinstellingen zijn verstandig. Kies de numerieke precisie (2 is prima voor de meeste iconen) en druk op Optimaliseren. Met de voor/na-preview kun je bevestigen dat er visueel niets is veranderd. Kopieer de geoptimaliseerde markup of download het bestand direct.

Tips die meer bytes besparen

Gebruik één kleurenpalet en vermijd ingebedde rasterafbeeldingen — base64-gecodeerde PNG's binnen SVG ondermijnen het formaat. Zet tekst alleen om naar paden als je een specifieke glyph nodig hebt; houd anders <text>-tags zodat schermlezers en zoekmachines de inhoud zien. Comprimeer het resulterende bestand met gzip/brotli op je server: geoptimaliseerde SVG comprimeert erg goed, vaak tot 70% van de grootte na optimalisatie.

Veiligheid van optimalisaties

Optie	Effect	Opmerkingen
Commentaar verwijderen	Verwijdert -blokken die editors achterlaten.	Bijna altijd veilig. Schakel alleen uit als commentaar het bestand documenteert.
Metadata verwijderen	Verwijdert -elementen (handtekeningen van Adobe, Sketch, Inkscape).	Veilig — metadata is voor de ontwerptool, niet voor de renderer.
Nutteloze groepen samenvoegen	Verwijdert -elementen zonder styling en met slechts één kind.	Visueel identiek, bespaart vaak 5–15%.
Width/height verwijderen (responsive SVG)	Verwijdert de width/height-attributen zodat CSS de SVG schaalt.	Handig voor iconensystemen; standaard uit om het bestand standalone te houden.
Numerieke precisie	Rondt path-getallen af op N decimalen.	2 is de standaard, 3 voor fijne illustraties, 1 alleen voor heel kleine iconen.

Veelgestelde vragen

Gaat optimalisatie mijn SVG kapot maken?

De standaardinstellingen zijn conservatief en visueel veilig voor de overgrote meerderheid van bestanden. Animaties met SMIL of externe scripts hebben af en toe een hogere precisie of een andere optiecombinatie nodig, maar elke optie is opt-in en met de voor/na-preview kun je controleren dat er visueel niets is veranderd voordat je downloadt.

Wordt er iets geüpload?

Nee. De optimalisatie draait lokaal op je apparaat. Bestanden worden niet geüpload, niet opgeslagen, niet geïndexeerd, niet gelogd, niet gedeeld. De pagina werkt zelfs als je offline gaat nadat hij is geladen.

Hoe zit het met SVG-sprites of symbols?

Die optimaliseren prima, maar bouw eerst de sprite en optimaliseer dan. Elk symbol apart optimaliseren kan ID-namen veranderen waar de sprite-referentie van afhangt.

Hoe klein zouden iconen moeten zijn?

De meeste goed ontworpen iconen liggen tussen 200 B en 2 KB na optimalisatie. Is die van jou groter, dan heb je waarschijnlijk raster-traces, ingebedde fonts of overbodige viewBox-padding.

Moet ik xmlns en viewBox behouden?

Ja. De standaardinstellingen behouden beide. Zonder xmlns rendert de SVG niet buiten HTML5; zonder viewBox verlies je responsive schaling. Beide attributen zijn klein en de moeite waard om te houden.

Kan ik veel bestanden in batch optimaliseren?

Deze tool verwerkt één bestand tegelijk, waardoor de voor/na-preview nuttig blijft om ongewenste veranderingen te spotten. Voor het optimaliseren van een hele map met iconen in één keer is een build-time tool die in je toolchain is geïntegreerd de juiste keuze.

SVG-optimalisator