Ugrás a tartalomra

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

A szerkesztők hagyta felesleg eltávolítása és rövidebb útvonaladatok SVGO-val, közvetlenül a böngésződben.

Húzd ide a fájlokat

vagy

Fájlok kiválasztása

SVG · JPG · PNG · GIF · TIFF · WebP

A fájlok sosem hagyják el az eszközödet

A tömörítő betöltése…

SVG tömörítése három lépésben

  1. Add hozzá a fájlokat

    Húzd a fájlokat a mezőbe, illeszd be őket, vagy válaszd ki őket az eszközödről. Semmit sem töltünk fel.

  2. Nézd át a beállításokat

    Az alapbeállítás a legtöbb fájlhoz megfelel. Ha még kisebb fájl kell, módosítsd a minőséget, a méretet vagy a formátumot.

  3. Töltsd le az eredményt

    Mentsd a fájlokat egyenként vagy egyetlen ZIP-ben. Ha egy fájl nem lehet kisebb, megmarad az eredeti.

Az SVG kód, nem pixelek

Az SVG (Scalable Vector Graphics) fájl egy XML-alapú szöveges dokumentum, amely alakzatokat ír le: útvonalakat, köröket, színátmeneteket, szöveget. Mivel pixelek helyett utasításokat tartalmaz, bármilyen méretben éles marad, a 16 pixeles faviconttól az óriásplakátig. A weben az ikonok, logók, illusztrációk, diagramok és térképek gyakran SVG-k, a formátum pedig 2001 óta W3C-szabvány.

Annak, hogy szöveg, van egy mellékhatása: a fájlméret attól függ, milyen bőbeszédűen írta meg a szerkesztőprogram, nem attól, mekkorában jelenik meg a kép. Két teljesen egyformán megjelenő SVG mérete akár többszörösen is eltérhet.

Mitől nehezebbek az SVG-fájlok a szükségesnél?

  • Szerkesztői metaadatok. Az Illustrator, az Inkscape, a Figma és a Sketch saját névtereket, rétegneveket, exportálási megjegyzéseket, sőt néha a szerkeszthető dokumentum beágyazott másolatát is hozzáadja.
  • Túlzott pontosság. Olyan koordináták, mint a 12.483920174, ahol a 12.48 bármilyen reális méretben pontosan ugyanúgy jelenik meg.
  • Felesleges szerkezet. Üres csoportok, rejtett rétegek, alapértelmezett attribútumértékek, nem használt definíciók és rövidebben is leírható stílusok.
  • Hosszú útvonal-szintaxis. Abszolút parancsok ott, ahol a relatívak rövidebbek, ismételt parancsbetűk, fölösleges szóközök.
  • Beágyazott bitképek. Az illusztrációba illesztett fotó Base64-szövegként kerül az SVG-be, ami nagyjából egyharmadával nagyobb az eredeti képfájlnál.

Hogyan optimalizálja az eszköz az SVG-t?

Az eszköz az SVGO-t, a széles körben használt nyílt forráskódú SVG-optimalizálót futtatja a böngésződben. Eltávolítja a metaadatokat és a megjegyzéseket, összevonja a felesleges csoportokat, lerövidíti az útvonaladatokat, alapértelmezés szerint 3 tizedesjegyre kerekíti a számokat (0 és 6 között választhatsz), és egyesíti a stílusokat, a köröket pedig addig ismétli, amíg már semmi sem változik. Az eredmény továbbra is szabályos SVG, amelyet bármelyik szerkesztőben megnyithatsz vagy HTML-be illeszthetsz. Tesztjeinkben nyolc SVG-n – a kézzel optimalizált ikonoktól a szerkesztői adatokkal teli Inkscape-exportig – a megtakarítás 8% és 42% között mozgott.

Az optimalizálás szűk értelemben technikailag veszteséges: a kerekítés apró mértékben megváltoztatja a koordinátákat, a szerkesztőspecifikus adatok pedig eltűnnek, így a fájlt nem nyithatod meg újra az összes eredeti rétegével. Tartsd meg a tervezőprogramod forrásfájlját, az optimalizált SVG-t pedig kezeld közzétett változatként.

A szerverek az SVG-t általában gzip- vagy Brotli-tömörítéssel küldik, ami a böngészőbe vezető úton ismét összezsugorítja a szöveget. Az optimalizálás és a szerveroldali tömörítés hatása összeadódik, mert az eltávolított adatot egyáltalán nem kell tömöríteni.

Amikor egy optimalizált SVG elromlik

  • A CSS vagy a JavaScript nem talál meg egy elemet. Az optimalizálók lerövidítik vagy eltávolítják azokat az azonosítókat és osztályneveket, amelyek a fájlon belül használatlannak tűnnek. Ha az oldalad stílusai vagy szkriptjei ezekre hivatkoznak, közzététel előtt ellenőrizd az eredményt.
  • Az ikon már nem méreteződik. Az SVG-nek a helyes átméretezéshez viewBox attribútum kell. Az eszköz ezt megtartja, ezért nézd meg, volt-e ilyen az eredetiben; a csak rögzített szélességgel és magassággal rendelkező SVG soha nem méreteződött jól.
  • Az apró alakzatok torzulnak. A nagy rajzvásznon rajzolt nagyon kicsi ikonok megsínylhetik a kerekítést. Az alapértelmezett pontosságnál ez ritka.
  • A fájl nagyrészt egy beágyazott fotó. Exportáld a fotót külön JPG- vagy WebP-fájlba, és hivatkozz rá, vagy alakítsd az egész grafikát bitképpé.

Kérdések az SVG-ről

Másképp fog kinézni az optimalizált SVG?

Normál méretben nem. Az alakzatok, a színek és a szöveg ugyanúgy jelennek meg. Ha bizonytalan vagy, az előtte-utána nézetben ellenőrizd az olyan részleteket, mint a vékony vonalak.

Szerkeszthetem még utána a fájlt?

Igen, bármelyik vektoros szerkesztő megnyitja. Ami elvész, az a szerkesztőspecifikus információ, például a rétegnevek és a rajztáblák, ezért a későbbi tervezőmunkához tartsd meg az eredetit.

Alakítsam az SVG-t PNG-vé, hogy kisebb legyen?

Általában nem. Egy tiszta ikon-SVG gyakran csak néhány kilobájt, és minden képernyőn éles marad. Csak akkor alakítsd PNG-vé, ha a célhely nem fogad el SVG-t – sok levelezőprogram és néhány közösségi oldal ilyen.

Biztonságos animációkat tartalmazó SVG-t optimalizálni?

A fájlon belüli SMIL- és CSS-animációk megmaradnak, a külső szkriptekkel vezérelt animációk viszont azonosítókra támaszkodhatnak. Teszteld az optimalizált fájlt azon az oldalon, ahol fut.

Kapcsolódó oldalak

A bitképeket a képtömörítő kezeli. Arról, hogy mi fut helyben és miért, a hogyan működik oldalon olvashatsz.