Utilia
Kategórie ▾
Jazyk: sk ▾

Optimalizácia SVG

Optimalizuj a minifikuj súbory SVG online pomocou SVGO priamo v prehliadači. Vyber predvoľbu, vizuálne porovnaj výsledok a sleduj úsporu veľkosti aj po gzip.

Pluginy

Odstránenie viewBox zastaví škálovanie kresby a skrátenie alebo odstránenie ID pokazí CSS, JavaScript, <use> alebo odkazy na kotvy, ktoré sa na ne odvolávajú. Pri SVG používaných v kóde, sprite sheetoch alebo animáciách nechaj predvoľbu Bezpečná.

Ako optimalizovať SVG

  1. Presuň súbor SVG do vyznačenej oblasti alebo na ňu klikni a vyber ho. Značky môžeš aj vložiť do poľa Kód SVG.
  2. Vyber Predvoľbu: Bezpečná, Vyvážená (predvolená) alebo Maximálna. Zoznam Pluginy nižšie presne ukazuje, ktoré kroky každá predvoľba zapína.
  3. V prípade potreby uprav Počet desatinných miest (0 až 8 číslic), Viac prechodov a Formátovaný výstup (odsadený), ak chceš čitateľný kód. Hneď ako zmeníš plugin, presnosť alebo počet prechodov, predvoľba sa prepne na Vlastná.
  4. Klikni na Optimalizovať SVG. Presunutý súbor sa optimalizuje hneď a keď už existuje výsledok, každá zmena nastavení spustí optimalizáciu automaticky znova.
  5. Skontroluj hodnoty Pôvodná veľkosť, Optimalizovaná veľkosť, Úspora a Po gzip a potom porovnaj obe kresby vedľa seba.
  6. Klikni na Kopírovať, ak chceš skopírovať Optimalizovaný kód SVG, alebo na Stiahnuť optimalizované SVG, ak ho chceš uložiť ako name.min.svg.

Optimalizáciu robí SVGO 4, štandardný open source (MIT) optimalizátor SVG používaný vo väčšine webových nástrojov na zostavovanie. Jeho verzia pre prehliadač sa načíta pri prvom kliknutí a beží celá na tvojom zariadení: tvoje SVG sa nikdy nenahráva.

Prečo sú súbory SVG z dizajnérskych nástrojov také ťažké

SVG exportované z Illustratoru, Inkscapu, Figmy alebo Sketchu nesie omnoho viac než samotnú kresbu. Editory pridávajú vlastné menné priestory a atribúty (názvy vrstiev, vodidlá, nastavenia exportu), blok <metadata>, komentáre ako „Generator: Adobe Illustrator“, súradnice so šiestimi či viacerými desatinnými miestami, skupiny obsahujúce jediný element a rozvláčne farby ako #ffffff. Nič z toho nemení, čo prehliadač vykreslí. SVGO to odstráni, zaokrúhli čísla, prepíše údaje ciest kratšími príkazmi, skráti farby a zlúči alebo rozbalí nadbytočné elementy. Zmenšenie o 40 – 60 % je pri exportovaných ikonách a ilustráciách bežné.

