Följ detta arbetsexempel och anpassa sedan samma kontroller till din egen bild. Öppna SVG-komprimerare.
Ladda upp en statisk SVG eller klistra in koden
Öppna SVG-komprimeraren och välj en SVG-fil eller prova ett exempel. Exemplet är svg-compressor.svg, ett 985-byte orbit-märke med en 512 × 512 viewBox, gradientfyllning, titel och beskrivning. Använd Klistra in SVG när koden redan finns i en redigerare eller urklipp.
Verktyget accepterar upp till 20 filer på 2 MB styck. Det tolkar ett komplett SVG-dokument och tar bort standard SVG-dokumentdeklarationer utan att läsa in externa filer. Felaktig XML, anpassade entitetsdeklarationer och interna dokumentdelmängder avvisas. Mycket komplexa filer kan också nå gränsen för element eller bearbetningstid.
Detta arbetsflöde skapar statisk vektorgrafik. Skript, händelsehanterare, externa resurser, animering och inbäddade rasterbilder tas bort. Original-förhandsgranskningen är redan sanerad, så den bör inte tolkas som en obegränsad rendering av varje funktion i källfilen.
Behåll en kopia av originalet SVG. En interaktiv illustration eller en SVG som innehåller ett fotografi är ett annat användningsområde än en statisk vektorikon.
Jämför resultatet och ställ in decimalprecision
De två förhandsgranskningspanelerna visar det sanerade originalet och det optimerade resultatet. Storlekar bredvid Original och Optimerad samt byte-sammanfattningen jämför källfilen med det färdiga resultatet. Den rapporterar en ökning när optimering gör en specifik fil större istället för att lova en minskning varje gång.
Öppna Inställningar och ställ in Decimalprecision till 2 för exemplet. Precisionen sträcker sig från 1 till 5 och börjar på 3. Lägre värden kan förenkla numerisk geometri men kan förskjuta fina kurvor, små mellanrum eller inriktade kanter. Höj den när förhandsgranskningen förlorar detaljer som är viktiga.
Detta exempel använder enkel geometri, så precision 2 behåller sin igenkännbara form. Andra SVG-filer med intrikata decimala koordinater kan ändras mer. Visa optimerad SVG-kod exponerar den faktiska texten som kommer att laddas ner; det är inte en separat representation av originalet.
Kontrollera en vektor vid dess avsedda visningsstorlek och vid en större vy. En subtil förskjutning kan vara svår att se i en liten miniatyrbild.
Exemplet i denna guide
Prova ett urval: svg-compressor.svg, 985 byte, 512 × 512 viewBox. Decimalprecision 2; behåll tillgängliga titlar/beskrivningar och förkorta interna ID:n aktiverat; Responsiva dimensioner och läsbar utdatamarkup inaktiverat. Nedladdad SVG: 635 byte.
- Källa SVG
- 985 byte
- Optimerad SVG
- 635 byte
- Uppmätt minskning
- 35.5%
- Bevarat sammanhang
- Titel, beskrivning och 512 × 512 viewBox
Bevara beskrivningar och överväg externa ID:n
Lämna Behåll tillgängliga titlar och beskrivningar aktiverat för exemplet. Detta behåller SVG-titeln och beskrivningen samtidigt som redundant redigeringsmetadata tas bort och giltig kod förenklas. Dessa är olika typer av information och bör inte behandlas som utbytbara.
Förkorta interna ID:n är aktiverat som standard. Optimeraren uppdaterar referenser inom SVG, men externa CSS eller JavaScript kan fortfarande förlita sig på de ursprungliga ID:na. Stäng av detta alternativ när filen är en del av en större applikation som namnger sina element, och testa den färdiga SVG i det sammanhanget.
Lämna Responsiva dimensioner och Läsbar utdatakod avstängt för exemplet. Responsiva dimensioner tar bort fast bredd och höjd när koordinat-viewBox kan tillhandahålla skalbar storlek. Läsbar utdata lägger till indrag och är användbart för underhåll, men kan öka textstorleken.
För en fristående ikonfil är rensning av interna ID:n vanligtvis okomplicerad. För ett externt skriptat diagram kan bevarande av identifierare vara viktigare än några sparade byte.
Ladda ner och verifiera den färdiga vektorn
Välj Start, sedan Ladda ner. Det bearbetade resultatet är 635 byte jämfört med 985-byte-källan: en 35.5% minskning. Dess titel och beskrivning finns kvar, och den visade jämförelsen renderas från den äkta källan och nedladdade SVG.
Artikeln renderar båda vektorerna vid 1,024 pixlar för en skarp illustration av resultatet; deras logiska koordinatstorlek förblir 512 × 512. En större förhandsgranskning lägger inte till rasterinnehåll i den sparade SVG. Granska den faktiska vektorn på din målsida innan du ersätter en befintlig produktionstillgång.
En fil laddas ner som SVG med sitt ursprungliga basnamn. En batch laddas ner som en ZIP-fil, med numrerade suffix för dubbla filnamn. Bearbetningen sker i webbläsaren. Behåll originalkällan om du vill prova olika optimeringsinställningar senare.
Besparingar i filstorlek mäts endast mot detta urval. En redan optimerad SVG kan visa liten förbättring eller bli något större.
Vanliga frågor
Kommer den optimerade SVG att se exakt likadan ut?
Optimeraren syftar till att bevara statiskt utseende, men avrundning och borttagning av innehåll som inte stöds kan ändra en fil. Jämför förhandsgranskningarna och testa den sparade SVG i ditt projekt.
Vad ändrar decimalprecision?
Det styr precisionen som används för numerisk geometri och sökvägsdata. Lägre värden kan minska storleken men kan förskjuta fina detaljer. Standardvärdet är 3.
Behålls titel och beskrivning?
Ja, som standard. Låt Behåll tillgängliga titlar och beskrivningar vara aktiverat för att bevara dessa SVG-element.
Varför saknas skript eller rasterbilder?
Detta verktyg skapar en statisk vektorutdata. Skript, händelser, externa resurser, animeringar och inbäddade rasterbilder tas avsiktligt bort under saneringen.
Kan jag behålla ID:n som refereras av CSS?
Stäng av Förkorta interna ID:n när extern kod är beroende av specifika ID:n. Verifiera den optimerade filen på målsidan innan du ersätter originalet.
Laddas SVG-filer upp för optimering?
Nej. Verktyget utför parsning och optimering i webbläsaren och laddar ner resultatet lokalt.
Kan jag ladda upp en SVG med en DOCTYPE?
En standard SVG-dokumentdeklaration accepteras och tas bort utan att hämta dess externa identifierare. Anpassade entitetsdeklarationer och interna dokumentdelmängder avvisas.
Gör vektorn lättare, med ett resultat du kan inspektera.
Prova ett exempel eller använd din egen fil, och granska resultatet innan du delar.
