Optimalizátor SVG

Vložte nebo přetáhněte SVG a zmenšete ho pomocí SVGO. Vše zůstává v prohlížeči.

Jak Optimalizátor SVG funguje

Optimalizátor SVG spouští SVGO (SVG Optimizer) ve Web Workeru uvnitř vašeho prohlížeče pro minifikaci a vyčištění souborů SVG bez jejich nahrávání. SVGO aplikuje konfigurovatelnou sadu zásuvných modulů, které odstraňují komentáře, slučují prázdné znaky, slučují identické cesty, převádějí tvary na jejich nejkompaktnější reprezentaci a odstraňují atributy bez vizuálního efektu. Výsledkem je menší SVG, který se vykresluje identicky jako originál.

Soubory SVG vytvořené nástroji pro návrh, jako jsou Figma, Illustrator nebo Inkscape, často obsahují výraznou režii: metadata specifická pro editor, prázdné skupiny, redundantní atributy transformace a deklarace jmenných prostorů, které žádný prohlížeč nepotřebuje. Výchozí sada zásuvných modulů SVGO spolehlivě odstraňuje tuto režii. Optimalizovaný soubor se nabídne ke stažení a zobrazí se procentuální snížení velikosti, abyste mohli potvrdit, zda optimalizace byla přínosná.

Napsal Bastien Sulyan

Optimalizátor SVG: návod krok za krokem

Přetáhněte soubor SVG do oblasti nahrávání nebo klikněte pro výběr.
Web Worker SVGO ihned spustí optimalizaci s výchozí sadou zásuvných modulů.
Zobrazte procentuální snížení a původní versus optimalizované velikosti souborů.
Klikněte na Stáhnout pro uložení optimalizovaného SVG do vašeho zařízení.
Pokud konkrétní zásuvné moduly způsobují problémy s vykreslováním, upravte konfiguraci zásuvných modulů a proveďte optimalizaci znovu.

Časté případy použití

Front-end vývojář optimalizuje ikony exportované z Figmy před jejich zařazením do produkčního pipeline prostředků, přičemž každou ikonu zmenší z 4 KB na méně než 1 KB.
Webový návrhář vyčistí SVG ilustrace exportované z Illustratoru, které obsahují vrstvy metadat editoru neviditelné v prohlížeči, ale nafukující soubor.
Vývojář sestavující font ikon ze SVG glyfů zajistí, aby každé zdrojové SVG bylo čisté a konzistentně strukturované před krokem sestavení fontu.
Výkonnostní inženýr audituje vložené SVG v HTML a nahrazuje každý nafouklý originál verzí optimalizovanou pomocí SVGO pro zlepšení váhy stránky.

Často kladené otázky

Změní SVGO vzhled mého SVG?

Výchozí zásuvné moduly SVGO jsou navrženy tak, aby byly vizuálně bezztrátové: optimalizované SVG se ve všech standardních prohlížečích vykresluje identicky jako originál. Některé agresivní zásuvné moduly (například ty, které silně zaokrouhlují souřadnice cest) mohou zavést jemné rozdíly ve vykreslování. Pokud si všimnete vizuální změny, porovnejte originální a optimalizované soubory v prohlížeči a deaktivujte konkrétní zásuvný modul způsobující problém.

Je soubor SVG odeslán na server pro optimalizaci?

Ne. SVGO běží ve Web Workeru uvnitř záložky vašeho prohlížeče. Text SVG se čte z vašeho lokálního disku, zpracovává se v paměti JavaScript a výstup se vrátí na stránku ke stažení. Obsah souboru neopustí vaše zařízení.

O kolik menší bude moje SVG?

Snížení závisí na zdroji. SVG exportované z návrhových nástrojů s metadaty editoru se obvykle zmenší o 30 až 70 procent. Ručně psané SVG, která jsou již úsporná, mohou zaznamenat pouze 5 až 15 procent snížení. Nástroj zobrazuje přesné počty bajtů a procento, takže každý soubor můžete hodnotit individuálně.

Ovlivní optimalizace animace SVG nebo JavaScript uvnitř souboru?

Konfigurace zachovává prvky animace a atributy SMIL. Prvky script odstraňuje: nástroj přidává zásuvný modul removeScripts nad rámec výchozí předvolby SVGO, protože SVG, který chcete vložit, by neměl obsahovat spustitelný kód. Některé zásuvné moduly čistící atributy by mohly interagovat s animacemi, pokud animace odkazuje na tyto atributy podle ID; zkontrolujte vykreslený výstup po optimalizaci souborů s komplexními animacemi.

Mohu najednou optimalizovat více souborů SVG?

Aktuální verze zpracovává jeden soubor SVG najednou. Přetáhněte soubor, stáhněte výsledek, poté přetáhněte další soubor. Dávkové zpracování více souborů v jedné relaci v této verzi není dostupné.

Jakou verzi SVGO nástroj používá?

Nástroj obsahuje SVGO běžící ve Web Workeru. Verze v balíčku je uvedena v informacích o nástroji. SVGO je aktivně udržováno a API zásuvných modulů se výrazně změnilo mezi verzemi v1, v2 a v3; aktuální nástroj používá formát zásuvných modulů v3.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje na obrázky