Følg dette eksempel og tilpas derefter de samme kontroller til dit eget billede. Åbn SVG Kompressor.
Upload en statisk SVG eller indsæt markuppen
Åbn SVG-kompressor og vælg en SVG-fil eller Prøv et eksempel. Eksemplet er svg-compressor.svg, et 985-byte orbit-mærke med en 512 × 512 viewBox, gradientfyld, titel og beskrivelse. Brug Indsæt SVG, når markuppen allerede er i en editor eller udklipsholder.
Værktøjet accepterer op til 20 filer på 2 MB hver. Det parser et komplet SVG-dokument og fjerner standard SVG-dokumentdeklarationer uden at indlæse eksterne filer. Misdannet XML, brugerdefinerede entitetsdeklarationer og interne dokument-undergrupper afvises. Meget komplekse filer kan også nå grænsen for elementer eller behandlingstid.
Denne arbejdsgang producerer statisk vektor-artwork. Scripts, hændelseshåndteringer, eksterne ressourcer, animation og indlejrede rasterbilleder fjernes. Den originale forhåndsvisning er allerede renset, så den bør ikke tolkes som en ubegrænset gengivelse af alle funktioner i kildefilen.
Behold en kopi af den originale SVG. En interaktiv illustration eller en SVG, der indeholder et fotografi, er et andet brugsscenarie end et statisk vektorikon.
Sammenlign resultatet og indstil decimalpræcision
De to forhåndsvisningspaneler viser den rensede original og det optimerede resultat. Størrelser ved siden af Original og Optimeret samt byte-oversigten sammenligner kildefilen med det færdige output. Den rapporterer en stigning, når optimering gør en bestemt fil større i stedet for at love en reduktion hver gang.
Åbn Indstillinger og indstil Decimalpræcision til 2 for eksemplet. Præcisionen spænder fra 1 til 5 og starter ved 3. Lavere værdier kan forenkle numerisk geometri, men kan forskyde fine kurver, små mellemrum eller justerede kanter. Øg den, når forhåndsvisningen mister vigtige detaljer.
Dette eksempel bruger ligetil geometri, så præcision 2 bevarer sin genkendelige form. Andre SVG'er med indviklede decimal-koordinater kan ændre sig mere. Vis optimeret SVG-markup afslører den faktiske tekst, der vil blive downloadet; det er ikke en separat repræsentation af originalen.
Tjek en vektor ved dens tilsigtede visningsstørrelse og ved en større visning. En subtil forskydning kan være svær at se i et lille miniaturebillede.
Eksemplet i denne guide
Prøv et eksempel: svg-compressor.svg, 985 bytes, 512 × 512 viewBox. Decimalpræcision 2; behold tilgængelige titler/beskrivelser og forkort interne ID'er aktiveret; Responsive dimensioner og læsbar output-markup deaktiveret. Downloadet SVG: 635 bytes.
- Kilde SVG
- 985 bytes
- Optimeret SVG
- 635 bytes
- Målt reduktion
- 35.5%
- Bevaret kontekst
- Titel, beskrivelse og 512 × 512 viewBox
Bevar beskrivelser og overvej eksterne ID'er
Lad Behold tilgængelige titler og beskrivelser være aktiveret for det gennemgåede eksempel. Dette bevarer SVG-titlen og beskrivelsen, mens overflødige editormetadata fjernes og kvalificeret markup forenkles. Dette er forskellige typer information og bør ikke behandles som udskiftelige.
Forkort interne ID'er er som standard slået til. Optimeringsværktøjet opdaterer referencer i SVG, men ekstern CSS eller JavaScript kan stadig stole på de originale ID'er. Slå denne indstilling fra, når filen er en del af en større applikation, der navngiver sine elementer, og test den færdige SVG i den kontekst.
Lad Responsiv dimension og Læsbar output-markup være slået fra for eksemplet. Responsiv dimension fjerner fast bredde og højde, når koordinat-viewBox kan give skalerbar størrelse. Læsbar output tilføjer indrykning og er nyttig til vedligeholdelse, men kan øge tekststørrelsen.
For en selvstændig ikonfil er oprydning af interne ID'er normalt ligetil. For et eksternt scriptet diagram kan bevarelse af identifikatorer betyde mere end et par sparede bytes.
Download og verificer den færdige vektor
Vælg Start, derefter Download. Det færdige output er 635 bytes sammenlignet med 985-byte kilden: en 35.5% reduktion. Dens titel og beskrivelse forbliver, og den viste sammenligning er gengivet fra den ægte kilde og downloadede SVG.
Artiklen gengiver begge vektorer ved 1,024 pixels for en skarp illustration af resultatet; deres logiske koordinatstørrelse forbliver 512 × 512. Et større eksempelbillede tilføjer ikke rasterindhold til den gemte SVG. Gennemse den faktiske vektor på din destinationsside, før du erstatter et eksisterende produktionsaktiv.
Én fil downloades som SVG med sit oprindelige basisnavn. En batch downloades som én ZIP-fil med nummererede suffikser for duplikerede filnavne. Behandlingen foregår i browseren. Behold den oprindelige kilde, hvis du senere vil prøve andre optimeringsindstillinger.
Besparelser i filstørrelse måles kun i forhold til dette eksempel. En allerede optimeret SVG viser muligvis kun lille forbedring eller bliver en smule større.
Almindelige spørgsmål
Vil den optimerede SVG se nøjagtig ens ud?
Optimeringsværktøjet tilstræber at bevare statisk udseende, men afrunding og fjernelse af ikke-understøttet indhold kan ændre en fil. Sammenlign forhåndsvisningerne og test den gemte SVG i dit projekt.
Hvad ændrer decimalpræcision?
Det styrer præcisionen, der bruges til numerisk geometri og stidata. Lavere værdier kan reducere størrelsen, men kan forskyde fine detaljer. Standardværdien er 3.
Beholdes titel og beskrivelse?
Ja, som standard. Lad Behold tilgængelige titler og beskrivelser være aktiveret for at bevare disse SVG elementer.
Hvorfor mangler scripts eller rasterbilleder?
Dette værktøj skaber et statisk vektoroutput. Scripts, hændelser, eksterne ressourcer, animation og indlejrede rasterbilleder fjernes bevidst under rensning.
Kan jeg beholde ID'er, der refereres til af CSS?
Slå Forkort interne ID'er fra, når ekstern kode afhænger af specifikke ID'er. Bekræft den optimerede fil på mål-siden, før du erstatter originalen.
Bliver SVG filer uploadet til optimering?
Nej. Værktøjet udfører parsing og optimering i browseren og downloader resultatet lokalt.
Kan jeg uploade en SVG med en DOCTYPE?
En standard SVG dokumentdeklaration accepteres og fjernes uden at hente dens eksterne identifikator. Brugerdefinerede entitetsdeklarationer og interne dokumentsubsets afvises.
Gør vektoren lettere med et resultat, du kan inspicere.
Prøv et eksempel eller brug din egen fil, og gennemse resultatet før deling.
