Postupujte podľa tohto funkčného príkladu a potom prispôsobte rovnaké ovládacie prvky svojmu vlastnému obrázku. Otvoriť Kompresor SVG.
Nahrajte statický SVG alebo vložte kód
Otvorte SVG kompresor a vyberte súbor SVG alebo Vyskúšajte vzorku. Vzorka je svg-compressor.svg, 985-bajtová značka obežnej dráhy s viewBox 512 × 512, prechodovou výplňou, názvom a popisom. Použite Vložiť SVG, ak je kód už v editore alebo schránke.
Nástroj akceptuje až 20 súborov s veľkosťou 2 MB každý. Analyzuje kompletný dokument SVG a odstráni štandardné deklarácie dokumentu SVG bez načítania externých súborov. Poškodené XML, vlastné deklarácie entít a interné podmnožiny dokumentov sú odmietnuté. Veľmi zložité súbory môžu tiež dosiahnuť limit prvkov alebo času spracovania.
Tento pracovný postup vytvára statickú vektorovú grafiku. Skripty, obslužné programy udalostí, externé zdroje, animácie a vložené rastrové obrázky sa odstránia. Pôvodný náhľad je už vyčistený, takže by sa nemal interpretovať ako neobmedzené vykreslenie každej funkcie v zdrojovom súbore.
Ponechajte si kópiu pôvodného SVG. Interaktívna ilustrácia alebo SVG obsahujúci fotografiu je iný prípad použitia ako statická vektorová ikona.
Porovnajte výsledok a nastavte desatinnú presnosť
Dva panely náhľadu zobrazujú vyčistený originál a optimalizovaný výsledok. Veľkosti vedľa položiek Originál a Optimalizované a súhrn bajtov porovnávajú zdrojový súbor s hotovým výstupom. Nástroj nahlási nárast, keď optimalizácia urobí konkrétny súbor väčším, namiesto toho, aby zakaždým sľuboval zmenšenie.
Otvorte Nastavenia a nastavte desatinnú presnosť na 2 pre tento príklad. Presnosť sa pohybuje od 1 do 5 a začína na 3. Nižšie hodnoty môžu zjednodušiť číselnú geometriu, ale môžu posunúť jemné krivky, malé medzery alebo zarovnané hrany. Zvýšte ju, ak náhľad stráca dôležité detaily.
Táto vzorka používa priamu geometriu, takže presnosť 2 zachováva jej rozpoznateľný tvar. Iné SVG so zložitými desatinnými súradnicami sa môžu zmeniť viac. Zobrazenie optimalizovaného kódu SVG odhalí skutočný text, ktorý sa stiahne; nie je to samostatná reprezentácia originálu.
Skontrolujte vektor pri zamýšľanej veľkosti zobrazenia a pri väčšom zobrazení. Jemný posun môže byť ťažké vidieť v malej miniatúre.
Príklad v tejto príručke
Vyskúšajte vzorku: svg-compressor.svg, 985 bajtov, 512 × 512 viewBox. Desatinná presnosť 2; ponechané prístupné názvy/popisy a povolené skrátenie interných ID; Citlivé rozmery a Čitateľný výstupný kód vypnuté. Stiahnuté SVG: 635 bajtov.
- Zdroj SVG
- 985 bajtov
- Optimalizované SVG
- 635 bajtov
- Namerané zníženie
- 35.5%
- Zachovaný kontext
- Názov, popis a 512 × 512 viewBox
Zachovajte popisy a zvážte externé ID
Ponechajte možnosť Ponechať prístupné názvy a popisy povolenú pre tento príklad. Tým sa zachová názov a popis SVG pri súčasnom odstránení nadbytočných metadát editora a zjednodušení oprávneného kódu. Ide o rôzne druhy informácií, ktoré by sa nemali zamieňať.
Skrátiť interné ID je predvolene zapnuté. Optimalizátor aktualizuje odkazy v rámci SVG, ale externé CSS alebo JavaScript sa môžu stále spoliehať na pôvodné ID. Túto možnosť vypnite, ak je súbor súčasťou väčšej aplikácie, ktorá pomenúva svoje prvky, a otestujte hotový SVG v tomto kontexte.
Pre tento príklad nechajte vypnuté možnosti Citlivé rozmery a Čitateľný výstupný kód. Citlivé rozmery odstránia pevnú šírku a výšku, keď súradnicový systém viewBox dokáže zabezpečiť škálovateľnú veľkosť. Čitateľný výstup pridáva odsadenie a je užitočný pre údržbu, ale môže zväčšiť veľkosť textu.
Pri samostatnom súbore ikony je vyčistenie interných ID zvyčajne jednoduché. Pri externe skriptovanom diagrame môže byť zachovanie identifikátorov dôležitejšie ako niekoľko ušetrených bajtov.
Stiahnite a overte hotový vektor
Vyberte Štart a potom Stiahnuť. Spracovaný výstup má 635 bajtov v porovnaní s 985-bajtovým zdrojom: zníženie o 35.5 %. Jeho názov a popis zostávajú zachované a zobrazené porovnanie je vykreslené z pôvodného zdroja a stiahnutého SVG.
Článok vykresľuje oba vektory pri 1,024 pixeloch pre ostrú ilustráciu výsledku; ich logická veľkosť súradníc zostáva 512 × 512. Väčší náhľad nepridáva rastrový obsah do uloženého SVG. Pred nahradením existujúceho produkčného prvku skontrolujte skutočný vektor na cieľovej stránke.
Jeden súbor sa stiahne ako SVG s pôvodným základným názvom. Dávka sa stiahne ako jeden ZIP s očíslovanými príponami pre duplicitné názvy súborov. Spracovanie prebieha v prehliadači. Ponechajte si pôvodný zdroj, ak chcete neskôr vyskúšať iné nastavenia optimalizácie.
Úspora veľkosti súboru sa meria iba oproti tejto vzorke. Už optimalizovaný SVG môže vykazovať malé zlepšenie alebo sa môže mierne zväčšiť.
Časté otázky
Bude optimalizovaný SVG vyzerať úplne rovnako?
Optimalizátor sa snaží zachovať statický vzhľad, ale zaokrúhľovanie a odstránenie nepodporovaného obsahu môže súbor zmeniť. Porovnajte náhľady a otestujte uložený SVG vo svojom projekte.
Čo mení desatinná presnosť?
Riadi presnosť použitú pre číselné geometrické údaje a cesty. Nižšie hodnoty môžu zmenšiť veľkosť, ale môžu posunúť jemné detaily. Predvolená hodnota je 3.
Zachováva názov a popis?
Áno, štandardne. Ponechajte zapnutú možnosť Zachovať prístupné názvy a popisy, aby sa tieto SVG prvky zachovali.
Prečo chýbajú skripty alebo rastrové obrázky?
Tento nástroj vytvára statický vektorový výstup. Skripty, udalosti, externé zdroje, animácie a vložené rastrové obrázky sú počas sanitácie zámerne odstránené.
Môžem ponechať ID, na ktoré odkazuje CSS?
Vypnite Skrátiť interné ID, ak externý kód závisí od konkrétnych ID. Pred nahradením pôvodného súboru overte optimalizovaný súbor na cieľovej stránke.
Sú súbory SVG nahrané na optimalizáciu?
Nie. Nástroj vykonáva analýzu a optimalizáciu v prehliadači a výsledok stiahne lokálne.
Môžem nahrať SVG s DOCTYPE?
Štandardná deklarácia dokumentu SVG je akceptovaná a odstránená bez načítania jej externého identifikátora. Vlastné deklarácie entít a interné podmnožiny dokumentu sú zamietnuté.
Urobte vektor ľahším, s výsledkom, ktorý si môžete skontrolovať.
Vyskúšajte ukážku alebo použite vlastný súbor a pred zdieľaním skontrolujte výsledok.
