Як реалізувати крос-браузерні SVG іконки. Як реалізувати крос-браузерні SVG іконки Базова інтеграція SVG-елементів

Іконки, які ви знайдете на цих ресурсах, можна також використовувати, щоб проілюструвати інформацію в слайд-шоу, прикрасити візитні картки, меню, флаєри та інше.

Ми написали, що іконки на цих сайтах безкоштовні, але все ж звертайте увагу на умови скачування, так як вони можуть змінитися в будь-який момент.

01. Smashing Magazine

22. PixelsMarket

26. Blugraphic

Blugraphic - варіанти PSD, PNG і векторних іконок. Пошук обмежений тегами, але можна підписатися на розсилку і щотижня отримувати безкоштовну добірку по електронній пошті.

27. Icon Shock

Icon Shock - це тисячі безкоштовних іконок для особистого використання. Щоб застосувати картинку в комерційному проекті, потрібно внести разовий платіж.

28. CSS Author

CSS Author пропонує щотижневі добірки кращих безкоштовних іконок в мережі.

29. Creative Tail

Хочете свіжих іконок? На Creative Tail є набори, яких більше ніде не знайти.

30. All-Free-Download

All-Free-Download пропонує легкий пошук і прямі завантаження PSD, PNG і векторів.

31. Ego Icons

Ego Icons пропонує більше 1500 преміальних іконок і 100 безкоштовних векторних значків. Відвідайте також дочірні сайти, клікнувши по кнопках верхньої навігаційної панелі.

32. AlienValley

На AlienValley представлений широкий асортимент іконок високої якості в обмін на вашу адресу електронної пошти.

33. Dreamstale

Dreamstale забезпечить вас відмінними безкоштовними іконками преміум класу за умови вказівки авторства.

34. DuckFiles

35. 1001 Free Downloads

1 001 Free Downloads спеціалізується на плоских іконках, представлених безліччю прекрасних і химерних варіантів.

36. GraphicsBay

37. Pixeden

На Pixeden можна шукати іконки в декількох розмірах. Тут широкий вибір від 16х16 до 512х512 в форматі PNG.

38. NounProject

NounProject - це зручний пошук, легка завантаження і високу якість іконок. Посилання на автора обов'язкове. Членство з щомісячним внеском знімає обмеження на скачування.

39. Iconmonstr

Iconmonstr пропонує іконки в декількох розмірах без вказівки авторства.

40. Fusionplate

Іконки PSD - незамінний елемент будь-якого дизайну UI, який не поступається за важливістю навіть шрифтів, однак на практиці рідко хто займається розробкою власних іконок для кожного веб-проекту. З іншого боку, на пошук відповідних за якістю і оформлення іконок також йде чимало часу, але сьогодні ми вирішили допомогти вам, і підготували добірку безкоштовних наборів іконок на всі випадки життя.

01. Icons8

Icons8 - набір з 20 тисяч плоских іконок в будь-яких форматах, розмірах і кольорі! Тут представлені такі категорії, як бізнес, одяг, їжа і багато інших. Icons8 можна скачати у вигляді додатку для Mac або у вигляді ZIP-архіву.

02. Freepik

Яскрава колекція векторних іконок від спеціалізованого ресурсу Freepik - лише одна з безлічі представлених. Вона ідеально підійде для ділових і незалежних проектів. Додатково скачати PSD іконки можна в форматах .AI, .EPS і .SVG.

03. Iconfinder

Цей набір, виконаний в чорно-білому кольорі, містить комбінацію чітких функціональних і емоційних векторних іконок. Крім стандартних іконок цей набір містить іконки у вигляді сердець і очей, що дозволить вам надати власним проектам емоційне забарвлення.

04. 195 flat flag PSD icons

Відмінний набір іконок PSD для сайту, який можна використовувати при розробці міжнародного сайту, інтернет-магазину або блогу про подорожі. У набір входить 195 безкоштовних іконок із закругленими кутами.

05. Metro UI Icon Set

Якщо ви фанат Windows 8, то вам варто познайомитися з цим безкоштовним набором іконок. Він включає в себе 700 добре оформлених іконок, які можна вільно застосовувати в проектах будь-якого типу.

06. Modern UI Icons

Ще один набір безкоштовних іконок, який можна використовувати при створенні користувальницького інтерфейсу програмного забезпечення для Windows або для Android / iOS. Завантаживши даний набір, ви отримуєте 1000 плоских, створених вручну, іконок, в тому числі навіть іконки для шторки додатків в Windows Phone.

