Hoe SVG-bestanden comprimeren.

Open de SVG Compressor en kies een SVG-bestand of probeer een voorbeeld. Het voorbeeld is svg-compressor.svg, een orbit-icoon van 985 bytes met een 512 × 512 viewBox, gradiëntvulling, titel en beschrijving. Gebruik Plak SVG wanneer de markup al in een editor of klembord staat.

De tool accepteert maximaal 20 bestanden van elk 2 MB. Het parseert een volledig SVG-document en verwijdert standaard SVG-documentdeclaraties zonder externe bestanden te laden. Misvormde XML, aangepaste entiteitsdeclaraties en interne document-subsets worden geweigerd. Zeer complexe bestanden kunnen ook de limiet voor elementen of verwerkingstijd bereiken.

Deze workflow produceert statische vector-artwork. Scripts, event handlers, externe bronnen, animaties en ingesloten rasterafbeeldingen worden verwijderd. Het originele voorbeeld is al opgeschoond, dus het moet niet worden geïnterpreteerd als een onbeperkte weergave van elke functie in het bronbestand.

De twee voorbeeldpanelen tonen het opgeschoonde origineel en het geoptimaliseerde resultaat. De groottes naast Origineel en Geoptimaliseerd en het byte-overzicht vergelijken het bronbestand met de voltooide uitvoer. Het meldt een toename wanneer optimalisatie een specifiek bestand groter maakt in plaats van elke keer een reductie te beloven.

Open Instellingen en stel de Decimale precisie in op 2 voor het voorbeeld. De precisie varieert van 1 tot 5 en begint bij 3. Lagere waarden kunnen numerieke geometrie vereenvoudigen, maar kunnen fijne curven, kleine openingen of uitgelijnde randen verschuiven. Verhoog deze waarde wanneer het voorbeeld belangrijke details verliest.

Dit voorbeeld gebruikt eenvoudige geometrie, dus precisie 2 behoudt zijn herkenbare vorm. Andere SVG's met complexe decimale coördinaten kunnen meer veranderen. Bekijk de geoptimaliseerde SVG-markup om de werkelijke tekst te zien die wordt gedownload; dit is geen afzonderlijke weergave van het origineel.

Laat Toegankelijke titels en beschrijvingen behouden ingeschakeld voor het voorbeeld. Dit behoudt de SVG-titel en beschrijving terwijl redundante editor-metadata wordt verwijderd en in aanmerking komende markup wordt vereenvoudigd. Dit zijn verschillende soorten informatie en moeten niet als uitwisselbaar worden behandeld.

Interne ID's inkorten staat standaard aan. De optimizer werkt verwijzingen binnen de SVG bij, maar externe CSS of JavaScript kunnen nog steeds afhankelijk zijn van de originele ID's. Schakel deze optie uit wanneer het bestand deel uitmaakt van een grotere applicatie die zijn elementen benoemt, en test de voltooide SVG in die context.

Laat Responsieve afmetingen en Leesbare uitvoer-markup uitgeschakeld voor het voorbeeld. Responsieve afmetingen verwijdert vaste breedte en hoogte wanneer de coördinaat-viewBox schaalbare dimensionering kan bieden. Leesbare uitvoer voegt inspringing toe en is nuttig voor onderhoud, maar kan de tekstgrootte vergroten.

Selecteer Start en vervolgens Downloaden. De voltooide uitvoer is 635 bytes vergeleken met de 985-byte bron: een 35.5% reductie. De titel en beschrijving blijven behouden en de weergegeven vergelijking is gerenderd vanuit de echte bron en gedownloade SVG.

Het artikel rendert beide vectoren op 1,024 pixels voor een scherpe illustratie van het resultaat; hun logische coördinaatgrootte blijft 512 × 512. Een groter voorbeeld voegt geen rasterinhoud toe aan de opgeslagen SVG. Controleer de werkelijke vector op je doelpagina voordat je een bestaand productie-asset vervangt.

Eén bestand wordt gedownload als SVG met de originele basisnaam. Een batch wordt gedownload als één ZIP, met genummerde achtervoegsels voor dubbele bestandsnamen. De verwerking vindt plaats in de browser. Bewaar de originele bron als je later andere optimalisatie-instellingen wilt proberen.