Afbeeldingen en grafisch 100% in de browser en offline

SVG-optimizer

Verklein SVG-bestanden door editorgegevens, opmerkingen en overbodige cijfers te verwijderen. Vergelijk voor en na en kopieer of download het resultaat. Werkt in je browser.

Sleep of kies een bestand; instellingen veranderen het resultaat meteen.

Je bestanden en invoer verlaten je browser nooit – er wordt niets geüpload.

Cijfers die in coördinaten behouden blijven. 3 is veilig voor iconen; 1 of 2 maakt bestanden kleiner maar kan dunne details verschuiven.

Zet het inkorten van id's uit als de SVG inline wordt gebruikt en zijn id's door je CSS of scripts worden aangesproken. Behoud de title als de afbeelding voor schermlezers leesbaar moet zijn.

Vergelijk beide voorbeelden voordat je een bestand vervangt: ze moeten er hetzelfde uitzien. Je SVG wordt in dit tabblad verwerkt en nooit geüpload.

Waarom SVG-bestanden zoveel extra gegevens meedragen

Tekenprogramma's slaan meer op dan de tekening: editornaamruimten, laagnamen, opmerkingen, verborgen elementen, paden met tien decimalen en id's als “Layer_1-copy-3”. Een browser heeft daar niets van nodig. De optimizer achter deze pagina parseert het bestand, verwijdert wat geen zichtbaar effect heeft en schrijft de rest in zijn kortste vorm, zodat iconen en illustraties vaak een derde of meer kleiner worden zonder verandering in hoe ze eruitzien.

Een SVG optimaliseren in vier stappen

  1. Plak de SVG-code in het linkervak of druk op SVG-bestand openen.
  2. Stel het aantal decimalen in en vink de opties aan die je nodig hebt.
  3. Vergelijk de twee voorbeelden en lees de bespaarde grootte onder het resultaat af.
  4. Druk op Kopiëren of download het nieuwe bestand als .min.svg.

Wat elke optie doet

  • Decimalen rondt coördinaten af. Drie cijfers zijn veilig voor iconen; één of twee passen bij grote, eenvoudige vormen.
  • Meerdere rondes herhaalt het opschonen tot er niets meer te besparen valt.
  • Id's inkorten hernoemt de id's die worden gebruikt en laat de rest vallen. Zet het uit voor inline SVG waarvan de id's elders worden gestijld of aangestuurd.
  • Width en height verwijderen laat de afbeelding met zijn container meeschalen, mits er een viewBox is.
  • Scripts verwijderen wist script-elementen en gebeurtenisattributen, handig voordat je een SVG uit onbekende bron insluit.

Controles voordat je het origineel vervangt

Optimaliseren is voor de meeste bestanden veilig, maar fel afronden kan haarlijnen verschuiven, en verwijderde id's kunnen CSS of animaties breken die ernaar verwijzen. Daarom toont de pagina het origineel en het resultaat naast elkaar. Bewaar het oorspronkelijke bestand tot je het nieuwe op zijn echte plek hebt gezien.

Er wordt niets geüpload

De optimizer wordt één keer geladen en draait in dit tabblad. Je ontwerp bereikt nooit een server, wat belangrijk is voor ongepubliceerde logo's en klantwerk.

Veelgestelde vragen (FAQ)

Met de standaardopties moet de afbeelding er hetzelfde uitzien. Minder decimalen of verwijderde id's kunnen details veranderen, dus controleer het voorbeeld voordat je een bestand vervangt.