SVG Optimizer / Cleaner

K čemu je SVG Optimizer / Cleaner

Pokud pracuješ s vektorovou grafikou – ať už jsi webař, frontendový vývojář nebo grafik co dodává podklady na web – dobře víš, že SVG soubory z Illustratoru, Inkscape nebo Figmy bývají plné zbytečného kódu. Editory do nich nacpou metadata, komentáře, prázdné skupiny, nepotřebné atributy a všelijaký balast, který prohlížeč vůbec nepotřebuje.

Výsledek? Soubor, který by mohl mít 4 kB, má klidně 40 kB. A to se pak projeví na rychlosti načítání stránky, zvlášť když máš ikonky nebo ilustrace inline v HTML nebo je načítáš jako samostatné soubory.

SVG Optimizer tohle řeší bez nutnosti instalovat SVGO lokálně, nastavovat Node.js nebo se proklikávat konfiguračními soubory. Vložíš kód, dostaneš čistý výstup – a jdeš dál.

Co dostaneš

• Odstranění komentářů, metadat a editorských atributů (např. `inkscape:`, `sodipodi:`)
• Sloučení a vyčištění zbytečně zanořených skupin `<g>`
• Zaokrouhlení desetinných čísel v path datech na rozumný počet míst
• Odebrání prázdných elementů a nepoužívaných definic
• Zobrazení úspory v procentech a bytech před a po optimalizaci
• Výstup jako čistý SVG kód připravený ke zkopírování nebo stažení

Jak to funguje

1. Otevři SVG soubor v textovém editoru nebo přímo z grafického programu exportuj jako SVG.
2. Zkopíruj celý SVG kód a vlož ho do vstupního pole nástroje.
3. Klikni na Optimalizovat – nástroj zpracuje kód přímo v prohlížeči, nic se neodesílá na server.
4. Zkontroluj náhled výsledku a číslo úspory – běžně to bývá 30–70 % původní velikosti.
5. Zkopíruj vyčištěný kód nebo ho stáhni jako `.svg` soubor.

Časté otázky

Nepoškodí to vizuál mého SVG?

Optimalizace odstraňuje jen metadata a redundantní struktury, grafiku samotnou nemění. Přesto doporučujeme výsledek vždy vizuálně zkontrolovat – zejména u složitějších ilustrací s filtry nebo animacemi.

Funguje to i pro SVG s animacemi nebo `<use>` elementy?

Základní optimalizace ano, ale agresivnější nastavení může v takových případech narušit funkčnost. U animovaných SVG buď opatrný a výsledek otestuj.

Posílá se můj kód někam na server?

Ne. Veškeré zpracování probíhá lokálně v prohlížeči na tvém zařízení. Tvůj kód nikam neodchází.

Čím se to liší od ručního čištění v editoru?

Ruční čištění je zdlouhavé a snadno přehlédneš skryté atributy nebo zanořené prázdné skupiny. Nástroj projde celou strukturu systematicky během vteřiny.

Kdy použít raději WebP Kompresor nebo Favicon Generátor Pro?

WebP Kompresor se hodí pro rastrové obrázky (fotky, screenshoty). Favicon Generátor Pro pak využiješ, když potřebuješ ze SVG vyrobit sadu ikonek pro různá zařízení. Na čištění CSS souborů pak sáhni po CSS Cleaneru.