SVG Optimalizátor
-
Původní velikost
-
Optimalizovaná velikost
-
Ušetřeno
Proč optimalizovat SVG soubory?
SVG soubory exportované z Illustratoru, Figmy a Inkscape obsahují mnoho nepotřebných dat — komentáře, metadata editorů, redundantní atributy a prázdné kontejnery. Po optimalizaci lze zmenšit soubor o 30-70 % a načítání je rychlejší.
8 strategií optimalizace
Aktivujte/deaktivujte každý optimalizační průchod nezávisle pro přesnou kontrolu
Statistiky zmenšení velikosti
Vidíte původní velikost, optimalizovanou velikost a procento úspory po každé optimalizaci
Bezztrátová optimalizace
Všechny optimalizace zachovávají vizuální vzhled SVG — odstraňuje pouze neviditelná metadata
Optimalizace SVG ve 3 krocích
Vložte SVG kód
Zkopírujte SVG zdrojový kód z návrhového nástroje nebo souboru a vložte ho do vstupního pole
Vyberte optimalizace
Zaškrtněte požadovaná nastavení optimalizace — výchozí nastavení poskytuje maximální zmenšení
Zkopírujte a použijte
Zkopírujte optimalizované SVG a nahraďte původní soubor nebo ho vložte přímo do HTML
Případy použití optimalizace SVG
Knihovny ikon
Optimalizujte sady ikon exportované z Figmy nebo Illustratoru před přidáním do knihovny
Loga
Vyčistěte SVG loga pro záhlaví webových stránek, favicon a brand assets
Animované SVG
Snižte základní velikost animovaných SVG, které jsou již velké kvůli animačním datům
PWA a mobilní
Menší SVG snižují mobilní spotřebu dat a zlepšují výkon Lighthouse
Nejlepší postupy pro optimalizaci SVG
✓ Buďte opatrní s odstraňováním ID při CSS animacích
Pokud SVG používá CSS nebo JS animace cílené na ID prvky, deaktivujte 'Odstranit ID', aby se animace nerozbily.
✓ Zachovejte viewBox, odstraňte šířku/výšku
Odstranění atributů šířky/výšky a ponechání pouze viewBox umožní SVG responsivní škálování přes CSS.
✓ Zaokrouhlujte čísla na 2 desetinná místa
Souřadnice cest s více než 5 desetinnými místy jsou vizuálně nerozlišitelné. Zaokrouhlení na 2 zmenší soubor.
✓ Automatizujte SVGO v CI/CD
Ve velkých projektech integrujte SVGO do build pipeline pro automatickou optimalizaci všech SVG.
❓ Nejčastější dotazy
O kolik může optimalizace SVG zmenšit soubor?
Běžně 30-70 % úspora v závislosti na zdroji. Illustrator SVG ukazuje největší úspory; Figma exporty jsou již relativně čisté.
Mění optimalizace vzhled SVG?
Ne — všechny optimalizace v tomto nástroji odstraňují pouze neviditelná data nebo zaokrouhlují čísla s nepostřehnutelnou přesností. Vizuální výsledek je identický s originálem.
Proč se odstraňují atributy šířky a výšky?
Pevně zakódované hodnoty šířky/výšky brání SVG v responsivním škálování přes CSS. Jejich odstraněním a ponecháním pouze viewBox získáte plnou kontrolu velikosti přes CSS vlastnosti.
Jaký je rozdíl mezi tímto nástrojem a SVGO?
SVGO je nástroj příkazové řádky Node.js, který je standardem pro optimalizaci SVG. Tento nástroj nabízí uživatelsky přívětivé rozhraní prohlížeče pro nejběžnější optimalizace bez instalace Node.js.