Nahrává se moje SVG na server?

Ne. SVGO běží ve tvém prohlížeči. Jediné stahování je kód samotného optimalizátoru při první optimalizaci.

Proč se náhled zobrazuje jako obrázky?

SVG je formát dokumentu, který může obsahovat JavaScript a načítat externí soubory. Oba náhledy se vykreslují jako <img z lokálních adres blob a v tomto režimu prohlížeče nikdy nespouštějí skripty ani nenačítají externí zdroje, takže je náhled nedůvěryhodného SVG zde bezpečný. Samotný optimalizovaný kód ale skripty stále obsahuje, pokud není zapnuto Odstranit skripty a atributy událostí u předvolby Maximální zapnuto je .

Moje optimalizované SVG se přestalo škálovat. Co se stalo?

Pravděpodobně byl odstraněn viewBox, buď pluginem Odstranit viewBox , nebo dříve jiným nástrojem. Optimalizuj originál znovu s vypnutým tímto pluginem.

Proč přestal fungovat můj sprite ikon nebo animace?

Zkrátit a odstranit nepoužívaná ID nebo Sloučit cesty změnily prvky, na které se tvůj kód odkazuje. Použij předvolbu Bezpečná , která ponechává obojí.

Optimalizovaný soubor není menší. Proč?

SVG je pravděpodobně už minifikované. Zkus Maximální nebo nižší Počet desetinných míst a vypni Formátovaný výstup odsazený .

Optimalizace SVG online – minifikace a čištění kódu

Optimalizuj a minifikuj soubory SVG online pomocí SVGO přímo v prohlížeči. Vyber předvolbu, porovnej výsledek vizuálně a sleduj úsporu velikosti i po gzipu.

Jak optimalizovat SVG

Přetáhni soubor SVG do vyznačené oblasti, nebo na ni klikni a vyber ho. Značky můžeš také vložit do pole Kód SVG.
Vyber Předvolbu: Bezpečná, Vyvážená (výchozí) nebo Maximální. Seznam Pluginy níže přesně ukazuje, které kroky každá předvolba zapíná.
V případě potřeby uprav Počet desetinných míst (0 až 8 číslic), Více průchodů a Formátovaný výstup (odsazený), pokud chceš čitelný kód. Jakmile změníš plugin, přesnost nebo průchody, předvolba se přepne na Vlastní.
Klikni na Optimalizovat SVG. Přetažený soubor se optimalizuje hned a jakmile existuje výsledek, každá změna nastavení spustí optimalizaci automaticky znovu.
Zkontroluj údaje Původní velikost, Optimalizovaná velikost, Úspora a Po gzipu, pak obě kresby porovnej vedle sebe.
Klikni na Kopírovat pro zkopírování Optimalizovaného kódu SVG, nebo na Stáhnout optimalizované SVG a ulož ho jako nazev.min.svg.

Optimalizaci provádí SVGO 4, standardní open source optimalizátor SVG (licence MIT) používaný ve většině nástrojů pro sestavení webů. Jeho verze pro prohlížeč se načte při prvním kliknutí a běží celá na tvém zařízení: tvoje SVG se nikdy nenahrává.

Proč jsou soubory SVG z návrhářských nástrojů tak těžké

SVG exportované z Illustratoru, Inkscapu, Figmy nebo Sketche nese mnohem víc než samotnou kresbu. Editory přidávají vlastní jmenné prostory a atributy (názvy vrstev, vodítka, nastavení exportu), blok <metadata>, komentáře jako „Generator: Adobe Illustrator“, souřadnice se šesti i více desetinnými místy, skupiny obsahující jediný prvek a rozvláčné barvy jako #ffffff. Nic z toho nemění to, co prohlížeč vykreslí. SVGO to odstraní, zaokrouhlí čísla, přepíše data cest kratšími příkazy, zkrátí barvy a sloučí nebo rozbalí nadbytečné prvky. U exportovaných ikon a ilustrací je běžné snížení o 40–60 %.

Předvolby a rizikové pluginy

