SVG-optimalizáló

Hogyan optimalizálj egy SVG-t

1. Húzz egy SVG fájlt a megjelölt területre, vagy kattints rá, és válassz egyet. A kódot az SVG-kód mezőbe is beillesztheted.
2. Válassz Előbeállítást: Biztonságos, Kiegyensúlyozott (az alapértelmezett) vagy Maximális. Az alatta lévő Bővítmények lista pontosan megmutatja, hogy az egyes előbeállítások mely lépéseket kapcsolják be.
3. Szükség esetén módosíts: a Tizedes pontosság (0–8 számjegy), a Többmenetes és a Formázott kimenet (behúzással) olvasható kódhoz. Amint módosítasz egy bővítményt, a pontosságot vagy a menetek számát, az előbeállítás Egyénire vált.
4. Kattints az SVG optimalizálása gombra. A behúzott fájl azonnal optimalizálódik, és ha már van eredmény, minden beállításmódosítás automatikusan újra lefuttatja az optimalizálást.
5. Nézd meg az Eredeti méret, Optimalizált méret, Megtakarítás és Gzip-pel tömörítve értékeket, majd hasonlítsd össze egymás mellett a két rajzot.
6. Kattints a Másolás gombra az Optimalizált SVG-kód másolásához, vagy az Optimalizált SVG letöltése gombra, hogy név.min.svg néven mentsd.

Az optimalizálást az SVGO 4 végzi, a legtöbb webes buildeszközben használt szabványos, nyílt forráskódú (MIT) SVG-optimalizáló. A böngészős változata az első kattintáskor töltődik be, és teljes egészében az eszközödön fut: az SVG-d soha nem kerül feltöltésre.

Miért olyan nehezek a tervezőeszközök SVG-fájljai

Az Illustratorból, Inkscape-ből, Figmából vagy Sketchből exportált SVG sokkal többet hordoz a rajznál. A szerkesztők saját névtereket és attribútumokat (rétegneveket, segédvonalakat, exportbeállításokat), egy <metadata> blokkot, olyan megjegyzéseket, mint a „Generator: Adobe Illustrator”, hat vagy több tizedesjegyű koordinátákat, egyetlen elemet tartalmazó csoportokat és bőbeszédű színeket, például #ffffff adnak hozzá. Ezek egyike sem változtatja meg, mit rajzol a böngésző. Az SVGO eltávolítja ezeket, kerekíti a számokat, rövidebb parancsokkal írja át az útvonaladatokat, rövidíti a színeket, és egyesíti vagy kibontja a felesleges elemeket. Az exportált ikonoknál és illusztrációknál gyakori a 40–60%-os csökkenés.

Előbeállítások és kockázatos bővítmények

• A Biztonságos az SVGO alapértelmezett előbeállítását futtatja, de megtartja az azonosítókat, a <desc> elemet, a különálló útvonalakat és a <style> szabályokat, 3 tizedessel és egy menetben. Használd a CSS-ből vagy JavaScriptből hivatkozott SVG-khez, sprite-okhoz és animációkhoz.
• A Kiegyensúlyozott az SVGO alapértelmezett előbeállítása, 3 tizedessel, több menetben. A legtöbb képként megjelenített ikonhoz és illusztrációhoz megfelel.
• A Maximális hozzáadja a