Eszközök95

OPTIMALIZÁLÁS / GYAKORLATI KÉPÚTMUTATÓ

SVG fájlok tömörítése

A könnyebb vektor csak akkor hasznos, ha a megfelelő részletek megmaradnak.

Egy SVG tömörítéséhez töltse fel a fájlt vagy illessze be a jelölőkódját, hasonlítsa össze a megtisztított eredetit az optimalizált verzióval, állítsa be a pontosságot, majd válassza a Start lehetőséget. Ez az útmutató egy valódi orbitális ikont használ, és ellenőrzi mind az exportált vektort, mind annak bájtméret-csökkenését.

Kövesse az útmutatót
EGY ELLENŐRZÖTT FORRÁS ÉS A LETÖLTÖTT EREDMÉNYE
Előtte Eredeti lila pálya SVG ikon.

Eredeti 985 bájtos SVG, 1,024 px méretben megjelenítve ehhez az összehasonlításhoz.

Utána Optimalizált SVG, amely megtartja a pálya ikont ugyanabban a megjelenítési méretben.

Tényleges 635 bájtos SVG, ugyanabban a 1,024 px kijelzőfelbontásban megjelenítve.

Eredeti 985 bájtos SVG, 1,024 px méretben megjelenítve ehhez az összehasonlításhoz. Tényleges 635 bájtos SVG, ugyanabban a 1,024 px kijelzőfelbontásban megjelenítve.
Hirdetések
GYORS VIDEÓTUTORIÁL How to compress an SVG with a preview Choose an SVG, review the comparison, adjust precision and download the optimized vector. Angol nyelvű narráció Videó megtekintése

How to compress an SVG with a preview

Hirdetések

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.

01

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.

02

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
03

Ő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.

04

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.

HASZNOS RÉSZLETEK

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.

TE KÖVETKEZEL

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.

SVG tömörítő megnyitása

Kép részletei

Nyelv38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

Válassza ki a nyelvet. A videós oktatóanyagok jelenleg angol nyelvű narrációt használnak.