SVG Optimizer — SVG-optimalisatie
Optimaliseer SVG-bestanden met SVGO in je browser. Vergelijk voorbeelden voor en na, bekijk hoeveel bytes je bespaart en download het resultaat.
🔒 Draait volledig in uw browser — niets wordt geüploadDrop an .svg file here or click to browse — or paste SVG markup below
Waarom SVG-bestanden optimaliseren
SVG-bestanden die zijn geëxporteerd uit ontwerptools zoals Illustrator, Figma, Sketch of Inkscape bevatten veel meer dan de vormen die je ziet. Editor-metadata, XML-commentaar, verborgen lagen, standaardwaarden van attributen, ongebruikte definities, overbodige decimalen en overtollige groepen kunnen gemakkelijk de helft van het bestand uitmaken. Deze tool gebruikt SVGO — dezelfde optimizer die de meeste build-pipelines en icoonbibliotheken gebruiken — om die ballast te verwijderen. Kleinere SVG's laden sneller, maken inline iconen in je HTML lichter en houden repositories overzichtelijk.
De standaardpreset voert tientallen veilige transformaties uit: hij verwijdert de XML-declaratie, commentaar, metadata en editor-namespaces, ruimt ID's op, verkort kleuren, voegt paden samen, zet basisvormen om in compacte paden als dat korter is en herschrijft padgegevens met relatieve commando's en minder cijfers. Multipass herhaalt het proces tot er geen verdere besparing meer te vinden is, wat vaak nog een paar procent extra oplevert.
De opties kiezen
Precision (precisie) bepaalt hoeveel decimalen in getallen behouden blijven; 2–3 is geschikt voor iconen, terwijl gedetailleerde illustraties of kaarten er meer nodig kunnen hebben. Remove <title> bespaart bytes maar verwijdert de toegankelijke naam, dus behoud die bij betekenisvolle afbeeldingen. Remove viewBox kun je het beste uit laten staan, want juist de viewBox zorgt ervoor dat een SVG responsief kan schalen. Remove width/height is handig als CSS de afmetingen bepaalt. Remove scripts & event handlers verwijdert <script>-elementen, on*-attributen en javascript:-links, een goede gewoonte bij SVG's van onbekende herkomst. Pretty print laat het resultaat inspringen voor betere leesbaarheid, ten koste van een paar bytes.
Privé, lokaal en veilig vergelijken
Alle verwerking gebeurt in je browser; bestanden worden niet geüpload. Beide voorbeelden worden weergegeven via een afbeeldingselement dat een lokale blob-URL laadt, en browsers voeren nooit scripts uit in SVG's die op deze manier worden getoond. Vergelijk altijd beide voorbeelden voordat je het resultaat gebruikt: een te agressieve precisie of het verwijderen van de viewBox kan de weergave van een afbeelding veranderen. De groottelabels tonen de bespaarde bytes, zodat je bestandsgrootte en visuele getrouwheid tegen elkaar kunt afwegen.
Hoe te gebruiken
- Voeg een SVG toeSleep een .svg-bestand naar het invoerveld of plak SVG-markup.
- Kies de optiesStel multipass, precisie en optionele verwijderingen in, zoals title, viewBox of breedte en hoogte.
- Optimaliseer en vergelijkKlik op Optimize SVG en vergelijk de voorbeelden en groottes van het origineel en de geoptimaliseerde versie.
- DownloadKopieer de markup of download het geoptimaliseerde .svg-bestand.