07. 350 pixel perfect icons

Неймовірний набір з 350 ідеально чітких іконок для додатків або сайтів. При цьому їх можна змінювати в розмірі без втрати якості.

08. 80 mini icons

80 ідеально чітких мініатюрних ікон, які можна скачати як в PSD-форматі, так і у вигляді іконічного шрифту. Ці охайні і витончені соціальні іконки PSD ідеально підійдуть для проектів будь-якого типу.

09. Simple and practical web icon vector graphic

Безліч корисних іконок, які можна використовувати в особистих і комерційних проектах.

10. Free flat icons

Набір іконок, виконаних в плоскому стилі, серед яких можна виділити календар, електронну пошту, годинник, карти і багато іншого.

11. Mono icons

Набір, який включає в себе 108 унікальних монохромних іконок, виконаних в стилі мінімалізму. Всі вони доступні в форматі PNG при розмірі 32 на 32.

12. Metrize icons

Безкоштовна колекція в стилі Metro, які можна використовувати у власних додатках і веб-проектах. Іконки соціальних мереж PSD безкоштовні як для особистого, так і для комерційного використання. В архіві представлені не тільки формати PSD, SVG, ESP і AI, але також і веб-шрифти.

13. Tab Bar Icons iOS 7

Елегантний набір іконок, розроблених під натхненням від iOS 7, який ви можете використовувати в своїх додатках. Завантажити іконки можна в наступних форматах: PSD, AI і ESP.

14. Chunky Pika Icon Set

Іконки в стилі Pika, створені агентством Dutch Icon з Данії. Цей набір включає в себе 42 ідеально чітких іконки.

15. Iconic

Ще один набір простих, але привабливих іконок, які ідеально підійдуть для мінімалістичні дизайнів. Iconic є open source набір, який можна завантажити в PNG, SVG, SWC і інших форматах, що дозволить адаптувати їх під власні дизайни.

16. 44 Shades of Free Icons

Набір з 44 іконок. Він містить PSD іконки для форуму, що дозволить без праці відредагувати і адаптувати їх під власні проекти.

17. Token icon set

Token включає в себе 128 унікальних ікон, доступних в форматі ICO в розмірах 16 на 16 пікселів, 32 на 32 пікселів і 256 на 256 пікселів, а також в форматі PNG в розмірі 128 на 128 пікселів. Кожна ікона представлена \u200b\u200bв темному і світлому варіантах, і доповнена PSD-файлом.

18. Flat icons (PSD)

Строкаті іконки в плоскому стилі, які можна скачати в форматі PSD і відредагувати під власні потреби.

19. Free 32px icons set

Набір, в якому ви знайдете іконку PSD будь-якого призначення: Skype, Facebook, Twitter, RSS, чашка кави, "лайк" і багато іншого.

20. 48 flat designer icons

Якщо ви фанат мінімалізму, то цей набір точно вам сподобається. Він складається з 48 безкоштовних іконок, що відображають офісні завдання, соціальні аспекти, а також подорожі. Всі вони представлені в форматах AI і PNG, і їх можна масштабувати без втрати якості.

21. Plex icons set

Набір включає в себе понад 100 ікон, серед яких календарі, антивірус, годинник, електронна пошта, додатки Microsoft Office, соціальні мережі, а також багато іншого.

22. Vectory mini free

Набір з більш ніж 1000 іконок PSD, розроблених командою Icojam. Всі вони представлені також в форматі PNG. Вони ідеально підійдуть для використання при розробці нового сайту, так як їх можна безкоштовно використовувати як в особистих, так і комерційних проектах.

23. Eldorado mini free

Чергова колекція міні-іконок від Icojam, в якій представлено понад 1200 ікон в розмірі 40 на 40 пікселів.

Адаптивний дизайн - популярна тема. Екрани давно вийшли за межі стандартних дозволів, і сайти можуть дивитися і на аксесуарах розміром з долоню, і на великих моніторах. Сайт повинен однаково добре виглядати незалежно від розміру пристрою і щільності пікселів. Для адаптації дизайну і контенту існує багато різних методик і технологій. Векторна графіка, SVG, по-моєму, одна з найбільш цікавих тем в цьому напрямку.

SVG-графіку зручно використовувати для іконок, при цьому вони не будуть виглядати мильними на пристроях з ретиной і їх можна розтягувати без втрати якості.

