Kövesd ezt a kidolgozott példát, majd alkalmazd ugyanazokat a vezérlőket a saját képedre. SVG tömörítő megnyitása.
Töltsön fel egy statikus SVG fájlt vagy illessze be a jelölőkódot
Nyissa meg a(z) SVG tömörítőt, és válasszon egy SVG fájlt, vagy próbáljon ki egy mintát. A minta egy svg-compressor.svg, egy 985 bájtos orbitális jel, 512 × 512 viewBox-szal, színátmenetes kitöltéssel, címmel és leírással. Használja a Beillesztés SVG lehetőséget, ha a jelölőkód már egy szerkesztőben vagy a vágólapon van.
Az eszköz legfeljebb 20 fájlt fogad el, egyenként 2 MB méretben. Elemzi a teljes SVG dokumentumot, és eltávolítja a szabványos SVG dokumentumdeklarációkat külső fájlok betöltése nélkül. A hibás XML, az egyéni entitásdeklarációk és a belső dokumentum-részhalmazok elutasításra kerülnek. A nagyon összetett fájlok elérhetik az elem- vagy feldolgozási időkorlátot is.
Ez a munkafolyamat statikus vektorgrafikát hoz létre. A szkriptek, eseménykezelők, külső erőforrások, animációk és beágyazott raszteres képek eltávolításra kerülnek. Az Eredeti előnézet már megtisztított, ezért nem értelmezhető a forrásfájl minden funkciójának korlátlan megjelenítéseként.
Tartson meg egy másolatot az eredeti SVG fájlról. Egy interaktív illusztráció vagy egy fényképet tartalmazó SVG más felhasználási eset, mint egy statikus vektorikon.
Hasonlítsa össze az eredményt és állítsa be a tizedes pontosságot
A két előnézeti panel a megtisztított eredetit és az optimalizált eredményt mutatja. Az Eredeti és Optimalizált melletti méretek, valamint a bájt-összegzés összehasonlítja a forrásfájlt a kész kimenettel. Jelzi a növekedést, ha az optimalizálás egy adott fájlt nagyobbra tesz, ahelyett, hogy minden esetben csökkenést ígérne.
Nyissa meg a Beállításokat, és állítsa a Tizedes pontosságot 2 értékre a példához. A pontosság 1 és 5 között mozog, és 3 értéken kezdődik. Az alacsonyabb értékek egyszerűsíthetik a numerikus geometriát, de eltolhatják a finom görbéket, kis réseket vagy igazított éleket. Növelje az értéket, ha az előnézet elveszíti a fontos részleteket.
Ez a minta egyszerű geometriát használ, így a(z) 2 pontosság megőrzi felismerhető alakját. Más, bonyolult tizedes koordinátákkal rendelkező SVG-k jobban megváltozhatnak. Az optimalizált SVG jelölőkód megtekintése felfedi a tényleges szöveget, amely letöltésre kerül; ez nem az eredeti külön ábrázolása.
Ellenőrizze a vektort a tervezett megjelenítési méretében és nagyobb nézetben is. Egy kis bélyegképen nehéz észrevenni az apró eltolódásokat.
A példa ebben az útmutatóban
Próbáljon ki egy mintát: svg-compressor.svg, 985 bájt, 512 × 512 viewBox. Decimális pontosság 2; akadálymentes címek/leírások megtartása és belső azonosítók rövidítése engedélyezve; reszponzív méretek és olvasható kimeneti jelölés letiltva. Letöltött SVG: 635 bájt.
- Forrás SVG
- 985 bájt
- Optimalizált SVG
- 635 bájt
- Mért csökkenés
- 35.5%
- Megőrzött környezet
- Cím, leírás és 512 × 512 viewBox
Őrizze meg a leírásokat és vegye figyelembe a külső azonosítókat
Hagyja bekapcsolva a Hozzáférhető címek és leírások megtartása opciót a példához. Ez megtartja a(z) SVG címet és leírást, miközben eltávolítja a felesleges szerkesztői metaadatokat és egyszerűsíti a megfelelő jelölőkódot. Ezek különböző típusú információk, és nem kezelendők felcserélhetőként.
A Belső azonosítók rövidítése alapértelmezés szerint be van kapcsolva. Az optimalizáló frissíti a hivatkozásokat a(z) SVG fájlon belül, de a külső CSS vagy JavaScript továbbra is támaszkodhat az eredeti azonosítókra. Kapcsolja ki ezt az opciót, ha a fájl egy nagyobb alkalmazás része, amely elnevezi az elemeit, és tesztelje a kész SVG fájlt ebben a környezetben.
Hagyja kikapcsolva a Reszponzív méretek és az Olvasható kimeneti jelölőkód opciókat a példához. A Reszponzív méretek eltávolítja a rögzített szélességet és magasságot, amikor a koordináta viewBox méretezhető méretet biztosíthat. Az Olvasható kimenet behúzást ad hozzá, és hasznos a karbantartáshoz, de növelheti a szöveg méretét.
Önálló ikonfájl esetén a belső azonosítók tisztítása általában egyszerű. Külsőleg szkriptelt diagramnál az azonosítók megőrzése fontosabb lehet, mint néhány megtakarított bájt.
Töltse le és ellenőrizze a kész vektort
Válassza a Start, majd a Letöltés lehetőséget. A kidolgozott kimenet 635 bájt a 985 bájtos forráshoz képest: 35.5%-os csökkenés. A címe és leírása megmarad, a megjelenített összehasonlítás pedig a valódi forrásból és a letöltött SVG fájlból származik.
A cikk mindkét vektort 1,024 képpontban jeleníti meg az eredmény éles szemléltetése érdekében; logikai koordinátaméretük továbbra is 512 × 512. A nagyobb előnézet nem ad raszteres tartalmat a mentett SVG fájlhoz. Ellenőrizze a tényleges vektort a céloldalon, mielőtt lecserélne egy meglévő éles eszközt.
Egy fájl letöltése SVG formátumban történik, az eredeti alapnévvel. Kötegelt letöltés esetén egy ZIP fájl jön létre, a duplikált fájlnevekhez számozott utótagokkal. A feldolgozás a böngészőben történik. Tartsa meg az eredeti forrást, ha később más optimalizálási beállításokat szeretne kipróbálni.
A fájlméret-megtakarítás csak erre a mintára vonatkozik. Egy már optimalizált SVG fájl esetében kevés javulás tapasztalható, vagy akár kissé nagyobb is lehet.
Gyakori kérdések
Az optimalizált SVG pontosan ugyanúgy fog kinézni?
Az optimalizáló célja a statikus megjelenés megőrzése, de a kerekítés és a nem támogatott tartalom eltávolítása megváltoztathatja a fájlt. Hasonlítsd össze az előnézeteket, és teszteld a mentett SVG fájlt a projektedben.
Mit változtat a tizedes pontosság?
Ez szabályozza a numerikus geometriához és az útvonaladatokhoz használt pontosságot. Az alacsonyabb értékek csökkenthetik a méretet, de eltolhatják a finom részleteket. Az alapértelmezett érték: 3.
Megtartja a címet és a leírást?
Igen, alapértelmezés szerint. Hagyja bekapcsolva a „Hozzáférhető címek és leírások megtartása” opciót ezen SVG elemek megőrzéséhez.
Miért hiányoznak a szkriptek vagy a raszteres képek?
Ez az eszköz statikus vektorkimenetet hoz létre. A szkriptek, események, külső erőforrások, animációk és beágyazott raszteres képek a tisztítás során szándékosan eltávolításra kerülnek.
Megtarthatom a CSS által hivatkozott azonosítókat?
Kapcsolja ki a „Belső azonosítók rövidítése” opciót, ha a külső kód konkrét azonosítóktól függ. Az eredeti fájl cseréje előtt ellenőrizze az optimalizált fájlt a céloldalon.
A SVG fájlok felkerülnek a szerverre optimalizálásra?
Nem. Az eszköz a böngészőben végzi az elemzést és az optimalizálást, az eredményt pedig helyileg tölti le.
Feltölthetek SVG fájlt DOCTYPE-pal?
A szabványos SVG dokumentumdeklarációt elfogadja az eszköz, és a külső azonosító lekérése nélkül eltávolítja. Az egyéni entitásdeklarációkat és a belső dokumentum-részhalmazokat elutasítja.
Tegye könnyebbé a vektort, olyan eredménnyel, amelyet ellenőrizhet.
Próbálj ki egy mintát vagy használd a saját fájlodat, és ellenőrizd az eredményt a megosztás előtt.