Як зменшити вагу 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 .