Ось, наприклад, один SVG-спрайт в 4-х різних розмірах, вихідний - 32px:

SVG відмінно справляється з цим завданням і добре підійде для використання в адаптивних розкладках.

Іконки для дизайну можна взяти з готових наборів або намалювати свої.

Набори готових іконок

iconmelon.com

Велика колекція ікон на різні теми. Завантажені іконки пропонується вставляти в HTML за допомогою use.

icomoon.io

Найзручніший інструмент. Можна не тільки вибрати і завантажити готові іконки, але також можна завантажити свої і отримати їх у вигляді шрифту і / або спрайту. Разом зі спрайтом пропонується завантажити його PNG-версію.

flaticon.com

Велика колекція, іконки зручно поділені на категорії. Вибрані іконки можна скачати в окремих форматах (шрифт, SVG, PNG) або у всіх відразу.

малюємо самі

Для створення свого набору іконок потрібно векторний редактор:

• Adobe Illustrator - по-моєму, кращий. 599 руб. / Місяць в складі підписки на Creative Cloud;
• Inkscape - безкоштовний і не дуже зручний;
• Sketch - для Mac OS, $ 79.99. Має деякі проблеми з векторизацией обводок, але взагалі досить зручний.

Зниження ваги

Готовий SVG-файл зазвичай містить багато зайвого, але при цьому добре піддається оптимізації. З коду видаляються непотрібні атрибути, прогалини і переноси, а в числах зменшується кількість знаків після точки. Вага файлу зменшується на 30-50%. Інструменти для оптимізації:

grunt-svgmin - завдання для Grunt з використанням svgo. При цьому файли самі будуть братися з папки з вихідними кодами, оптимізуватися і складатися в папку з результатами. Дуже зручно.

Спрайт або іконочние шрифт?

Шрифт - зручна альтернатива спрайту. Не треба морочитися сіткою і розташуванням іконок, зручно додавати нові символи, хоча для цього потрібні додаткові інструменти.

За допомогою шрифту можна робити не тільки однотонні іконки, але і різнокольорові.

Свій шрифт можна зробити, наприклад, на сайті icomoon.io/app/. Приблизна послідовність дій:

1. Виберіть іконки з набору і / або завантажте свої.
2. Натисніть внизу кнопку Font.
3. На цьому кроці можна перепризначити символи для іконок або відразу завантажити вийшов шрифт.

Разом зі шрифтом в чотирьох форматах (.woff, .svg, .ttf, .eot) завантажується CSS і демо-файл.

Вбудовувані шрифти працюють навіть в 8-м IE, але при цьому мають несподівані проблеми з підтримкою в деяких сучасних браузерах. Opera Mini взагалі не підтримує кастомниє шрифти, Firefox'у потрібні заклинання для сервера, де лежить шрифт (вирішується за допомогою base64), Chrome може вивантажити шрифт, якщо ви надовго залишили вкладку відкритою:

також в Chrome на Windows7 сторінка з вбудованими шрифтами може зависати при відкритті, а в деяких інших браузерах замість іконок може виявитися все що завгодно:

Картинка з статті Кріса Коеру Icon System with SVG Sprites. Я на цьому ж місці якось бачила ієрогліфи, але зараз там SVG, так що скрін зробити не вийде. CSS-tricks, до речі, дуже активно використовує SVG в своєму новому дизайні, а розробники Codepen в новому дизайні редактора відмовилися від використання іконочние шрифтів на користь SVG.

Незважаючи на зручність використання, проблеми підтримки шрифтів в даний момент змушують зробити вибір на користь іконок на SVG.

Хочеться сподіватися, щоб в майбутньому вбудовуються шрифти будуть краще підтримуватися.

Як існують способи вставки SVG на сторінку?

спрайт

плюси:

• короткий читабельний код;
• картинка кешируєтся;

мінуси:

• запит до сервера;
• в старих опери фоновий SVG підтримується дивно: можуть виникати проблеми при додаванні рамки елементу з SVG-фоном, а в Opera Mini працюють тільки фони без viewBox;
• іконки в спрайт недоступні для стилів сторінки;
• великі спрайт можуть викликати проблеми з продуктивністю.

Base64 в data URI

плюси:

• немає запиту до сервера.
• хороша підтримка браузерами: все, крім Опери на Presto і старих IE.

мінуси:

