Кампрэсія SVG кода

  1. Аптымізацыя SVG-кода
  2. архіваванне SVG
  3. Аўтаматызацыя аптымізацыі

Аўтар: Яўген Рыжкоў Дата публікацыі: 08.09.2010

Адно з добрых якасцяў SVG-файлаў - гэта выдатныя магчымасці кампрэсіі Адно з добрых якасцяў SVG-файлаў - гэта выдатныя магчымасці кампрэсіі. Для большай эфектыўнасці яе варта праводзіць у два этапы: аптымізацыя кода і архіваванне.

Аптымізацыя SVG-кода

Мэта дадзенага этапу - па максімуму скараціць код: чым менш кода, тым файл лягчэй. Дамагчыся гэтага можна прытрымліваючыся рэкамендацый:

  • скарачаем колькасць асобных вузлоў па максімуме:
    • выкарыстоўваем крывыя Без'е, эліпсы, дугі і г.д. для стварэння плыўных крывых ліній, замест мноства кароткіх адрэзкаў прамых ліній (polyline);
    • тэкст робім тэкстам замест таго каб яго маляваць складанымі лініямі;
  • ўжываем адносныя каардынаты замест абсалютных (пры гэтым чытанне кода чалавекам ўскладняецца);
  • выкарыстоўваем магчымасці SVG (градыенты, фільтры) для стварэння розных эфектаў - мінімум графічных дадзеных для атрымання выніку;
  • SVG дазваляе шматкроць выкарыстоўваць адзін і той жа элемент у ілюстрацыі;
  • SVG падтрымлівае CSS спадчыну і групоўку. Выкарыстоўвай гэта;
  • скарачалі дакладнасць дадзеных: для нармальнага адлюстравання дастаткова 2-3 знакаў пасля коскі;
  • скарачэнне кветак (напрыклад, #FFFFFF = #FFF);
  • памяншаем дэталізацыю ўсюды, дзе гэта магчыма без бачных страт якасці малюнка;
  • выдаляем (ці спрашчаем) нябачныя элементы (напрыклад, тыя, якія штосьці перакрывае);
  • выкарыстоўваем магчымасці тэга path для больш кампактнай запісу: адносныя каардынаты, h і v для вертыкальных і гарызантальных ліній, s і t для задання квадратычным і кубічных крывых Без'е.

архіваванне SVG

SVG файл - гэта звычайны тэкставы файл, які выдатна паддаецца архівавання. Адным з лепшых спосабаў для гэтага цяпер з'яўляецца gzip-сціск. Сціснутыя файлы могуць важыць у 2-5 разоў менш, чым несціснутыя.

W3C: прыклады кампрэсіі SVG-файлаў несціснутых SVG файл З gzip сціскам Ступень сціску 12,912 2,463 81% 12,164 2,553 79% 11,613 2,617 77% 18,689 4,077 78% 13,024 2,041 84%

Сціснутае SVG-файл атрымлівае пашырэнне SVGZ.

Аўтаматызацыя аптымізацыі

Нават пры даволі простых малюнках, ручная аптымізацыя можа запатрабаваць гадзіны. З гэтым быў не згодны Яўген Сцяпанішчаў (bolk) , Які ўзяў за аснову ідэі Jos Hirth і зрабіў php-скрыпт, для аптымізацыі SVG-файлаў з такім пералікам магчымасцяў аптымізацыі:

  • выдаленне прабельных знакаў, знакаў перакладу радкоў і каментароў, замена пустых парных якія адкрываюць і зачыняюць тэгаў на іх кароткі эквівалент;
  • выдаленне атрыбутаў, тэгаў і прастор імёнаў рэдактара Inkscape (якія не выкарыстоўваюцца браўзэрам);
  • зніжэнне дакладнасці значэнняў атрыбуту d тэга path. Гэтак жа выдаляюцца прабелы, дзе гэта дапушчальна;
  • выдаляюцца тэгі path з пустым атрыбутам d;
  • аптымізацыя атрыбуту стыляў ( "style"), выдаляюцца лішнія прабелы, выдаляюцца ўласцівасці, значэння якіх роўныя іх значэнняў па змаўчанні, выдаляюцца ўласцівасці, якія адносяцца да "fill" і "stroke", калі зададзены стылі, якія адмяняюць дзеянне гэтых уласцівасцяў. Значэння колеру, калі гэта магчыма, прыводзяцца да больш кампактнай форме;
  • скарачэнне лікаў у атрыбутах - уразаюцца незначащие нулі справа, у чыста лікавых атрыбутах выдаляецца нуль злева, да кропкі ( "0.05000" становіцца ".05");
  • выдаленне невыкарыстоўваемых атрыбутаў id. Калі ў ілюстрацыі ёсць тэгі <script> або <style>, то гэты крок прапускаецца.

Праграма працуе з каманднага радка. Сінтаксіс запуску і даступныя ключы апісаны ў канцы кода самага скрыпту.

Нам падалося нязручным выкарыстанне каманднага радка, таму зрабілі браузерных версію SVG-аптымізатар .

Акрамя вышэйпералічаных магчымасцяў дадалі магчымасць gzip сціску.

матэрыялы