Softonic

Komprimera SVG

Steg 1 / 2
Nästa

En SVG exporterad från Figma, Illustrator eller Sketch bär vanligtvis 2-5x mer markup än den behöver: editor-namnrymder, kommentarer, tomma grupper, redundanta transformeringar och koordinater med 6 decimaler. Det här verktyget kör din SVG genom en genomgång i SVGO-stil och tar bort bruset samtidigt som den renderade utdatan förblir pixel-identisk.

Så komprimerar du en SVG

  1. 1

    Klistra in eller ladda upp din SVG

    Accepterar rå XML-text eller en .svg-fil.

  2. 2

    Välj en optimeringsnivå

    Säker (ta bort kommentarer och editor-metadata), aggressiv (kollapsa grupper, avrunda koordinater, slå ihop paths) eller anpassad.

  3. 3

    Granska diffen

    Jämför byteantal före och efter, och förhandsgranska det renderade resultatet för att bekräfta att inget ändrades visuellt.

  4. 4

    Kopiera eller ladda ner

    Klistra in den optimerade SVG:en direkt i din kod, eller spara som en fil.

Vad som blåser upp en SVG

Öppna en Figma-exporterad SVG i en textredigerare så ser du vanligtvis:

<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>

Nästan varje rad går att ta bort. Den renderade utdatan behöver bara svg, viewBox och path.

Vad optimeraren tar bort

Borttaget Varför det är säkert
XML-kommentarer Renderas aldrig
Editor-namnrymder (sketch, figma) Används inte av webbläsare
<title> / <desc> (valfritt) Tillgänglig text, behåll om meningsfull
Tomma <g>-grupper Ingen visuell effekt
Standardattributvärden Webbläsare använder standardvärden ändå
Identitetstransformeringar translate(0,0) gör ingenting
Koordinatdecimaler 3 decimaler ser identiska ut på skärm
Oanvända ID:n Behåll endast ID:n som refereras någon annanstans

Fallgropar

  • Ta inte bort ID:n som refereras av CSS eller av url(#...) i fyllningar, masker, filter. Aggressivt läge kan förstöra gradienter.
  • Behåll viewBox. Utan den skalar SVG:en inte responsivt.
  • Behåll <title> om du förlitar dig på den för tillgänglighet (skärmläsare läser upp den).
  • Undvik att kollapsa <use>-instanser. Optimeraren kan infoga dem inline och förlora source-of-truth-mönstret.

När komprimering sparar verkliga byte

SVG är text, vilket innebär att gzip på servern redan tar bort mycket av redundansen. En SVG som minskar från 4KB till 1KB okomprimerat kanske bara minskar från 1.2KB till 0.7KB över ledningen. Ändå värt det, och den mindre källan är lättare att läsa.

Vanliga frågor

Säkert läge gör det inte. Aggressivt läge kan ta bort ID:n som refereras av CSS- eller SMIL-animationer, om din SVG har animationer, använd säkert läge eller vitlista ID:na manuellt.

Exporter från Figma/Illustrator krymper vanligtvis 50-80 %. Handskriven SVG är redan kompakt och minskar oftast bara 10-20 %.

Som standard ja, <title>, <desc> och aria-*-attribut bevaras. Du kan välja att ta bort dem om SVG:en är rent dekorativ och den omgivande HTML:en tillhandahåller etiketten.

Ja. Attributet xmlns behålls eftersom det krävs när du klistrar in SVG direkt i HTML. Inline-SVG är oftast den snabbaste leveransmetoden för små ikoner.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Ändra bildstorlek

Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.

Streckkodsgenerator

Skapa en 1D-streckkod i webbläsaren i Code 128, EAN, UPC, ITF-14 och andra format som stöds och ladda ned den som SVG eller PNG.

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

GIF-skapare

Gör en bildsekvens till en animerad GIF. Ställ in bildfrekvens, kvalitet och storlek före export.