• картинка не кешируєтся і кожен раз рендерится заново;
• довга рядок в CSS;
• нЕ читабельно: за кодом незрозуміло що він містить;
• закодована картинка може важити більше вихідної;
• для закодування / розкодування потрібні додаткові інструменти;
• іконки недоступні для стилів сторінки.

SVG в data URI

• немає запиту до сервера;
• щодо читабельний код (можна прочитати або відредагувати);
• не вимагає розкодування;
• підтримується всіма сучасними браузерами, якщо закодувати SVG.

мінуси:

• нЕ кешируєтся;
• довга рядок в CSS;
• іконки недоступні для стилів сторінки;
• підтримується тільки браузерами на Webkit.

Use (перевикористання SVG-елементів)

плюси:

• читабельний код;
• картинкам можна додати title і desc;
• символи доступні для стилів сторінки. Також можна задати іконка fill \u003d "currentColor", і вони будуть фарбуватися разом з текстом.

мінуси:

• вставляється безпосередньо в HTML. Перед використанням елементи повинні бути оголошені у верхній частині сторінки в інлайновом SVG. Можливо, є більш витончений спосіб підключення бібліотеки елементів, мені не вдалося знайти.

шрифт

плюси:

• зручний код;
• єдиний із способів підтримується в IE8 без фолбеков;
• іконки доступні для стилів сторінки, і будуть фарбуватися разом з текстом.

мінуси:

• якщо шрифт не завантажився (ще не завантажився, взагалі не завантажився або вже вивантажився), замість іконок будуть букви або символи юникода або нічого.

Живий приклад з підтримкою браузерами:

Приклад представлений як є, без спроб забезпечити сумісність з різними браузерами. Ви можете відкрити демо в сюжеті браузері і подивитися як в ньому підтримуються різні способи.

Відображення іконок в браузерах без підтримки SVG

В даний момент самий зручний і надійний спосіб вставки - у вигляді спрайту.

Для заміни картинок в IE8 і старше можна використовувати спосіб з множинними фонами:

Icon (background-image: url (your.png); / * PNG для IE6-8 * / background-image: url (your.svg), none;)

Для старих Опер можна використовувати такий селектор:

Doesnotexist: -o-prefocus, .icon (background-image: url (your.png);)

Таким чином можна домогтися, щоб іконки у користувачів з різними браузерами виглядали приблизно однаково.

З існуючих способів вставки іконок мені найбільше подобається шрифт. Він був би ідеальним, якби не проблеми з підтримкою. Use мені не подобається змішуванням розмітки і оформлення, хоча радує доступність для CSS і можливість додати title і desc. Є ще один дуже хороший, але погано підтримуваний спосіб, але це тема для окремого посту.

UPD: Дуже дякую

У цьому пості я продемонструю як реалізувати SVG іконки, спосіб реалізації фоллбека, а також як перетворити іконки в SVG-спрайт.

Базова інтеграція SVG-елементів

Спеціально для цього уроку я буду використовувати одну сторінку, яка буде працювати на кшталт онлайн-візитки. Я коротко на ній представлю свої послуги і покажу три профілю з професійних мереж, що належать до моєї роботи. Ми будемо використовувати SVG іконки.

За скриншоту вище ви можете бачити, що я використовую іконки (Twitter, Dribbble і GitHub), щоб символічно посилатися на свої робочі профілі. Я скачав ці іконки з flaticon, де було безліч різних іконок і символів в векторному і растровому форматах.

PNG і SVG

Ми почнемо з використання PNG-версій цих іконок, заради сумісності з попередніми версіями, а потім підготуємо SVG іконки для роботи в підтримуючих браузерах.

Я використовував Sketch для отримання PNG-іконок, і я знову їм скористаюся, щоб підготувати SVG іконки.

Якщо ви подивіться на скріншот вище, ви помітите, що я назвав все групи і фігури в лівій панелі відповідним чином (в Adobe Illustrator є такий же список в панелі Layers). Дуже важливо називати все вихідні правильно, це не тільки допоможе добре організувати проект, але і допоможе в наступних етапах цього уроку.

Експорт SVG-версій

Тепер я експортує іконки в SVG іконки, це дуже просто зробити за допомогою інструменту нарізки в Sketch (Slicing). Для більш детального опису роботи цієї опції вивчіть Розуміння опцій експорту в Sketch. Я буду експортувати їх як окремі файли і розміщу їх в папку з зображеннями в своєму проекті.

У нормі, щоб показати картинку на сайті ви посилаєтеся на исходник за допомогою елемента з атрибутом src або чимось схожим:

