Følg dette eksempelet, og tilpass deretter de samme kontrollene til ditt eget bilde. Åpne SVG-komprimering.
Last opp en statisk SVG eller lim inn koden
Åpne SVG-kompressor og velg en SVG-fil eller Prøv et eksempel. Eksemplet er svg-compressor.svg, et 985-byte bane-merke med en 512 × 512 viewBox, gradientfyll, tittel og beskrivelse. Bruk Lim inn SVG når koden allerede er i en editor eller utklippstavle.
Verktøyet godtar opptil 20 filer på 2 MB hver. Det analyserer et komplett SVG-dokument og fjerner standard SVG-dokumentdeklarasjoner uten å laste inn eksterne filer. Feilaktig XML, egendefinerte entitetsdeklarasjoner og interne dokumentdeler avvises. Svært komplekse filer kan også nå grensen for elementer eller prosesseringstid.
Denne arbeidsflyten produserer statisk vektorgrafikk. Skript, hendelseshåndterere, eksterne ressurser, animasjon og innebygde rasterbilder fjernes. Original-forhåndsvisningen er allerede renset, så den bør ikke tolkes som en ubegrenset gjengivelse av alle funksjoner i kildefilen.
Behold en kopi av den originale SVG. En interaktiv illustrasjon eller en SVG som inneholder et fotografi er et annet bruksområde enn et statisk vektorikon.
Sammenlign resultatet og sett desimalpresisjon
De to forhåndsvisningspanelene viser den rensede originalen og det optimaliserte resultatet. Størrelser ved siden av Original og Optimalisert samt byte-oppsummeringen sammenligner kildefilen med det ferdige resultatet. Den rapporterer en økning når optimalisering gjør en bestemt fil større i stedet for å love en reduksjon hver gang.
Åpne Innstillinger og sett Desimalpresisjon til 2 for eksemplet. Presisjon varierer fra 1 til 5 og starter på 3. Lavere verdier kan forenkle numerisk geometri, men kan forskyve fine kurver, små mellomrom eller justerte kanter. Øk den når forhåndsvisningen mister viktige detaljer.
Dette eksemplet bruker enkel geometri, så presisjon 2 beholder sin gjenkjennelige form. Andre SVG-er med intrikate desimalkoordinater kan endre seg mer. Vis optimalisert SVG-kode viser den faktiske teksten som vil bli lastet ned; det er ikke en separat representasjon av originalen.
Sjekk en vektor i tiltenkt visningsstørrelse og i en større visning. En subtil forskyvning kan være vanskelig å se i et lite miniatyrbilde.
Eksempelet i denne veiledningen
Prøv et eksempel: svg-compressor.svg, 985 bytes, 512 × 512 viewBox. Desimalpresisjon 2; behold tilgjengelige titler/beskrivelser og forkort interne ID-er aktivert; Responsive dimensjoner og Lesbar utdatamarkup deaktivert. Nedlastet SVG: 635 bytes.
- Kilde SVG
- 985 bytes
- Optimalisert SVG
- 635 bytes
- Målt reduksjon
- 35.5%
- Beholdt kontekst
- Tittel, beskrivelse og 512 × 512 viewBox
Behold beskrivelser og vurder eksterne ID-er
La Behold tilgjengelige titler og beskrivelser være aktivert for eksemplet. Dette beholder SVG-tittelen og beskrivelsen mens overflødige redigeringsmetadata fjernes og kvalifisert kode forenkles. Dette er forskjellige typer informasjon og bør ikke behandles som utskiftbare.
Forkort interne ID-er er på som standard. Optimalisereren oppdaterer referanser i SVG, men eksterne CSS eller JavaScript kan fortsatt stole på de originale ID-ene. Slå av dette alternativet når filen er en del av en større applikasjon som navngir elementene sine, og test den ferdige SVG i den konteksten.
La Responsiv størrelse og Lesbar utdatakode være av for eksemplet. Responsiv størrelse fjerner fast bredde og høyde når koordinat-viewBox kan gi skalerbar størrelse. Lesbar utdata legger til innrykk og er nyttig for vedlikehold, men kan øke tekststørrelsen.
For en frittstående ikonfil er opprydding av interne ID-er vanligvis greit. For et eksternt skriptet diagram kan det å bevare identifikatorer bety mer enn noen få sparte bytes.
Last ned og verifiser den ferdige vektoren
Velg Start, deretter Last ned. Det ferdige resultatet er 635 bytes sammenlignet med 985-byte kilden: en 35.5% reduksjon. Tittel og beskrivelse forblir, og den viste sammenligningen er gjengitt fra den ekte kilden og nedlastet SVG.
Artikkelen gjengir begge vektorene ved 1,024 piksler for en skarp illustrasjon av resultatet; deres logiske koordinatstørrelse forblir 512 × 512. En større forhåndsvisning legger ikke til rasterinnhold i den lagrede SVG. Kontroller den faktiske vektoren på destinasjonssiden din før du erstatter en eksisterende produksjonsressurs.
Én fil lastes ned som SVG med sitt opprinnelige basenavn. En bunke lastes ned som én ZIP-fil, med nummererte suffikser for duplikate filnavn. Behandlingen skjer i nettleseren. Behold den opprinnelige kilden hvis du vil prøve andre optimaliseringsinnstillinger senere.
Filstørrelsesbesparelser måles kun mot dette eksemplet. En allerede optimalisert SVG kan vise liten forbedring eller bli noe større.
Vanlige spørsmål
Vil den optimerte SVG se helt lik ut?
Optimereren har som mål å bevare statisk utseende, men avrunding og fjerning av innhold som ikke støttes kan endre en fil. Sammenlign forhåndsvisningene og test den lagrede SVG-filen i prosjektet ditt.
Hva endrer desimalpresisjon?
Det kontrollerer presisjonen som brukes for numerisk geometri og banedata. Lavere verdier kan redusere størrelsen, men kan forskyve fine detaljer. Standardverdien er 3.
Beholdes tittel og beskrivelse?
Ja, som standard. La Behold tilgjengelige titler og beskrivelser være aktivert for å bevare disse SVG-elementene.
Hvorfor mangler skript eller rasterbilder?
Dette verktøyet lager et statisk vektorresultat. Skript, hendelser, eksterne ressurser, animasjoner og innebygde rasterbilder fjernes bevisst under rensing.
Kan jeg beholde ID-er referert til av CSS?
Slå av Forkort interne ID-er når ekstern kode er avhengig av spesifikke ID-er. Kontroller den optimaliserte filen på målnettsiden før du erstatter originalen.
Blir SVG-filer lastet opp for optimalisering?
Nei. Verktøyet utfører parsing og optimalisering i nettleseren og laster ned resultatet lokalt.
Kan jeg laste opp en SVG med en DOCTYPE?
En standard SVG-dokumentdeklarasjon aksepteres og fjernes uten å hente dens eksterne identifikator. Egendefinerte entitetsdeklarasjoner og interne dokumentdeler avvises.
Gjør vektoren lettere, med et resultat du kan inspisere.
Prøv et eksempel eller bruk din egen fil, og gå gjennom resultatet før du deler.
