Як паменшыць вагу svg файлаў для вэб-сайта

1. А ці трэба наогул змяншаць памер svg файла?
2. Падрыхтоўваем svg пры захаванні ў Adobe Illustrator
3. Рэжам памер svg яшчэ больш
4. У заключэнне

Ужо многія пачалі актыўна карыстацца svg графікай у вёрстцы сайтаў. Магчыма ўжо нават шмат хто ведае пра той спосаб памяншэння вагі svg файлаў, пра які я раскажу сёння. Але я не прэтэндую на арыгінальнасць, толькі хачу падзяліцца інфармацыяй.

Калі вы чытаеце дадзеную публікацыю, то вы ўжо ведаеце як можна ўбудаваць svg файл у вёрстцы. Мімаходзь я згадвала гэта ў артыкуле аб генерацыі svg-спрайт ў Illustrator . Таксама ў інтэрнэце ёсць пераклад нядрэнны артыкула пра гэта (але інфармацыі ў адным крыніцы поўнай не шукайце, усё лепш пазнаецца шляхам спроб і памылак).

А ці трэба наогул змяншаць памер svg файла?

Ня важна, як і для якіх мэт вы карыстаецеся svg ў вёрстцы, калі вы не ўбудоўваеце код прама ў html, то вам дакладна трэба паменшыць памер файлаў svg. Нягледзячы на ​​развіццё інтэрнэт-хуткасцяў, кожная килобайтинка да гэтага часу на рахунку (праўда ўжо па іншых прычынах).

Такім чынам, хутчэй за ўсё, калі вы працуеце з svg графікай, то вы карыстаецеся для гэтага якім-небудзь графічным рэдактарам. Калі вы захоўваеце файл у svg ў рэдактары, то ў яго запісваецца шмат непатрэбнай нам інфармацыі: розныя мета-дадзеныя, каментары, схаваныя элементы, нейкія налады і т. Д. Менавіта ад гэтага і трэба пазбавіцца пры падрыхтоўцы svg для web'а .

Падрыхтоўваем svg пры захаванні ў Adobe Illustrator

Я экспартую svg з макета ў Adobe Illustrator. Ёсць пару налад, якія дазваляюць паменшыць памер файла ўжо пры звычайным захаванні. Прычым гэтыя налады дапамогуць і пры памяншэнні памеру генераванага кода, калі вы ўбудоўваеце svg код прама ў HTML!

Для сцісласці я проста зрабіла скрыншот з наладамі:

Выбіраем аптымальныя наладкі для ўбудавання SVG ў вёрстку

Тут самыя важныя для нас опцыі - гэта:

• Subsetting
  Выбар залежыць ад колькасці тэкставых символов.Если сімвалаў мала - то выгадней будзе выбраць наладу «Only Glyphs Used». Гэта дазволіць ўбудаваць шрыфт з выкарыстоўванымі літарамі ў файл. Але калі літар шмат, то несумненна лепш выбраць «None (Use System Fonts)», папярэдне перавёўшы шрыфт у крывыя.
• Image Location
  Як правіла, выбіраем «Link». Гэта дазволіць значна паменшыць памер файла. Аднак з гэтай опцыяй трэба быць акуратней: калі ў файле выкарыстоўваюцца якія-небудзь эфекты тыпу градыенту, то можа быць зусім не той вынік, што чакаецца і прыйдзецца «ўбудоўваць» усё эфекты ў файл, выкарыстоўваючы опцыю «Embed».
  Звярніце ўвагу, што трэба зняць галачку з «Preserve Illustrator Editing Capabilities» - гэта не на жарт павялічвае памер файла.
• Decimal places
  Дакладнасць захоўваецца вектара. Чым больш значэнне, тым больш усялякіх крывых і кропак, а таксама памер файла. Як правіла вялікая дакладнасць не патрэбна, так як яна ўсё роўна не будзе адрозная вокам. Я выбіраю лік ад 1 да 3 у залежнасці ад сітуацыі.

Больш падрабязна аб Экспартаваць Svg з Illustrator можна прачытаць у афіцыйнай дакументацыі (Там можна запазычыць нешта новае, вельмі карысная артыкул).

Рэжам памер svg яшчэ больш

Але гэтых налад не дастаткова, калі вы не ўбудоўваеце svg код у HTML, а «цягнеце» у вёрстцы цэлы файл (не важна якім спосабам). Можна яшчэ больш паменшыць svg графіку для вёрсткі!

Ёсць такая бібліятэчка svgo . Яна-то і дазваляе паменшыць памер svg файла шляхам выдалення розных мета-дадзеных, каментароў і т. П.

Апроч працы з каманднага радка і ў выглядзе розных модуляў для js зборшчыкаў праектаў гэтая праграма мае графічную (GUI) версію для Windows і Mac. Яе можна спампаваць тут .

Я выкарыстоўваю GUI версію гэтай праграмы. Яна неверагодна простая, легкаважным і наколькі я памятаю, не патрабуе ўсталёўкі.

Інтэрфейс неверагодна просты і лаканічны: проста перацягваць патрэбны файл у акно праграмы і ён сам памяншаецца і пересохраняется.

Гэтая праграма дазволіць паменшыць у сярэднім на 40% нашу svg графіку для сайта.

Нават пры адносна невялікіх памерах файлаў, у выніку можа атрымацца значнае памяншэнне.

А часам гэтая праграма проста выбаўляе ... Напрыклад, калі трэба захаваць у svg складаны лагатып, які ну ніяк ужо наладамі больш не паменшыць, а важыць ён шмат.

У заключэнне

Трэба сказаць, гэта далёка не адзіны спосаб аптымізаваць svg файлы. Але мне спадабалася гэтая праграма: яна досыць эфектыўная і ў той жа час нічога лішняга не выдаляе. Маленькая, ды удаленькая)

UPD. Калі вы front-end распрацоўшчык, то верагодна вы ўжо даўно карыстаецеся якой-небудзь framework. Для таго, каб паменшыць svg файл цяпер пакуль што, я выкарыстоўваю убудова imagemin-svgo .