Preskočiť na obsah

Komprimujte súbory SVG

Odstráňte balast z editora a skráťte údaje ciest pomocou SVGO priamo v prehliadači.

Pretiahnite súbory sem

alebo

Vybrať súbory

SVG · JPG · PNG · GIF · TIFF · WebP

Súbory nikdy neopustia vaše zariadenie

Načítava sa kompresor…

Ako komprimovať súbory SVG

  1. Pridajte súbory

    Pretiahnite súbory do poľa, vložte ich zo schránky alebo ich vyberte zo zariadenia. Nič sa nenahráva.

  2. Skontrolujte nastavenia

    Predvolená predvoľba sa hodí pre väčšinu súborov. Ak potrebujete menší súbor, zmeňte kvalitu, veľkosť alebo formát.

  3. Stiahnite výsledok

    Uložte každý súbor zvlášť alebo všetky v jednom ZIP. Ak sa súbor nedá zmenšiť, zostane vám originál.

SVG je kód, nie pixely

Súbor SVG (Scalable Vector Graphics) je textový dokument v XML, ktorý opisuje tvary: cesty, kruhy, prechody, text. Keďže obsahuje inštrukcie namiesto pixelov, zostáva ostrý v akejkoľvek veľkosti, od 16-pixelovej ikony favicon až po billboard. Ikony, logá, ilustrácie, grafy a mapy na webe sú často v SVG a formát je štandardom W3C od roku 2001.

To, že ide o text, má vedľajší účinok: veľkosť súboru závisí od toho, ako rozvláčne ho editor zapísal, nie od toho, ako veľký sa obrázok zobrazuje. Dva súbory SVG, ktoré sa vykreslia rovnako, sa môžu veľkosťou líšiť aj niekoľkonásobne.

Čo robí súbory SVG ťažšími, než je nutné

  • Metadáta editora. Illustrator, Inkscape, Figma a Sketch pridávajú vlastné menné priestory, názvy vrstiev, komentáre z exportu a niekedy aj vloženú kópiu upraviteľného dokumentu.
  • Nadmerná presnosť. Súradnice ako 12.483920174 tam, kde sa 12.48 vykreslí pri akejkoľvek reálnej veľkosti úplne rovnako.
  • Nadbytočná štruktúra. Prázdne skupiny, skryté vrstvy, predvolené hodnoty atribútov, nepoužité definície a štýly, ktoré by mohli byť kratšie.
  • Dlhá syntax ciest. Absolútne príkazy tam, kde sú relatívne kratšie, opakované písmená príkazov, zbytočné medzery.
  • Vložené bitmapy. Fotka vložená do ilustrácie sa v SVG ukladá ako text Base64, ktorý je asi o tretinu väčší než pôvodný obrázkový súbor.

Ako nástroj optimalizuje SVG

Nástroj spustí vo vašom prehliadači SVGO, rozšírený open-source optimalizátor SVG. Odstráni metadáta a komentáre, zlúči zbytočné skupiny, skráti údaje ciest, zaokrúhli čísla predvolene na 3 desatinné miesta (môžete zvoliť 0 až 6) a zlúči štýly, pričom prechody opakuje, kým sa už nič nemení. Výsledkom je stále bežný súbor SVG, ktorý otvoríte v akomkoľvek editore alebo vložíte do HTML. V našich testoch na ôsmich súboroch SVG, od ručne optimalizovaných ikon až po export z Inkscapu plný údajov editora, sa úspora pohybovala od 8 % do 42 %.

Optimalizácia je v úzkom zmysle technicky stratová: zaokrúhlenie posunie súradnice o nepatrné hodnoty a údaje špecifické pre editor zmiznú, takže súbor už neotvoríte so všetkými pôvodnými vrstvami. Zdrojový súbor z grafického nástroja si ponechajte a optimalizované SVG berte ako zverejnenú verziu.

Servery zvyčajne posielajú SVG s kompresiou gzip alebo Brotli, ktorá text na ceste do prehliadača znova zmenší. Optimalizácia a kompresia na serveri sa sčítajú, pretože odstránené údaje už vôbec netreba komprimovať.

Keď sa optimalizované SVG pokazí

  • CSS alebo JavaScript už nenájde prvok. Optimalizátory skracujú alebo odstraňujú identifikátory a názvy tried, ktoré sa v rámci súboru zdajú nepoužité. Ak sa na ne odvolávajú štýly alebo skripty vašej stránky, pred zverejnením výsledok skontrolujte.
  • Ikona sa už nezmenšuje ani nezväčšuje. SVG potrebuje na správnu zmenu veľkosti atribút viewBox. Nástroj ho ponechá, preto skontrolujte, či ho mal originál; SVG len s pevnou šírkou a výškou sa nikdy dobre neprispôsoboval.
  • Drobné tvary vyzerajú skreslene. Veľmi malé ikony nakreslené na veľkom plátne môžu trpieť zaokrúhlením. Pri predvolenej presnosti sa to stáva zriedka.
  • Súbor je hlavne vložená fotka. Exportujte fotku ako samostatný JPG alebo WebP a odkážte na ňu, prípadne celú grafiku preveďte na bitmapu.

Otázky o SVG

Bude optimalizované SVG vyzerať inak?

Pri bežných veľkostiach nie. Tvary, farby aj text sa vykreslia rovnako. Ak si nie ste istí, skontrolujte detaily, ako sú tenké ťahy, v porovnaní pred a po.

Môžem súbor potom ešte upravovať?

Áno, otvorí ho akýkoľvek vektorový editor. Stratia sa informácie špecifické pre editor, napríklad názvy vrstiev a pracovné plochy, preto si originál ponechajte na ďalšiu grafickú prácu.

Mám previesť SVG na PNG, aby bol menší?

Zvyčajne nie. Čisté SVG ikony má často len pár kilobajtov a zostane ostré na každej obrazovke. Na PNG prevádzajte len vtedy, keď cieľ SVG neprijíma, čo platí pre mnohé e-mailové klienty a niektoré sociálne siete.

Je bezpečné optimalizovať SVG s animáciami?

Animácie SMIL a CSS v súbore sa zachovajú, ale animácie ovládané externými skriptmi môžu závisieť od identifikátorov. Optimalizovaný súbor otestujte na stránke, kde beží.

Súvisiace stránky

Bitmapové obrázky spracuje kompresor obrázkov. Čo beží lokálne a prečo, sa dozviete na stránke Ako to funguje.