Zo werkt de SVG-compressor
Een SVG-bestand dat is opgeslagen vanuit Illustrator, Inkscape, Figma of Sketch bevat meestal veel wat een browser nooit gebruikt: editormetadata, opmerkingen, verborgen lagen, voluit geschreven standaardwaarden en coördinaten met acht of meer decimalen. Deze tool haalt dat allemaal weg met SVGO, de opensource-optimizer voor SVG waar de meeste buildtools en ontwerpapps op vertrouwen, dus de tekening ziet er hetzelfde uit maar het bestand is kleiner.
SVGO gaat in meerdere rondes door het bestand. Het voegt paden samen en maakt ze korter, rondt getallen af op de precisie die je kiest, klapt onnodige groepen in, verwijdert lege elementen en schrijft kleuren in hun kortste vorm. De viewBox blijft behouden, dus de SVG schaalt nog steeds naar elk formaat, en ID's waarnaar andere delen van het bestand verwijzen, worden ingekort met bijgewerkte verwijzingen, zodat verlopen en maskers blijven werken.
Precisie is de enige instelling die ertoe doet. Hoog houdt drie decimalen, wat op elke normale grootte onzichtbaar is en de veilige keuze voor pictogrammen en logo's. Gebalanceerd houdt er twee en Kleinste één, wat past bij grote illustraties waar een tiende van een eenheid ver onder een pixel ligt, maar heel kleine pictogrammen uit vorm kan buigen. Ziet een resultaat er niet goed uit, comprimeer het origineel dan opnieuw met een hogere precisie.
De optimizer, ongeveer 200 KB, wordt geladen de eerste keer dat je op de knop drukt. Je SVG's worden in dit tabblad gelezen en herschreven en nooit geüpload, en dat is belangrijk bij nog niet uitgebrachte logo's en werk voor klanten.
Opties van de SVG compressor uitgelegd
| Hoog | Drie decimalen. Veilig voor pictogrammen, logo's en alles wat klein is. |
|---|---|
| Gebalanceerd | Twee decimalen. Goed voor de meeste illustraties. |
| Kleinste bestand | Eén decimaal. Voor groot werk; controleer kleine pictogrammen achteraf. |
| Behouden | viewBox, ID's waarnaar wordt verwezen, verlopen, maskers en het uiterlijk van de tekening. |
| Verwijderd | Editormetadata, opmerkingen, verborgen en lege elementen, overbodige precisie. |
Wanneer je het gebruikt
Comprimeer SVG's voordat je pictogrammen en logo's op een website zet, waar elke kilobyte bij de laadtijd optelt, voordat je een SVG inline in HTML of een React-component zet, voordat je ontwerpbestanden naar een coderepository commit, of als een uploadformulier de bestandsgrootte beperkt.
Bewaar het originele, bewerkbare SVG-bestand voor je ontwerpapp. Optimaliseren verwijdert editorgegevens zoals laagnamen en hulplijnen, dus open het origineel opnieuw als je het ontwerp wilt bewerken.
Over de SVG-optimizer
SVGO, kort voor SVG Optimizer, is de opensourcetool achter de SVG-optimalisatie in de meeste webbuildtools, en in ontwerpapps die een geoptimaliseerde export bieden. Het ontleedt de SVG tot een boomstructuur, voert er een reeks goed geteste opschoonstappen op uit en schrijft het weer weg, en herhaalt dat tot er niets meer te besparen valt. Elke stap die het hier zet, houdt de tekening er hetzelfde uit laten zien, en daarom worden de standaardinstellingen in productie vertrouwd. De versie op deze pagina draait volledig in de browser en wordt de eerste keer dat je de tool gebruikt van het jsDelivr-CDN geladen.
Problemen oplossen bij de SVG compressor
“al geoptimaliseerd; ongewijzigd teruggegeven”
De SVG is al geoptimaliseerd, dus er kon niets worden verwijderd zonder hem te veranderen. Het originele bestand wordt teruggegeven.
Een deel van de tekening is verschoven of verbogen
Heel kleine pictogrammen kunnen bij lage precisie verschuiven. Comprimeer het origineel opnieuw met precisie Hoog.
“is geen SVG-bestand”
Het bestand bevat geen SVG-tekening. Bestanden die als SVG zijn geëxporteerd maar alleen een bitmapafbeelding omhullen, kunnen ook nauwelijks kleiner; comprimeer in plaats daarvan de afbeelding erin.
Zo gebruik je de SVG-compressor, stap voor stap
- Druk op “SVG-bestanden kiezen” of sleep bestanden naar het vak.
- Stel de opties in als dat nodig is; de standaardinstellingen passen bij de meeste toepassingen.
- Druk op “SVG comprimeren”. Het werk gebeurt op je apparaat.
- Sla het resultaat op met de downloadknop ernaast.
Is het veilig om dit online te doen?
Bij de meeste online tools betekent “online” dat je bestand wordt geüpload naar de server van een bedrijf, daar wordt verwerkt en een tijd wordt bewaard voordat het wordt verwijderd. Hier niet. De pagina downloadt de code van de tool naar je browser, en je bestand wordt in het tabblad op je eigen apparaat gelezen en verwerkt. Het wordt nooit naar TapToConvert of iemand anders gestuurd.
Je kunt dit zelf controleren: zodra de pagina en de engine geladen zijn, zet je de wifi uit en de tool werkt nog steeds. Dat betekent ook dat er geen wachtrij, geen daglimiet en geen maximale bestandsgrootte van een server is; de enige grens is het geheugen dat je browser één tabblad geeft.
Veelgestelde vragen over de SVG compressor
Verandert comprimeren hoe mijn SVG eruitziet?
Bij precisie Hoog is er geen zichtbaar verschil. Lagere precisie rondt coördinaten verder af, wat heel kleine details kan verbuigen.
Hoeveel kleiner wordt het?
SVG's die uit ontwerpapps zijn geëxporteerd, krimpen vaak met 30 tot 70 procent. SVG's die al geoptimaliseerd waren, krimpen weinig of helemaal niet.
Kan ik de gecomprimeerde SVG nog bewerken?
Ja, maar laagnamen, hulplijnen en editorinstellingen zijn weg. Bewaar het origineel om te bewerken.
Worden mijn bestanden geüpload?
Nee. SVGO draait in je browser, dus de SVG verlaat je apparaat nooit.
Is het gratis?
Ja. Geen aanmelding, geen watermerk en geen gebruikslimiet. TapToConvert wordt ondersteund door advertenties.
Worden mijn bestanden geüpload?
Nee. Alles gebeurt in je browsertabblad, op je eigen apparaat.