Sledite temu delovnemu primeru, nato prilagodite iste kontrole svoji sliki. Odpri Kompresor SVG.
Naložite statični SVG ali prilepite oznako
Odprite SVG kompresor in izberite datoteko SVG ali Poskusite vzorec. Vzorec je svg-compressor.svg, 985-bajtna oznaka orbite z 512 × 512 viewBox, prelivnim polnilom, naslovom in opisom. Uporabite Prilepi SVG, ko je oznaka že v urejevalniku ali odložišču.
Orodje sprejme do 20 datotek velikosti do 2 MB vsaka. Razčleni celoten dokument SVG in odstrani standardne deklaracije dokumenta SVG brez nalaganja zunanjih datotek. Napačno oblikovan XML, deklaracije entitet po meri in notranje podmnožice dokumentov so zavrnjeni. Zelo zapletene datoteke lahko dosežejo tudi omejitev elementov ali časa obdelave.
Ta delovni proces ustvari statično vektorsko umetniško delo. Skripte, upravljalnike dogodkov, zunanje vire, animacije in vdelane rastrske slike se odstrani. Predogled izvirnika je že očiščen, zato ga ne smete razlagati kot neomejeno upodabljanje vseh funkcij v izvorni datoteki.
Shranite kopijo izvirnika SVG. Interaktivna ilustracija ali SVG, ki vsebuje fotografijo, je drugačen primer uporabe kot statična vektorska ikona.
Primerjajte rezultat in nastavite decimalno natančnost
Dve plošči za predogled prikazujeta očiščen izvirnik in optimiziran rezultat. Velikosti poleg Izvirnik in Optimizirano ter povzetek bajtov primerjajo izvorno datoteko s končnim izhodom. Poroča o povečanju, ko optimizacija naredi določeno datoteko večjo, namesto da bi vsakič obljubljala zmanjšanje.
Odprite Nastavitve in nastavite Decimalno natančnost na 2 za primer. Natančnost se giblje od 1 do 5 in se začne pri 3. Nižje vrednosti lahko poenostavijo številčno geometrijo, vendar lahko premaknejo fine krivulje, majhne vrzeli ali poravnane robove. Povečajte jo, ko predogled izgubi pomembne podrobnosti.
Ta vzorec uporablja preprosto geometrijo, zato natančnost 2 ohrani svojo prepoznavno obliko. Drugi SVG-ji z zapletenimi decimalnimi koordinatami se lahko bolj spremenijo. Ogled optimizirane oznake SVG razkrije dejansko besedilo, ki bo preneseno; ni ločen prikaz izvirnika.
Preverite vektor v njegovi predvideni velikosti prikaza in v večjem pogledu. Subtilen premik je težko opaziti v majhni sličici.
Primer v tem vodniku
Preizkusite vzorec: svg-compressor.svg, 985 bajtov, 512 × 512 viewBox. Decimalna natančnost 2; omogočeno ohranjanje dostopnih naslovov/opisov in skrajšanje notranjih ID-jev; onemogočeni Odzivne dimenzije in Berljiva izhodna koda. Preneseno SVG: 635 bajtov.
- Vir SVG
- 985 bajtov
- Optimizirano SVG
- 635 bajtov
- Izmerjeno zmanjšanje
- 35.5%
- Ohranjeni kontekst
- Naslov, opis in 512 × 512 viewBox
Ohranite opise in upoštevajte zunanje ID-je
Pustite možnost Ohrani dostopne naslove in opise omogočeno za obdelan primer. To ohrani naslov in opis SVG, hkrati pa odstrani odvečne metapodatke urejevalnika in poenostavi upravičene oznake. To so različne vrste informacij in jih ne smete obravnavati kot zamenljive.
Skrajšaj notranje ID-je je privzeto vklopljeno. Optimizator posodobi sklice znotraj SVG, vendar se zunanji CSS ali JavaScript morda še vedno zanašajo na izvirne ID-je. Izklopite to možnost, ko je datoteka del večje aplikacije, ki poimenuje svoje elemente, in preizkusite končni SVG v tem kontekstu.
Za ta primer pustite izklopljeni možnosti Odzivne dimenzije in Berljiva izhodna koda. Odzivne dimenzije odstranijo fiksno širino in višino, kadar lahko koordinatni viewBox zagotovi prilagodljivo velikost. Berljiva izhodna koda doda zamike in je uporabna za vzdrževanje, vendar lahko poveča velikost besedila.
Za samostojno datoteko ikone je čiščenje notranjih ID-jev običajno preprosto. Pri zunanje skriptiranem diagramu je ohranjanje identifikatorjev morda pomembnejše od nekaj prihranjenih bajtov.
Prenesite in preverite končno vektorsko datoteko
Izberite Začni, nato Prenesi. Obdelani izhod ima 635 bajtov v primerjavi z 985-bajtnim virom: 35.5% zmanjšanje. Naslov in opis ostaneta, prikazana primerjava pa je upodobljena iz pristnega vira in prenesene SVG.
Članek upodobi oba vektorja pri 1,024 slikovnih pikah za ostro ponazoritev rezultata; njuna logična koordinatna velikost ostaja 512 × 512. Večji predogled ne doda rastrske vsebine shranjeni SVG. Pred zamenjavo obstoječega produkcijskega sredstva preverite dejanski vektor na ciljni strani.
Ena datoteka se prenese kot SVG z izvirnim osnovnim imenom. Paket se prenese kot ena datoteka ZIP s številčenimi priponami za podvojena imena datotek. Obdelava poteka v brskalniku. Obdržite izvirni vir, če želite pozneje preizkusiti različne nastavitve optimizacije.
Prihranki velikosti datoteke se merijo samo glede na ta vzorec. Že optimizirana SVG morda ne bo pokazala bistvenega izboljšanja ali pa bo postala nekoliko večja.
Pogosta vprašanja
Ali bo optimizirana SVG izgledala popolnoma enako?
Optimizator želi ohraniti statičen videz, vendar lahko zaokroževanje in odstranjevanje nepodprte vsebine spremeni datoteko. Primerjajte predoglede in preizkusite shranjeno SVG v svojem projektu.
Kaj spremeni decimalna natančnost?
Nadzoruje natančnost, uporabljeno za številčne geometrijske in potne podatke. Nižje vrednosti lahko zmanjšajo velikost, vendar lahko premaknejo drobne podrobnosti. Privzeta vrednost je 3.
Ali ohrani naslov in opis?
Da, privzeto. Pustite omogočeno možnost Ohrani dostopne naslove in opise, da ohranite te SVG elemente.
Zakaj manjkajo skripti ali rastrske slike?
To orodje ustvari statičen vektorski izhod. Skripti, dogodki, zunanji viri, animacije in vdelane rastrske slike se med čiščenjem namerno odstranijo.
Ali lahko obdržim ID-je, na katere se sklicuje CSS?
Izklopite Skrajšaj notranje ID-je, ko je zunanja koda odvisna od določenih ID-jev. Pred zamenjavo izvirnika preverite optimizirano datoteko na ciljni strani.
Ali se SVG datoteke nalagajo za optimizacijo?
Ne. Orodje izvaja razčlenjevanje in optimizacijo v brskalniku ter prenese rezultat lokalno.
Ali lahko naložim SVG z DOCTYPE?
Standardna deklaracija dokumenta SVG je sprejeta in odstranjena brez pridobivanja zunanjega identifikatorja. Deklaracije entitet po meri in notranje podmnožice dokumentov so zavrnjene.
Naredite vektor lažji, z rezultatom, ki ga lahko pregledate.
Preizkusite vzorec ali uporabite svojo datoteko in pred skupno rabo preglejte rezultat.
