Postupujte podle tohoto funkčního příkladu a poté stejné ovládací prvky přizpůsobte svému vlastnímu obrázku. Otevřít Kompresor SVG.
Nahrajte statický SVG nebo vložte kód
Otevřete kompresor SVG a vyberte soubor SVG nebo vyzkoušejte ukázku. Ukázka je svg-compressor.svg, značka oběžné dráhy o velikosti 985 bajtů s viewBox 512 × 512, přechodovou výplní, názvem a popisem. Použijte Vložit SVG, pokud je kód již v editoru nebo schránce.
Nástroj přijímá až 20 souborů o velikosti 2 MB každý. Analyzuje kompletní dokument SVG a odstraňuje standardní deklarace dokumentu SVG bez načítání externích souborů. Poškozené XML, vlastní deklarace entit a vnitřní podmnožiny dokumentů jsou odmítnuty. Velmi složité soubory mohou také dosáhnout limitu prvků nebo doby zpracování.
Tento pracovní postup vytváří statickou vektorovou grafiku. Skripty, obslužné rutiny událostí, externí zdroje, animace a vložené rastrové obrázky jsou odstraněny. Náhled Originál je již vyčištěn, takže by neměl být interpretován jako neomezené vykreslení všech funkcí ve zdrojovém souboru.
Ponechte si kopii původního SVG. Interaktivní ilustrace nebo SVG obsahující fotografii představují jiný případ použití než statická vektorová ikona.
Porovnejte výsledek a nastavte desetinnou přesnost
Dva panely náhledu zobrazují vyčištěný originál a optimalizovaný výsledek. Velikosti vedle Originálu a Optimalizovaného souboru a souhrn bajtů porovnávají zdrojový soubor s hotovým výstupem. Nástroj nahlásí nárůst, pokud optimalizace učiní konkrétní soubor větším, místo aby pokaždé sliboval zmenšení.
Otevřete Nastavení a nastavte Desetinnou přesnost na 2 pro tento příklad. Přesnost se pohybuje od 1 do 5 a začíná na 3. Nižší hodnoty mohou zjednodušit číselnou geometrii, ale mohou posunout jemné křivky, malé mezery nebo zarovnané hrany. Zvyšte ji, pokud náhled ztrácí důležité detaily.
Tato ukázka používá jednoduchou geometrii, takže přesnost 2 zachovává její rozpoznatelný tvar. Jiné soubory SVG se složitými desetinnými souřadnicemi se mohou změnit více. Zobrazení optimalizovaného kódu SVG odhalí skutečný text, který bude stažen; nejde o samostatnou reprezentaci originálu.
Zkontrolujte vektor při zamýšlené velikosti zobrazení i při větším zvětšení. Jemný posun může být v malém náhledu těžko viditelný.
Příklad v tomto průvodci
Vyzkoušejte ukázku: svg-compressor.svg, 985 bajtů, 512 × 512 viewBox. Desetinná přesnost 2; zachovány přístupné názvy/popisy a zkrácená interní ID povolena; responzivní rozměry a čitelný výstupní kód zakázány. Stažený SVG: 635 bajtů.
- Zdroj SVG
- 985 bajtů
- Optimalizovaný SVG
- 635 bajtů
- Naměřená redukce
- 35.5%
- Zachovaný kontext
- Název, popis a 512 × 512 viewBox
Zachovejte popisy a zvažte externí ID
Ponechte možnost Ponechat přístupné názvy a popisy pro tento příklad zapnutou. To zachová název a popis SVG a zároveň odstraní nadbytečná metadata editoru a zjednoduší vhodný kód. Jedná se o různé druhy informací a neměly by být považovány za zaměnitelné.
Zkrátit interní ID je ve výchozím nastavení zapnuto. Optimalizátor aktualizuje odkazy v rámci SVG, ale externí CSS nebo JavaScript mohou stále spoléhat na původní ID. Tuto možnost vypněte, pokud je soubor součástí větší aplikace, která pojmenovává své prvky, a otestujte hotový SVG v tomto kontextu.
Ponechte možnost Responzivní rozměry a Čitelný výstupní kód pro tento příklad vypnutou. Responzivní rozměry odstraňují pevnou šířku a výšku, když souřadnicový viewBox může poskytnout škálovatelné určení velikosti. Čitelný výstup přidává odsazení a je užitečný pro údržbu, ale může zvětšit velikost textu.
U samostatného souboru ikony je vyčištění interního ID obvykle přímočaré. U externě skriptovaného diagramu může být zachování identifikátorů důležitější než několik ušetřených bajtů.
Stáhněte a ověřte hotový vektor
Vyberte Start a poté Stáhnout. Zpracovaný výstup má 635 bajtů ve srovnání se zdrojem o velikosti 985 bajtů: zmenšení o 35.5 %. Jeho název a popis zůstávají zachovány a zobrazené porovnání je vykresleno ze skutečného zdroje a staženého SVG.
Článek vykresluje oba vektory na 1,024 pixelů pro ostré znázornění výsledku; jejich logická velikost souřadnic zůstává 512 × 512. Větší náhled nepřidává rastrový obsah do uloženého SVG. Před nahrazením stávajícího produkčního prostředku zkontrolujte skutečný vektor na cílové stránce.
Jeden soubor se stáhne jako SVG s původním názvem. Dávka se stáhne jako jeden ZIP s očíslovanými příponami pro duplicitní názvy souborů. Zpracování probíhá v prohlížeči. Ponechte si původní zdroj, pokud chcete později vyzkoušet jiná nastavení optimalizace.
Úspora velikosti souboru je měřena pouze oproti této ukázce. Již optimalizovaný SVG může vykazovat malé zlepšení nebo se může mírně zvětšit.
Časté dotazy
Bude optimalizovaný SVG vypadat úplně stejně?
Optimalizátor se snaží zachovat statický vzhled, ale zaokrouhlování a odstranění nepodporovaného obsahu může soubor změnit. Porovnejte náhledy a otestujte uložený SVG ve svém projektu.
Co mění desetinná přesnost?
Řídí přesnost použitou pro číselnou geometrii a data cest. Nižší hodnoty mohou zmenšit velikost, ale mohou posunout jemné detaily. Výchozí hodnota je 3.
Zachová to název a popis?
Ano, ve výchozím nastavení. Ponechte zapnutou volbu Zachovat přístupné názvy a popisy pro zachování těchto SVG prvků.
Proč chybí skripty nebo rastrové obrázky?
Tento nástroj vytváří statický vektorový výstup. Skripty, události, externí zdroje, animace a vložené rastrové obrázky jsou během sanitace záměrně odstraněny.
Mohu zachovat ID odkazovaná pomocí CSS?
Vypněte Zkrátit interní ID, pokud externí kód závisí na konkrétních ID. Před nahrazením původního souboru ověřte optimalizovaný soubor na cílové stránce.
Jsou soubory SVG nahrávány pro optimalizaci?
Ne. Nástroj provádí analýzu a optimalizaci v prohlížeči a výsledek stahuje lokálně.
Mohu nahrát SVG s DOCTYPE?
Standardní deklarace dokumentu SVG je přijata a odstraněna bez načtení jejího externího identifikátoru. Vlastní deklarace entit a interní podmnožiny dokumentu jsou odmítnuty.
Udělejte vektor lehčím, s výsledkem, který si můžete prohlédnout.
Vyzkoušejte ukázku nebo použijte vlastní soubor a před sdílením zkontrolujte výsledek.
