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.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Instagram rutnätsdelare

Dela en bred bild i ett 3×3-rutnät för Instagram, eller valfritt antal rader. Rutorna är numrerade så att de är enkla att ladda upp i omvänd ordning.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Linjerat papper-generator

Skapa utskrivbart linjerat papper gratis. Välj college-, bred eller smal linjering, ange radavstånd i mm, pappersstorlek och en marginallinje, och skriv sedan ut eller ladda ner SVG:n.

Verktyget finns på andra språk