SVG-optimalisator

Plak of sleep een SVG en verklein deze met SVGO. Alles blijft in je browser.

Hoe SVG-optimalisator werkt

SVG-optimizer voert SVGO (SVG Optimizer) uit in een Web Worker binnen je browser om je SVG-bestanden te minificeren en op te schonen zonder ze te uploaden. SVGO past een configureerbare set plugins toe die opmerkingen verwijdert, witruimte samenvouwt, identieke paden samenvoegt, vormen naar hun meest compacte weergave converteert en attributen verwijdert die geen visueel effect hebben. Het resultaat is een kleinere SVG die identiek weergeeft aan het origineel.

SVG-bestanden die zijn geproduceerd door ontwerptools zoals Figma, Illustrator of Inkscape bevatten vaak aanzienlijke overhead: editor-specifieke metadata, lege groepen, redundante transformatie-attributen en naamruimtedeclaraties die geen browser nodig heeft. De standaard plugin-set van SVGO verwijdert deze overhead betrouwbaar. Het geoptimaliseerde bestand wordt aangeboden als download en het procentuele groottervermindering wordt weergegeven zodat je kunt bevestigen dat de optimalisatie de moeite waard was.

Geschreven door Bastien Sulyan

Hoe je SVG-optimalisator gebruikt, stap voor stap

Sleep je SVG-bestand naar het uploadgebied of klik om te bladeren.
De SVGO Web Worker voert de optimalisatie onmiddellijk uit met de standaard plugin-set.
Bekijk het procentuele vermindering en de originele versus geoptimaliseerde bestandsgroottes.
Klik op Downloaden om de geoptimaliseerde SVG op je apparaat op te slaan.
Als specifieke plugins weergaveproblemen veroorzaken, pas dan de plugin-configuratie aan en optimaliseer opnieuw.

Veelvoorkomende toepassingen

Een front-end ontwikkelaar optimaliseert pictogrammen die uit Figma zijn geëxporteerd voordat ze worden vastgelegd in een productieassetpipeline, waardoor elk pictogram van 4 KB naar minder dan 1 KB teruggebracht.
Een webontwerper maakt SVG-illustraties opgeschoond die zijn geëxporteerd uit Illustrator en die lagen van editor-metadata bevatten die onzichtbaar zijn in de browser maar het bestand opblazen.
Een ontwikkelaar die een pictogramlettertype maakt van SVG-gliefen zorgt ervoor dat elke bron-SVG schoon en consistent gestructureerd is vóór de lettertype-bouwstap.
Een prestatie-ingenieur controleert inline SVG in HTML en vervangt elk opgeblazen origineel door een SVGO-geoptimaliseerde versie om het paginagewicht te verbeteren.

Veelgestelde vragen

Zal SVGO de weergave van mijn SVG veranderen?

De standaard plugins van SVGO zijn gekozen om visueel verliesvrij te zijn: de geoptimaliseerde SVG wordt identiek weergegeven aan het origineel in alle standaardbrowsers. Sommige agressieve plugins (zoals die padcoördinaten sterk afronden) kunnen subtiele renderingverschillen introduceren. Als je een visuele verandering opmerkt, vergelijk dan het origineel en geoptimaliseerde bestand in een browser en schakel de specifieke plugin die het probleem veroorzaakt uit.

Wordt het SVG-bestand naar een server gestuurd voor optimalisatie?

Nee. SVGO draait in een Web Worker binnen je browsertabblad. De SVG-tekst wordt ingelezen van je lokale schijf, verwerkt in JavaScript-geheugen, en de uitvoer wordt teruggegeven aan de pagina voor download. De bestandsinhoud verlaat je apparaat niet.

Hoeveel kleiner wordt mijn SVG?

De vermindering is afhankelijk van de bron. SVG's die zijn geëxporteerd uit ontwerptools met editor-metadata krimpen doorgaans met 30 tot 70 procent. Handgeschreven SVG's die al beknopt zijn, zien misschien slechts 5 tot 15 procent vermindering. Het hulpmiddel toont de exacte bytetelling en het percentage zodat je elk bestand afzonderlijk kunt beoordelen.

Beïnvloedt optimalisatie SVG-animaties of JavaScript in het bestand?

De configuratie behoudt animatie-elementen en SMIL-attributen. Script-elementen worden wél verwijderd: het hulpmiddel voegt de removeScripts-plugin toe boven op de standaardpreset van SVGO, omdat een SVG die je gaat insluiten geen uitvoerbare code mag bevatten. Sommige plugins die attributen opschonen, kunnen animaties beïnvloeden als de animatie naar die attributen verwijst via ID; controleer de weergegeven uitvoer na het optimaliseren van bestanden die complexe animaties gebruiken.

Kan ik meerdere SVG-bestanden tegelijk optimaliseren?

De huidige versie verwerkt één SVG-bestand tegelijk. Sleep een bestand, download het resultaat en sleep dan het volgende bestand. Batchverwerking voor meerdere bestanden in één sessie is niet beschikbaar in deze versie.

Welke versie van SVGO gebruikt het hulpmiddel?

Het hulpmiddel bevat SVGO dat in een Web Worker draait. De meegeleverde versie staat vermeld in de informatie van het hulpmiddel. SVGO wordt actief onderhouden en de plugin-API is aanzienlijk veranderd tussen v1, v2 en v3; het huidige hulpmiddel gebruikt het v3 plugin-formaat.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle afbeeldingstools