SVG Optimizer

Comprimeer SVG-bestanden online — verwijder metadata, opmerkingen en overbodige attributen

Deel:

SVG Optimizer

Waarom SVG-bestanden optimaliseren?

SVG-bestanden geëxporteerd vanuit Illustrator, Figma of Inkscape bevatten veel onnodige gegevens — opmerkingen, editormetadata, overbodige attributen, te precieze decimale getallen en lege containers. Deze elementen blazen de bestandsgrootte met 30-70% op zonder visueel voordeel. Geoptimaliseerde SVG's laden sneller, verbruiken minder bandbreedte en kunnen schoner worden ingesloten in HTML.

🎯

8 optimalisatiestrategieën

Activeer/deactiveer elke optimalisatiepass afzonderlijk voor nauwkeurige controle over wat wordt verwijderd

📊

Statistieken over grote reductie

Bekijk de originele grootte, geoptimaliseerde grootte en besparingspercentage na elke optimalisatie

✅

Optimalisatie zonder visueel verlies

Alle optimalisaties behouden het visuele uiterlijk van de SVG — alleen onzichtbare metadata wordt verwijderd

Hoe een SVG optimaliseren in 3 stappen

1

Plak de SVG-code

Kopieer de SVG-broncode van je ontwerptool of bestand en plak het in het invoerveld

2

Selecteer optimalisaties

Vink de optimalisatieopties aan — of gebruik de standaardwaarden voor maximale reductie

3

Kopieer en implementeer

Kopieer de geoptimaliseerde SVG en vervang je originele bestand, of sluit het direct in HTML in

Gebruiksscenario's voor SVG-optimalisatie

🎨

Pictogrambibliotheken

Optimaliseer pictogrammensets geëxporteerd vanuit Figma of Illustrator voordat je ze bundelt in een bibliotheek

🏢

Logo's

Maak geëxporteerde SVG-logo's schoner voor siteheaders, favicons en merkactiva

✨

Geanimeerde SVG's

Verklein de basisgrootte van geanimeerde SVG's die al groter zijn vanwege animatiegegevens

📱

PWA en mobiel

Kleinere SVG's verminderen mobiel dataverbruik en verbeteren Lighthouse-prestatiescores

Best practices voor SVG-optimalisatie

✓ Pas op met het verwijderen van ID's bij CSS-animaties

Als je SVG CSS- of JavaScript-animaties gebruikt die elementID's targeten, vink dan 'ID's verwijderen' uit om animaties niet te breken.

✓ Behoud viewBox, verwijder breedte/hoogte

Breedte/hoogte-attributen verwijderen en viewBox behouden maakt SVG's responsief via CSS — de beste aanpak voor responsief ontwerp.

✓ Ronde getallen af op 2 decimalen

Padcoördinaten met 5+ decimalen zijn visueel niet waarneembaar. Afronden op 2 decimalen verkleint het bestand zonder enig visueel verschil.

✓ Automatiseer met SVGO in CI/CD

Voor grote projecten, integreer SVGO in je buildpipeline om automatisch alle SVG's te optimaliseren. Gebruik dit hulpmiddel voor snelle handmatige controles.

❓ Veelgestelde vragen

Hoeveel kan SVG-optimalisatie de grootte verkleinen?

Doorgaans een reductie van 30-70% afhankelijk van de bron. Illustrator SVG's bieden vaak de grootste besparingen. Figma-exports zijn al relatief schoon. De grootste winsten komen van het verwijderen van editormetadata, opmerkingen en het afronden van decimale precisie.

Verandert optimalisatie het uiterlijk van mijn SVG?

Nee — alle optimalisaties in dit hulpmiddel verwijderen alleen onzichtbare gegevens (opmerkingen, metadata, overbodige attributen) of ronden getallen af tot niet-waarneembare precisie. Het visuele resultaat is identiek aan het origineel.

Waarom breedte- en hoogte-attributen verwijderen?

Hardgecodeerde breedte-/hoogte-waarden voorkomen dat SVG's responsief schalen via CSS. Door ze te verwijderen en alleen viewBox te behouden, kun je de SVG-afmetingen volledig via CSS-eigenschappen beheren.

Wat is het verschil tussen dit hulpmiddel en SVGO?

SVGO is een Node.js opdrachtregeltool en de standaard voor SVG-optimalisatie. Dit hulpmiddel biedt een handige browserinterface voor de meest voorkomende optimalisaties zonder Node.js te moeten installeren.