SVG-optimalisator

Wat is SVG-optimalisator?

De SVG-optimalisator is een gratis browsertool voor webdesigners, icoonauteurs en front-endontwikkelaars die met de hand geschreven of geëxporteerde SVG moeten afslanken voordat ze het uitleveren. Vectoreditors voegen onzichtbaar gewicht toe: XML-commentaar, metadatablokken, Inkscape/Sodipodi/Illustrator-attributen, overbodige decimalen, nutteloze transformaties, omhullende groepen en ID's en defs waarnaar niets verwijst. Schakel elke opschoning in bij Instellingen, plak de opmaak of sleep een .svg-bestand, kijk hoe de Origineel- en Geoptimaliseerd-renders naast elkaar bijwerken en lees de statistieken Voor, Na, Bespaard, Gzip en Brotli. Kopieer het resultaat of download het als .min.svg. Gebruik het om inline-iconen, sprite-sheets, logo's en illustraties lichter te maken.

SVG-optimalisator gebruiken

1. Plak je SVG, of sleep/upload een .svg-bestand — de opmaak vult het invoervak.
2. Open Instellingen en schakel precies de opschoningen in die je wilt: coördinaten afronden, commentaar, metadata en editor-attributen verwijderen, lege groepen, ongebruikte ID's en defs, transformaties samenvoegen, inline-stijlen minificeren, hex-kleuren inkorten, standaardwaarden verwijderen en witruimte minificeren.
3. Als het afronden van coördinaten aanstaat, stel je de precisie in (0-5 decimalen).
4. Vergelijk de Origineel- en Geoptimaliseerd-renders naast elkaar om te bevestigen dat de tekening nog klopt.
5. Lees de statistieken Voor, Na, Bespaard, Gzip en Brotli om de echte groottewinst te zien.
6. Kopieer de geoptimaliseerde SVG of download deze als .min.svg-bestand.

Voorbeelden

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Veelgestelde vragen

Wat verwijdert de optimalisator precies?

Met de bijbehorende schakelaars aan: XML-commentaar, de elementen <metadata>, <title> en <desc>, editor-namespace-attributen (Inkscape, Sodipodi, Illustrator), lege groepen, ID's waarnaar niets verwijst en niet-gerefereerde <defs>. Hij kan ook numerieke attributen en padgegevens afronden, nutteloze transformaties samenvoegen, style-attributen en <style>-CSS minificeren, hex-kleuren inkorten (#ffffff→#fff) en standaard presentatie-attributen zoals fill-opacity="1" verwijderen.

Verandert het afronden van coördinaten hoe mijn SVG eruitziet?

Afronden op lage precisie kan punten met een minuscule fractie van een eenheid verschuiven, meestal onzichtbaar maar kleiner. Verhoog de precisie (tot 5 decimalen) voor exacte geometrie, of zet het afronden uit om de getallen ongemoeid te laten.

Kan ik een bestand laden en het resultaat bekijken?

Ja. Sleep of upload een .svg-bestand (of plak de opmaak) en de Origineel- en Geoptimaliseerd-renders verschijnen naast elkaar zodat je fouten meteen ziet. Kopieer daarna de uitvoer of download de geoptimaliseerde .min.svg — er wordt niets geüpload; het bestand wordt lokaal gelezen.

Wat betekenen de Gzip- en Brotli-cijfers?

De Gzip-grootte wordt gemeten door de geoptimaliseerde SVG daadwerkelijk in je browser te comprimeren, dus geeft ze de echte bytes over een gzip-verbinding weer. Het Brotli-cijfer is een schatting afgeleid van die gzip-grootte (brotli comprimeert tekst meestal iets kleiner); een echte brotli-encoder is te zwaar om mee te bundelen, dus is het met een tilde gemarkeerd.

Wordt mijn SVG ergens geüpload?

Nee. Parseren, opschonen, groottemeting en serialiseren gebeuren allemaal lokaal in je browser met de ingebouwde DOMParser. Er wordt niets naar een server gestuurd, dus de tool werkt offline en je artwork blijft privé.