Softonic

Comprimeer SVG

Stap 1 / 2
Volgende

Een SVG die vanuit Figma, Illustrator of Sketch wordt geëxporteerd, bevat doorgaans 2-5x meer markeringen dan nodig is: naamruimten van de editor, opmerkingen, lege groepen, redundante transformaties en coördinaten met 6 decimalen. Met deze tool wordt uw SVG door een SVGO-stijl geleid, waardoor de ruis wordt verwijderd en de weergegeven uitvoer pixelidentiek blijft.

Hoe een SVG te comprimeren

  1. 1

    Plak of upload uw SVG

    Accepteert onbewerkte XML-tekst of een .svg-bestand.

  2. 2

    Kies een optimalisatieniveau

    Veilig (verwijder opmerkingen en metagegevens van de editor), agressief (groepen samenvouwen, ronde coördinaten, paden samenvoegen) of aangepast.

  3. 3

    Bekijk het verschil

    Vergelijk het aantal bytes voor en na, en bekijk een voorbeeld van het weergegeven resultaat om te bevestigen dat er visueel niets is veranderd.

  4. 4

    Kopiëren of downloaden

    Plak de geoptimaliseerde SVG rechtstreeks in uw code of sla deze op als bestand.

Wat een SVG opzwelt

Open een door Figma geëxporteerde SVG in een teksteditor en je ziet meestal het volgende:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Bijna elke lijn is verwijderbaar. De weergegeven uitvoer heeft alleen de svg, viewBox en path nodig.

Wat de optimalisatie verwijdert

Verwijderd Waarom veilig
XML-opmerkingen Nooit weergegeven
Editor-naamruimten (schets, figma) Niet gebruikt door browsers
<title> / <desc> (optioneel) Toegankelijke tekst, behouden indien betekenisvol
Lege <g>-groepen Geen visueel effect
Standaard attribuutwaarden Browsers gebruiken toch standaardinstellingen
Identiteitstransformaties translate(0,0) doet niets
Coördinaat decimalen 3 decimalen zien er identiek uit op het scherm
Ongebruikte ID’s Bewaar alleen ID’s waarnaar elders wordt verwezen

Valkuilen

  • Verwijder geen ID’s waarnaar wordt verwezen door CSS of door url(#...) in vullingen, maskers en filters. De agressieve modus kan verlopen (gradients) breken.
  • Bewaar viewBox. Zonder dit zal de SVG niet responsief schalen.
  • Bewaar <title> als u er afhankelijk van bent voor de toegankelijkheid (schermlezers kondigen dit aan).
  • Vermijd het samenvouwen van <use>-instanties. De optimalisatie kan ze inline plaatsen en zo het oorspronkelijke, leidende patroon verliezen.

Wanneer compressie echte bytes bespaart

SVG is tekst, wat betekent dat gzip op de server al een groot deel van de redundantie wegneemt. Een SVG die ongecomprimeerd van 4 KB naar 1 KB daalt, kan over de lijn slechts van 1,2 KB naar 0,7 KB dalen. Toch is het de moeite waard, en de kleinere bron is gemakkelijker te lezen.

Veelgestelde vragen

Veilige modus niet. De agressieve modus kan ID’s verwijderen waarnaar wordt verwezen door CSS- of SMIL-animaties. Als uw SVG animaties heeft, gebruikt u de veilige modus of zet u de ID’s handmatig op de witte lijst.

De export van Figma/Illustrator krimpt doorgaans met 50-80%. Handgeschreven SVG is al compact en daalt meestal slechts 10-20%.

Standaard ja: de kenmerken <title>, <desc> en aria-* blijven behouden. U kunt ervoor kiezen om ze te verwijderen als de SVG puur decoratief is en de omringende HTML het label levert.

Ja. Het kenmerk xmlns wordt behouden omdat dit vereist is bij het rechtstreeks plakken van SVG in HTML. Inline SVG is meestal de snelste leveringsmethode voor kleine pictogrammen.

Gerelateerde tools

PNG naar SVG vectoriseren

Trek PNG-rasterafbeeldingen in de browser over als SVG-paden. Ideaal voor logo’s, iconen en lijntekeningen. Regel drempelwaarde, aantal kleuren en afvlakking.

WebP naar PNG

Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.

Foto-editor

Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.

GIF-maker

Zet een reeks afbeeldingen om in een geanimeerde GIF. Stel beeldsnelheid, kwaliteit en afmetingen in voor het exporteren.

ARW-naar-JPG-converter

Converteer Sony ARW RAW-foto's naar JPG. Maak van je camera-RAW-bestand een deelbare, universeel compatibele JPEG zonder Lightroom te openen.

QR-codegenerator

Maak in uw browser een QR-code van tekst of een URL en download deze als PNG.