Але з SVG-файлами є кілька інших способів, які можна використовувати в HTML-документі. Наприклад, можна використовувати безпосередньо SVG-код - ось як він повинен приблизно виглядати:

Це одна з ікон, яку я експортував, в форматі XML. Цей код дуже схожий на HTML (це структурний формат), що означає, що ми можемо вбудовувати його прямо в сторінку.

Додавання SVG в HTML

Давайте почнемо з базової HTML-сторінки, яка включає PNG-іконки з їх анкорами, і контейнером:

А тепер я скопіюють і вставлю код SVG, хоча я проигнорирую верхній рядок, яка посилається на характер вбудовування файлу і інші деталі атрибутів. HTML-документ вже містить інформацію, яку не потрібно дублювати.

Я розмістив SVG прямо над відповідними PNG-іконками в сторінці HTML. На даний момент я оберну рядок зі звичайним PNG-зображенням в тег коментаря, щоб воно не з'являлося поряд з версією SVG

Чистіше SVG

Я також почищу код в своєму SVG. Видалення елементів атрибута опціонально, так як більшість фрагментів, які я видаляю, не змінять поведінки SVG. Ось код до і після, на випадок якщо ви захочете зробити те ж саме:

Подивіться, які елементи я видалив. елементи The

Потім мені потрібно туди помістити іконки. Мені не треба переносити весь SVG, потрібно тільки елемент group з його вмістом. Це я можу вбудувати в елемент

Примітка: Якщо вам зручно використовувати Grunt, ось плагін, який автоматизує об'єднання всіх окремих SVG-файлів.

Ховайте!

Тепер у нас все SVG іконки в head, і потрібно їх заховати; додаємо атрибут display \u003d "none" до нового svg\u003e, що означає жодна ікони не буде з'являтися вгорі сторінки.

Визначення кожної SVG іконки

Наступним кроком буде визначити кожну іконку так, щоб можна було використовувати їх на сторінці там, де ми раніше видалили елемент defs. За допомогою цього тега треба обернути все групи, відповідно обертаючи все іконки, я можу вказати, що хочу їх використовувати повторно де завгодно на сторінці.

Як використовувати SVG іконки

Іконки тепер визначено, але потрібно також позначити метод їх використання, і для цього візьмемо елемент use. елемент дозволяє взяти будь-який елемент з і викликати його в будь-якому місці на сторінці. Ми вибираємо елемент по його ID, тому було важливо назвати іконки правильно ще в документі Sketch. Подивіться на ID в прикладі вище, і як я посилаюся на кожен, використовуючи елемент .

Якщо ви все зробили, як я, і не допустили помилок, то не побачите будь-яких змін у відображенні графіки, але тепер ви можете повторно використовувати SVG іконки (в будь-якому потрібному вам розмірі) і викликати кожну скільки завгодно раз на сторінці.

Вдосконалюємо наш SVG-спрайт

Ще один плюс до використання SVG-спрайтів полягає в тому, що код сторінки набагато чистіше, і його простіше читати іншим людям, які також працюють над сайтом. Ми можемо ще трохи поліпшити результат. Внизу я замінив елементи в своєму SVG-спрайт на елемент symbol, плюс я пересунув атрибут viewbox з SVG елементів на сторінці до нових елементів symbol.

Використання не тільки більш правильно з точки зору семантики, в моєму прикладі, але також позбавляє від необхідності повторювати атрибут viewbox разом з елементами Примітка: Пам'ятайте, що вміст елементів за замовчуванням відображається в IE7.

Змінюючи елемент group на symbol. Ми можемо реалізувати всі ці поліпшення. Можна видалити елемент з SVG-спрайту, роблячи код ще чистіше.

висновок

Ну ось, що почалося з простеньких растрових іконок, перетворилося в суперпотужний набір векторної графіки, який можна легко застосовувати, де потрібно і в будь-якому потрібно розмірі. Сподіваюся, урок був вам корисний, і ви продовжите експериментувати і створювати SVG іконки в наступному проекті.