Bezpečná spouští výchozí předvolbu SVGO, ale ponechává ID, <desc>, samostatné cesty a pravidla <style>, s 3 desetinnými místy a jedním průchodem. Použij ji pro SVG, na které se odkazuje CSS nebo JavaScript, pro sprity a animace.
Vyvážená je výchozí předvolba SVGO, 3 desetinná místa, více průchodů. Hodí se pro většinu ikon a ilustrací zobrazovaných jako obrázky.
Maximální přidává Odstranit </strong>, <strong>Odstranit skripty a atributy událostí</strong>, <strong>Odstranit width/height (ponechat viewBox)</strong> a <strong>Nahradit xlink:href atributem href</strong>, s 2 desetinnými místy a více průchody.</li> </ul> <p>Žádná předvolba viewBox neodstraňuje. <strong>Odstranit viewBox</strong> je tu jen pro zvláštní případy: bez něj se kresba už nedokáže škálovat na velikost, kterou jí zadáš v CSS.</p> <p>Vědz, co další pluginy mohou rozbít:</p> <ul> <li><strong>Zkrátit a odstranit nepoužívaná ID</strong> přejmenuje ID jako <code>#icon-home</code> na <code>a</code>. Přestane fungovat každý selektor CSS, dotaz v JavaScriptu, odkaz na sprite <code><use href="#…"></code>, kotva na stránce nebo animace SMIL/CSS, která mířila na původní název.</li> <li><strong>Odstranit <title></strong> a <strong>Odstranit <desc></strong> smažou přístupný název a popis. Ponech je u smysluplných ikon a grafů, které mají čtečky obrazovky oznamovat.</li> <li>Nízký <strong>Počet desetinných míst</strong> může malé ikony zdeformovat: křivky se chvějí a hrany se posouvají. Vždy zkontroluj vizuální porovnání; 3 je bezpečná výchozí hodnota.</li> <li><strong>Sloučit cesty</strong> spojí sousední cesty do jedné, takže efekt při najetí myší nebo animace, které mířily na jednu cestu, přijdou o svůj cíl.</li> </ul> <h2>Tipy</h2> <ul> <li>Ponech si neoptimalizovanou hlavní kopii pro úpravy; <code>.min.svg</code> ber jako přeložený kód.</li> <li>Zapni na serveru gzip nebo brotli: textové formáty jako SVG se komprimují velmi dobře a údaj <strong>Po gzipu</strong> ukazuje, co návštěvníci skutečně stahují (zobrazí se, když prohlížeč podporuje <code>CompressionStream</code>).</li> <li>Vložené SVG lze stylovat pomocí CSS a animovat, ale neukládá se do mezipaměti samostatně; SVG v <code><img></code> se do mezipaměti ukládá, ale ze stránky ho stylovat nelze.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Časté dotazy</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Nahrává se moje SVG na server?</summary> <div class="prose px-5 pb-5"><p>Ne. SVGO běží ve tvém prohlížeči. Jediné stahování je kód samotného optimalizátoru při první optimalizaci.</p></div> </details> <details class="faq group"> <summary>Proč se náhled zobrazuje jako obrázky?</summary> <div class="prose px-5 pb-5"><p>SVG je formát dokumentu, který může obsahovat JavaScript a načítat externí soubory. Oba náhledy se vykreslují jako <code><img></code> z lokálních adres blob a v tomto režimu prohlížeče nikdy nespouštějí skripty ani nenačítají externí zdroje, takže je náhled nedůvěryhodného SVG zde bezpečný. Samotný optimalizovaný kód ale skripty stále obsahuje, pokud není zapnuto <strong>Odstranit skripty a atributy událostí</strong> (u předvolby <strong>Maximální</strong> zapnuto je).</p></div> </details> <details class="faq group"> <summary>Moje optimalizované SVG se přestalo škálovat. Co se stalo?</summary> <div class="prose px-5 pb-5"><p>Pravděpodobně byl odstraněn viewBox, buď pluginem <strong>Odstranit viewBox</strong>, nebo dříve jiným nástrojem. Optimalizuj originál znovu s vypnutým tímto pluginem.</p></div> </details> <details class="faq group"> <summary>Proč přestal fungovat můj sprite ikon nebo animace?</summary> <div class="prose px-5 pb-5"><p><strong>Zkrátit a odstranit nepoužívaná ID</strong> nebo <strong>Sloučit cesty</strong> změnily prvky, na které se tvůj kód odkazuje. Použij předvolbu <strong>Bezpečná</strong>, která ponechává obojí.</p></div> </details> <details class="faq group"> <summary>Optimalizovaný soubor není menší. Proč?</summary> <div class="prose px-5 pb-5"><p>SVG je pravděpodobně už minifikované. Zkus <strong>Maximální</strong> nebo nižší <strong>Počet desetinných míst</strong> a vypni <strong>Formátovaný výstup (odsazený)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Související nástroje</h2> <ul class="card-grid mt-4"><li><a class="card" href="/cs/svg-na-png/"> <span class="card-title">Převodník SVG na PNG</span> <span class="card-text">Převeď SVG na PNG, JPG nebo WebP v prohlížeči v libovolné šířce, výšce, měřítku nebo DPI, s průhledným či barevným pozadím. Hromadně a ZIP, bez nahrávání.</span> </a></li> <li><a class="card" href="/cs/obrazek-na-svg/"> <span class="card-title">Vektorizace obrázku do SVG</span> <span class="card-text">Převeď logo nebo kresbu z PNG či JPG na vektorové křivky SVG přímo v prohlížeči. Předvolby, počet barev, filtr skvrn, bezpečný náhled, bez nahrávání.</span> </a></li> <li><a class="card" href="/cs/komprese-obrazku/"> <span class="card-title">Komprese obrázků</span> <span class="card-text">Komprimuj obrázky JPG, PNG a WebP posuvníkem kvality, porovnej velikosti před a po a zpracuj fotky hromadně, aniž by se nahrávaly na server.</span> </a></li> <li><a class="card" href="/cs/css-formatovac/"> <span class="card-title">Formátovač a minifikátor CSS</span> <span class="card-text">Zpřehledni nepřehledné CSS čistým odsazením nebo ho minifikuj pomocí csso a podívej se na velikost před a po. Funguje v prohlížeči, nic se nenahrává.</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 přímo v prohlížeči. Tvoje data zůstávají v tvém zařízení.</p> </div> <nav aria-label="Kategorie"> <p class="font-semibold">Nástroje</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/cs/textove-nastroje/">Textové nástroje</a></li><li><a class="link-muted" href="/cs/nastroje-pro-vyvojare/">Nástroje pro vývojáře</a></li><li><a class="link-muted" href="/cs/web-seo-marketing/">Web, SEO a marketing</a></li><li><a class="link-muted" href="/cs/barvy-a-design/">Barvy a design</a></li><li><a class="link-muted" href="/cs/obrazky-a-fotky/">Obrázky a fotky</a></li><li><a class="link-muted" href="/cs/pdf-a-dokumenty/">PDF a dokumenty</a></li><li><a class="link-muted" href="/cs/matematicke-kalkulacky/">Matematické kalkulačky</a></li><li><a class="link-muted" href="/cs/financni-kalkulacky/">Finanční kalkulačky</a></li><li><a class="link-muted" href="/cs/datum-a-cas/">Datum a čas</a></li><li><a class="link-muted" href="/cs/prevodniky-jednotek/">Převodníky jednotek</a></li><li><a class="link-muted" href="/cs/zdravi-a-fitness/">Zdraví a fitness</a></li><li><a class="link-muted" href="/cs/domov-kuchyne-auto/">Domov, kutilství, kuchyně a auto</a></li><li><a class="link-muted" href="/cs/generatory/">Generátory</a></li><li><a class="link-muted" href="/cs/testy-zarizeni/">Testy zařízení a prohlížeče</a></li><li><a class="link-muted" href="/cs/audio-a-video/">Audio a video</a></li><li><a class="link-muted" href="/cs/vzdelavani-a-jazyky/">Vzdělávání a jazyky</a></li><li><a class="link-muted" href="/cs/hry/">Hry</a></li></ul> </nav> <nav aria-label="Informace"> <p class="font-semibold">Informace</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/cs/o-webu/">O webu</a></li> <li><a class="link-muted" href="/cs/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/cs/ochrana-osobnich-udaju/">Zásady ochrany osobních údajů</a></li> <li><a class="link-muted" href="/cs/podminky-pouziti/">Podmínky použití</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>