Predvoľby a rizikové pluginy

  • Bezpečná spúšťa predvolenú predvoľbu SVGO, ale zachová ID, <desc>, samostatné cesty a pravidlá <style>, s 3 desatinnými miestami a jedným prechodom. Použi ju pre SVG, na ktoré sa odkazuje z CSS alebo JavaScriptu, pre sprite sheety a animácie.
  • Vyvážená je predvolená predvoľba SVGO, 3 desatinné miesta, viac prechodov. Hodí sa pre väčšinu ikon a ilustrácií zobrazovaných ako obrázky.
  • Maximálna pridáva Odstrániť </strong>, <strong>Odstrániť skripty a atribúty udalostí</strong>, <strong>Odstrániť width/height (ponechať viewBox)</strong> a <strong>Nahradiť xlink:href atribútom href</strong>, s 2 desatinnými miestami a viacerými prechodmi.</li> </ul> <p>Žiadna predvoľba neodstraňuje viewBox. <strong>Odstrániť viewBox</strong> je tu iba pre zvláštne prípady: bez neho sa kresba už nedá škálovať na veľkosť, ktorú jej zadáš v CSS.</p> <p>Vedz, čo môžu pokaziť ostatné pluginy:</p> <ul> <li><strong>Skrátiť a odstrániť nepoužité ID</strong> premenuje ID ako <code>#icon-home</code> na <code>a</code>. Každý selektor CSS, dotaz JavaScriptu, odkaz sprite sheetu <code><use href="#…"></code>, kotva na stránke alebo animácia SMIL/CSS, ktorá mieri na staré meno, prestane fungovať.</li> <li><strong>Odstrániť <title></strong> a <strong>Odstrániť <desc></strong> zmažú prístupný názov a popis. Ponechaj ich pri významných ikonách a grafoch, ktoré musia čítače obrazovky oznamovať.</li> <li>Nízky <strong>Počet desatinných miest</strong> môže deformovať malé ikony: krivky sa vlnia a hrany sa posúvajú. Vždy skontroluj vizuálne porovnanie; 3 je bezpečná predvolená hodnota.</li> <li><strong>Zlúčiť cesty</strong> spojí susedné cesty do jednej, takže efekt pri prechode myšou alebo animácia, ktorá mierila na jednu cestu, stratí svoj cieľ.</li> </ul> <h2>Tipy</h2> <ul> <li>Ponechaj si neoptimalizovanú hlavnú kópiu na úpravy; so súborom <code>.min.svg</code> zaobchádzaj ako so skompilovaným kódom.</li> <li>Na serveri zapni gzip alebo brotli: textové formáty ako SVG sa komprimujú veľmi dobre a hodnota <strong>Po gzip</strong> ukazuje, čo si návštevníci skutočne sťahujú (zobrazí sa, ak tvoj prehliadač podporuje <code>CompressionStream</code>).</li> <li>Inline SVG sa dá štýlovať v CSS a animovať, ale neukladá sa do vyrovnávacej pamäte samostatne; SVG v <code><img></code> sa ukladá, ale zo stránky sa nedá štýlovať.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Často kladené otázky</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Nahráva sa moje SVG na server?</summary> <div class="prose px-5 pb-5"><p>Nie. SVGO beží v tvojom prehliadači. Jediné sťahovanie je kód samotného optimalizátora pri prvej optimalizácii.</p></div> </details> <details class="faq group"> <summary>Prečo sa náhľad zobrazuje ako obrázky?</summary> <div class="prose px-5 pb-5"><p>SVG je formát dokumentu, ktorý môže obsahovať JavaScript a načítavať externé súbory. Oba náhľady sa vykresľujú ako <code><img></code> z lokálnych adries blob a v tomto režime prehliadače nikdy nespúšťajú skripty ani nenačítavajú externé zdroje, takže náhľad nedôveryhodného SVG je tu bezpečný. Samotný optimalizovaný kód však skripty stále obsahuje, pokiaľ nie je zapnuté <strong>Odstrániť skripty a atribúty udalostí</strong> (v predvoľbe <strong>Maximálna</strong> je).</p></div> </details> <details class="faq group"> <summary>Moje optimalizované SVG sa už neškáluje. Čo sa stalo?</summary> <div class="prose px-5 pb-5"><p>Pravdepodobne bol odstránený viewBox, buď pluginom <strong>Odstrániť viewBox</strong>, alebo skôr iným nástrojom. Optimalizuj originál znova s vypnutým týmto pluginom.</p></div> </details> <details class="faq group"> <summary>Prečo prestal fungovať môj sprite sheet ikon alebo animácia?</summary> <div class="prose px-5 pb-5"><p><strong>Skrátiť a odstrániť nepoužité ID</strong> alebo <strong>Zlúčiť cesty</strong> zmenili elementy, na ktoré sa tvoj kód odvoláva. Použi predvoľbu <strong>Bezpečná</strong>, ktorá zachová oboje.</p></div> </details> <details class="faq group"> <summary>Optimalizovaný súbor nie je menší. Prečo?</summary> <div class="prose px-5 pb-5"><p>SVG je pravdepodobne už minifikované. Skús <strong>Maximálnu</strong> predvoľbu alebo nižší <strong>Počet desatinných miest</strong> a vypni <strong>Formátovaný výstup (odsadený)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Súvisiace nástroje</h2> <ul class="card-grid mt-4"><li><a class="card" href="/sk/svg-na-png/"> <span class="card-title">Konvertor SVG na PNG</span> <span class="card-text">Konvertuj SVG na PNG, JPG alebo WebP v prehliadači s ľubovoľnou šírkou, výškou, mierkou alebo DPI, s priehľadným či farebným pozadím. Dávka a ZIP.</span> </a></li> <li><a class="card" href="/sk/obrazok-na-svg/"> <span class="card-title">Vektorizácia obrázka na SVG</span> <span class="card-text">Konvertuj logo alebo kresbu z PNG či JPG na vektorové cesty SVG priamo v prehliadači. Predvoľby, počet farieb, filter škvŕn, bezpečný náhľad, bez nahrávania.</span> </a></li> <li><a class="card" href="/sk/kompresia-obrazkov/"> <span class="card-title">Kompresia obrázkov</span> <span class="card-text">Komprimuj obrázky JPG, PNG a WebP s posuvníkom kvality, porovnaj veľkosti pred a po a spracuj fotografie hromadne bez ich nahrávania na server.</span> </a></li> <li><a class="card" href="/sk/formatovanie-css/"> <span class="card-title">Formátovanie a minifikácia CSS</span> <span class="card-text">Skrášli neprehľadné CSS čistým odsadením alebo ho minifikuj pomocou csso a zobraz veľkosť pred a po. Beží v prehliadači, nič sa nenahráva na server.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Reklama"><span class="ad-label">Reklama</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Bezplatné online nástroje, ktoré fungujú v tvojom prehliadači. Tvoje údaje zostávajú na tvojom zariadení.</p> </div> <nav aria-label="Kategórie"> <p class="font-semibold">Nástroje</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/sk/textove-nastroje/">Textové nástroje</a></li><li><a class="link-muted" href="/sk/nastroje-pre-vyvojarov/">Nástroje pre vývojárov</a></li><li><a class="link-muted" href="/sk/web-seo-marketing/">Web, SEO a marketing</a></li><li><a class="link-muted" href="/sk/farby-a-dizajn/">Farby a dizajn</a></li><li><a class="link-muted" href="/sk/obrazky-a-fotografie/">Obrázky a fotografie</a></li><li><a class="link-muted" href="/sk/pdf-a-dokumenty/">PDF a dokumenty</a></li><li><a class="link-muted" href="/sk/matematicke-kalkulacky/">Matematické kalkulačky</a></li><li><a class="link-muted" href="/sk/financne-kalkulacky/">Finančné kalkulačky</a></li><li><a class="link-muted" href="/sk/datum-a-cas/">Dátum a čas</a></li><li><a class="link-muted" href="/sk/prevodniky-jednotiek/">Prevodníky jednotiek</a></li><li><a class="link-muted" href="/sk/zdravie-a-fitness/">Zdravie a fitness</a></li><li><a class="link-muted" href="/sk/domov-kutilstvo-kuchyna-auto/">Domov, kutilstvo, kuchyňa a auto</a></li><li><a class="link-muted" href="/sk/generatory/">Generátory</a></li><li><a class="link-muted" href="/sk/testy-zariadeni/">Testy zariadení a prehliadača</a></li><li><a class="link-muted" href="/sk/audio-a-video/">Audio a video</a></li><li><a class="link-muted" href="/sk/vzdelavanie-a-jazyky/">Vzdelávanie a jazyky</a></li><li><a class="link-muted" href="/sk/hry/">Hry</a></li></ul> </nav> <nav aria-label="Informácie"> <p class="font-semibold">Informácie</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/sk/o-nas/">O nás</a></li> <li><a class="link-muted" href="/sk/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/sk/zasady-ochrany-osobnych-udajov/">Zásady ochrany osobných údajov</a></li> <li><a class="link-muted" href="/sk/podmienky-pouzivania/">Podmienky používania</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>