SVG optimalizáló
SVG fájlok minifikálása: kommentek, metaadatok, szerkesztői attribútumok és felesleges whitespace eltávolítása. Méretcsökkenés %-ban, böngészőben.
Miről szól ez az eszköz?
Az SVG optimalizáló minifikálja a vektorgrafikus fájljaidat: eltávolítja a kommenteket, a metaadatokat, a szerkesztőprogramok (Inkscape, Illustrator) felesleges attribútumait és namespace-eit, valamint a felesleges szóközöket és sortöréseket. A kép megjelenése változatlan marad, a fájlméret viszont jelentősen csökken – gyorsabb betöltést és tisztább kódot eredményezve. Webfejlesztőknek és designereknek, akik ikonokat és illusztrációkat tesznek élesbe.
Hogyan használd a(z) SVG optimalizáló-t?
-
SVG feltöltése
Húzd be az SVG fájlt a feltöltési területre vagy tallózd ki.
-
Optimalizálás
Kattints az «Optimalizálás» gombra – a minifikálás azonnal lefut.
-
Eredmény ellenőrzése
Megjelenik az eredeti és az optimalizált méret, valamint a százalékos csökkenés.
-
Másolás vagy letöltés
Másold a tiszta SVG kódot a vágólapra, vagy töltsd le fájlként.
Mikor van rá szükséged?
-
Weboldal-teljesítmény
Kisebb SVG-k gyorsabb betöltést és jobb Core Web Vitals értékeket adnak.
-
Ikonkészletek
Szerkesztőből exportált ikonok megtisztítása a felesleges metaadatoktól élesítés előtt.
-
Inline SVG
Tisztább kód, ha az SVG-t közvetlenül a HTML-be vagy komponensbe ágyazod.
-
Build pipeline
Kézi optimalizálás gyors ellenőrzéshez, build-eszköz beállítása előtt.
Miért érdemes optimalizálni az SVG-t?
Az SVG (Scalable Vector Graphics) egy XML-alapú vektorformátum, amely tetszőleges méretben éles marad, és webre ideális. A grafikus szerkesztők (Inkscape, Illustrator) azonban exportáláskor gyakran rengeteg felesleges adatot tesznek a fájlba: szerkesztői metaadatokat, rejtett réteginformációkat, hosszú namespace-deklarációkat és bőséges whitespace-t.
Ezek az elemek nem befolyásolják a kép megjelenését, viszont feleslegesen növelik a fájlméretet. Az optimalizálás eltávolítja őket, így a fájl kisebb lesz, gyorsabban töltődik, és a kódja is áttekinthetőbb – különösen fontos ez, ha az SVG-t inline módon ágyazod a HTML-be, ahol minden bájt a HTML-súlyt növeli.
Hasznos tippek
-
A szerkesztőből exportált SVG-knél a legnagyobb a megtakarítás – ezek tele vannak felesleges metaadattal.
-
Az optimalizált SVG-t a szerveren gzip/brotli tömörítéssel kombinálva még kisebb lesz az átvitt méret.
-
A fájl a böngésződben marad – bizalmas, publikálatlan grafikákat is nyugodtan optimalizálhatsz.
Gyakori kérdések
- XML deklarációt, DOCTYPE-ot, kommenteket, a <metadata> blokkot, a szerkesztői (Inkscape/Illustrator) attribútumokat és namespace-eket, valamint a felesleges whitespace-t – a kép megjelenése változatlan marad.
- Nem, a teljes feldolgozás a böngésződben történik – a fájl nem hagyja el a gépedet.
- Nem. Csak a megjelenítést nem befolyásoló elemek (kommentek, metaadatok, whitespace) kerülnek eltávolításra – a rajzolási utasítások (path, alakzatok, színek) érintetlenek maradnak.
- Ez a forrástól függ: a szerkesztőből exportált SVG-k gyakran sok felesleges metaadatot tartalmaznak, ezeknél 30–60% csökkenés is elérhető; a már tiszta SVG-knél kevesebb.
- Igen, a teljes feldolgozás a böngésződben történik – az SVG fájl egyetlen bájtja sem kerül szerverre.
- Igen, az akadálymentességhez fontos <title> és <desc> elemeket megtartja; csak a megjelenítéshez és kódhoz felesleges részeket törli.