Підготовка SVG для використання в інтернеті це дуже простий процес, не складніше експорту JPEG або PNG. Використовуйте будь-який звичний для вас графічний редактор (Illustrator, Sketch, Inkscape [безкоштовний], тощо [або навіть Photoshop, якщо ви використовуєте шари з формами]) з тим розміром зображення, який ви плануєте використовувати. Зазвичай я працюю в Ілюстраторі, тому я поясню деякі способи підготовки файлів в цій програмі, але взагалі вони можуть бути застосовані і для будь-якої іншої програми. Вам, можливо, варто перевести текст в криві, оскільки шрифт, швидше за все, буде неправильно відображатися, якщо, звичайно, ви не плануєте стилізувати їх за допомогою веб-шрифту, який використовується на сторінці (що можливо!). Не варто також перетворювати всі об'єкти до єдиних форм, особливо якщо у вас є обведення, якій необхідно буде управляти на сторінці, тим більше перетворення об'єктів часто не зменшує розмір файлу. Будь-які імена, присвоєні групам або верствам, будуть додані до SVG як ID елемента. Це досить зручно для стилізації, але трохи збільшить загальний розмір файлу.

Перед тим як зробити експорт, необхідно перевірити, чи всі зображення знаходяться в целочисленной піксельної сітці (тобто, например не 23.3px × 86.8px). В іншому випадку швидше за все зображенню не вистачатиме чіткості і частина зображення обрізане. У Ілюстраторі це можна зробити наступним чином: Object\u003e Artboards\u003e Fit to Artwork Bounds. Потім тиснемо save as і вибираємо SVG, і залишаємо налаштування за замовчуванням. Тут можна зробити невелику оптимізацію, але насправді не варто, так як далі ми будемо застосовувати різні поліпшують прийоми, тому зараз ми не будемо витрачати даремно час на ці настройки.

Прийоми для зменшення розмірів файлу.

(Дивіться по оптимізації)

Щоб домогтися найменшого розміру SVG, логічно буде видалити з нього все зайве. Найбільш відома і корисна програма (принаймні я так думаю) для обробки SVG це SVGO. Вона видаляє весь непотрібний код. Але! Будьте уважні використовуючи цю програму, якщо плануєте управляти SVG за допомогою CSS / JS, так як вона може занадто сильно почистити код, що утруднить подальші зміни. Зручність SVGO ще й в тому, що її можна включити в процес автоматичного складання проекту, але можна також використовувати GUI якщо хочеться.

Розбираючись докладніше з правильним видаленням всього непотрібного, ми можемо зробити ще дещо в графічному редакторі. Спершу потрібно переконатися, що використовується настільки мало контурів / форм, наскільки це можливо, так само як і точок на цих контурах. Можна об'єднувати і спрощувати все, що піддається спрощенню, і видалити всі непотрібні точки. У Ілюстраторі є плагін VectorScribe з інструментом Smart Remove Brush Tool, який допоможе видалити точки і при цьому залишити загальну форму тієї ж.

попередня оптимізація

Smart Remove Brush Tool видалив точки

Далі будемо збільшувати зображення. У Ілюстраторі зручно включити перегляд з піксельної сіткою View\u003e Pixel Preview, щоб переглянути, як розташовуються контури. Щоб розмістити контури по сітці, буде потрібно трохи часу, але ці зусилля окупляться і дозволять добитися більш чіткого рендеринга (краще звернути на це увагу заздалегідь).

Точки поза сітки

Вирівнювання по сітці

Якщо є два і більше об'єктів для вирівнювання, то варто видалити всі непотрібні перекриття. Іноді навіть якщо контури ретельно вирівняні, може бути видна тонка біла лінія. Щоб запобігти такому, можна трохи накласти об'єкти один на одного в місцях перекриття. Важливо: в SVG z-index має певний порядок, який залежить від об'єкта, що знаходиться знизу, тому варто помістити верхній об'єкт в нижню частину файлу в коді.

І, нарешті, останнє, але важливе, те, про що зазвичай забувають - це активувати gzip стиск SVG на вашому сайті в.htaccess файлі.

AddType image / svg + xml svg svgz AddOutputFilterByType DEFLATE "image / svg + xml" \\ "text / css" \\ "text / html" \\ "text / javascript" ... etc

Як приклад того, наскільки ефективною є ця техніка, я скористаюся оригінальним логотипом Breaking Borders і оптимізує його таким чином: збільшую розмір до того, яким він повинен бути; приведу в порядок контури; видалю максимально можливу кількість точок; пересуну точки на цілочисельні пікселі; зрушу все області перекриттів і відправлю це все в SVGO.

Оригінал: 1,413b

Після оптимізації: 409b

В результаті розмір файлу став менше на ~ 71% (і на ~ 83% при стисканні)