Hogyan csökkenthetem egy SVG fájl méretét?

Húzz ide egy .svg fájlt vagy illeszd be a forráskódját, tartsd meg az alapértelmezett beállításokat, és hasonlítsd össze az Eredeti és Optimalizált méreteket. Ezután használd az .svg letöltése vagy a Másolás gombot a kisebb eredmény mentéséhez.

Mit távolít el az SVG optimalizáló alapértelmezetten?

Alapértelmezetten eltávolítja a megjegyzéseket, a metaadatokat (beleértve a title, desc és Inkscape vagy Sodipodi adatokat), a felesleges szóközöket, a redundáns alapértelmezett attribútumokat és az XML deklarációt, valamint a számokat 2 tizedesjegyre kerekíti.

Miért maradnak meg az elem ID-k az optimalizálás után?

Az Elem id-attribútumok eltávolítása alapértelmezetten ki van kapcsolva, mert a CSS vagy JavaScript animációk hivatkozhatnak ezekre az ID-kra. Csak akkor kapcsold be, ha az oldaladon semmi sem függ tőlük.

Miért tűntek el az SVG animációim?

A script tagek, az esemény attribútumok, a külső hivatkozások és a SMIL animációs elemek, mint az animate és set, biztonsági okokból eltávolításra kerülnek, így az optimalizált SVG statikus lesz.

Használhatom az optimalizált SVG-t React-ben vagy CSS-ben?

Igen. A Másolás és az .svg letöltése mellett van Másolás JSX-ként, ami camelCase-re alakítja az attribútumokat, és CSS háttér másolása. A Vizuális előnézet lehetővé teszi, hogy ellenőrizd, helyesen jelenik-e meg.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Feltöltődnek a fájljaim?

Nem. A fájlokat a böngészője nyitja meg és dolgozza fel, és nem kerülnek el a LibraToolhoz. Néhány eszköz előbb letölt a böngészőbe egy feldolgozómotort vagy MI-modellt; ez a letöltés semmilyen adatát nem tartalmazza.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül. A nagyon nagy fájlok lassúak lehetnek, vagy elfogyhat a memória a telefonon, ezekhez használjon számítógépet.

✨

Ingyenes SVG optimalizáló és minifier

Távolítsd el a metaadatokat, tömörítsd a szóközöket, és kerekítsd a tizedes számokat az SVG fájlméret drámai csökkentéséhez — jellemzően 30–70%-os csökkentés. A vizuális előnézet ellenőrzi, hogy semmi sem törik.

A fájlméret az eszközödtől függA fájlok privátok maradnakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

Húzza ide a fájlt, vagy kattintson a tallózáshoz

SVG · az eszközödön dolgozza fel

vagy nyomjon Ctrl+V-t a vágólapról való beillesztéshez

Fájlok tallózása

— vagy illeszd be az SVG-t alább —

Az Ön fájljai soha nem hagyják el az eszközét. Minden feldolgozás helyileg történik a böngészőjében.

Gyakori felhasználások

SVG ikonok optimalizálása gyártáshozTávolítson el szükségtelen metaadatokat az ikon SVG-ekről, mielőtt szállítaná — jellemző 50-80% csökkentés.
Márkalogo SVG-ek optimalizálásaCsökkentse az SVG logófájl méretét a gyors webhely betöltéséhez anélkül, hogy minőségi veszteséget okozna.
Illusztrációk és hős SVG-ek optimalizálásaNagyobb illusztrációk (hősök, dekoratív grafika) esetén az optimalizálás 30-70% méretcsökkentést takaríthat meg.
JavaScript csomagméret csökkentéseAmikor SVG-eket React komponensekként importálnak vagy kódba ágyaznak, az optimalizálás zsugorítja a JS csomagot.
Figma / Sketch SVG exportálások megtisztításaA Figma és Sketch SVG exportálások kiterjedt metaadatokat tartalmaznak. Távolítsa el őket, mielőtt termelésben használna.

Hogyan működik

Ez az eszköz kézzel írt optimalizálóval csökkenti az SVG fájlméretet, amely teljes egészében a böngésződben fut — nincs könyvtár, nincs szerver. Két lépést kombinál: a böngésző beépített DOMParser/XMLSerializer-jét az attribútum szintű pontos munkához, valamint célzott reguláris kifejezés-helyettesítéseket a kommentek eltávolításához, a metaadatok törléséhez és a szóközök tömörítéséhez.

1
A DOMParser tisztítja az SVG-t
Bármilyen optimalizálás előtt a böngésző DOMParsere XML-ként olvassa be az SVG-t, és végigjár minden elemet. A script tagek, eseménykezelők (bármilyen on* attribútum), animációs elemek és külső URL-hivatkozások feltétel nélkül eltávolításra kerülnek — ez függetlenül lefut attól, hogy mely optimalizálási opciókat választod.
2
DOM-alapú tizedeskerekítés
Ha a tizedeskerekítés be van kapcsolva, az optimalizáló másodszor is végigjárja az elemzett DOM-ot, és csak az ismert numerikus attribútumokra alkalmaz kerekítést (path d adatok, koordináták, transform értékek, vonalvastagságok stb.), egy olyan reguláris kifejezéssel, amely egyedi lebegőpontos számokat illeszt anélkül, hogy elrontaná az összefűzött útvonalértékeket, mint a .5.5.
3
Reguláris kifejezéses lépések tisztítják a szerializált jelölést
Az XMLSerializer normalizált XML-t állít elő, majd célzott szöveghelyettesítések távolítják el a HTML kommenteket, az Inkscape/Sodipodi szerkesztő-metaadatokat, az XML deklarációt, a felesleges alapértelmezett attribútumokat (mint a version="1.1") és a tagek közötti szóközöket — minden lépés szűken behatárolt, hogy a szöveges csomópontok tartalma soha ne sérüljön.
4
Gzip-méret és exportformátumok
A böngésző CompressionStream API-ja kiszámítja a bemenet és a kimenet valós gzip méretét, mivel valójában ez határozza meg a webes átviteli költséget. Az optimalizált SVG letölthető, lemásolható nyers SVG-ként, átalakítható React JSX-kompatibilis camelCase attribútumokká, vagy kódolható CSS adat-URI-ként — minden átalakítás helyben történik.

Az SVG-d teljes egészében a böngésződ lapján belül kerül beolvasásra és feldolgozásra — a fájl bájtjai soha nem hagyják el az eszközödet.

Kapcsolódó eszközök

🗜️

CSS minifier és formázó

Minifikálj CSS-t a fájlméret csökkentéséhez, vagy formázz minifikált CSS-t az olvashatóság érdekében. Azonnal, a böngésződben.

Próbálja ki

🗜️

GIF-tömörítő

Csökkentse egy animált GIF méretét: igazítsa egy méretkorláthoz, például a Discord 256 KB-os emojijához vagy 512 KB-os matricájához, vagy válassza meg maga a színeket, a szélességet és a képkockákat. A böngészőben fut; a GIF nem kerül feltöltésre.

Próbálja kiA fájlok helyi maradnak

📄

PDF tömörítő

Tömörítse a PDF fájlokat a méretük csökkentéséhez. Válasszon minőségi szintet — a nagyobb tömörítés kisebb fájlokat, de gyengébb képminőséget jelent.