Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Створення крос-браузерних спрайтів у форматі SVG

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

У цьому посібнику ми розглянемо основи реалізації деяких іконок у форматі SVG (* Scalable Vector Graphics – заснований на XML формат відображення векторної графіки у веб-сторінках, ухвалено W3C. Використання у веб-сторінках векторної графіки замість растрової дає змогу зменшити розмір файла, який містить рисунок, виводити зображення однаково незалежно від роздільної здатності екрана, а також спростити створення анімованих зображень), як надати запасний варіант та як їх перетворити у спрайт (* легко переміщуваний по екра­ну растровий графічний елемент (наприклад, куля або ракета), який часто реалізують за допомогою апаратних засобів) у форматі SVG.

Основи реалізації іконок у форматі SVG

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

іконки взято з flaticon

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

PNG та SVG

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

Я скористався Sketch (* редактор векторної графіки для macOS) для виводу моїх іконок у форматі PNG, так що я скористуюсь їм знову для підготування моїх іконок до використання у форматі SVG.

My chosen icons in Sketch with named layers groupsMy chosen icons in Sketch with named layers groupsMy chosen icons in Sketch with named layers groups

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

Експортування зображень у форматі SVG

Тепер експортуємо іконки у форматі SVG, що легко виконати за допомогою інструмента Sketch для вирізання шарів. За подробицями про те, як це працює, звертайтеся до Understanding Sketch’s Export Options. Я буду експортувати їх у якості окремих файлів та розміщувати їх у папці images мого проекту.

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

Проте у випадку з SVG є безліч різних способів додавання їх до HTML-документа. Наприклад, ми можемо вбудувати у документ власне код SVG; нижче наведено, як міг би виглядати подібний код:

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

Додавання іконок у форматі SVG до документу HTML

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

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

Ми додали код SVG прямо над відповідною іконкою у форматі PNG документа HTML. Я закоментую на деякий час рядок зі звичайним зображенням у форматі PNG, щоб воно не відображувалося після версії зображення у форматі SVG.

Очищений код SVG

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

Зверніть увагу на елементи, які я видалив. Зараз елементи  <title><desc> и  <defs> нам не потрібні, проте можливо, що вони нам стануть у пригоді пізніше у ньому посібнику. Також є пара елементів  <g>, які використовується для зазначення груп та відповідають групам, створеним у моєму документі Sketch. За налаштуванням Sketch розміщує все усередині сторінки, тому ми маємо елемент  <g id=”Page-1”… . Ви можете видалити цей елемент, оскільки він нам не потрібний (група, розташована у ньому, важливіша для нас). Sketch дійсно надає опцію для отримання очищеного коду SVG при експортуванні, проте нема нічого поганого, якщо ми очищуємо його самостійно.

Останнє, що потрібно виконати на цьому етапі, – видалити атрибути height та width у самому документі SVG. Цей момент потрібно буде компенсувати у моєму файл CSS, як показано нижче:

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

Порада: Впевніться, що зображення дійсно є зображенням у форматі SVG, збільшуючи його масштаб за допомогою комбінації клавіш Command-+ при перегляді його у браузері. Зображення повинно залишатися чітким, незалежно від того, наскільки ви його збільшили.

Надавання запасного варіанта

Якщо ви використовуєте код SVG для виконання на клієнтській стороні, то вас, можливо, цікавить,  як стоїть справа з підтримкою браузерами цієї технології. Вбудовані зображення у форматі SVG відображуються коректно в усіх браузерах за виключенням Internet Explorer 8 (та ранніших версій) та Opera Mini. Сервіс Can I Use у даним момент (* жовтень, 2014 на момент опублікування оригінального посібника) повідомляє, що IE8 використовують біля 4% всіх користувачів, а Opera Mini – біля 3%. Так що у вашому випадку, можливо, і нема потреби у наданні запасного варіанта, проте я покажу вам рішення.

Погляньте на код однієї з моїх іконок у форматі SVG у документі, і ви помітите, що моя початкова іконка у форматі PNG як і раніше знаходиться на своєму місці, проте її закоментовано. Це зображення у форматі PNG буде нашим запасним варіантом.

Видалення коментарів

Для початку я видалю коментарі. Тепер нам потрібно перемістити елемент <img> уверх до самого елементу <svg>, одразу після групи, що містить власне іконку.

Далі я оберну  <img> до характерного для мови SVG елементу під назвою foreignObject. Якщо браузер не може інтерпретувати векторну інформацію SVG, то він звернеться замість цього до «нехарактерного об'єкту» та перейде до використання розташованого у ньому елемента  <img>. Також ми повинні дати знати браузеру про те, що він повинен зробити вибір на користь векторної версії зображення, якщо він її підтримує. Саме для цього і потрібен елемент  <switch>, до якого я помістив і групу, і foreignObject.

Нижче наведено оновлену розмітку:

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

Створення спрайту у форматі SVG

Спрайти SVG працюють подібно традиційним спрайтам. Найпростіший варіант спрайту – колекція графічних елементів, скомбінованих в одне зображення. Далі кожне зображення вибирається за допомогою CSS та HTML, звичайно завдяки вказанню координат та «вікна» перегляду.

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

Для початку я додам новий елемент <svg> усередині елемента <head> на моїй сторінці, одразу перед закриваючим тегом. У цьому елементі <svg> будуть міститися всі додані мною раніше на сторінці іконки.

Далі мені потрібно перемістити мої іконки до нього. Мені не потрібно переміщати весь елемент <svg>, а тільки елемент для додання групи та його вміст. Я можу зібрати іконки в елементі <svg> у заголовку.

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

Приховуємо!

Тепер, коли ми маємо всі наші іконки у заголовку, нам потрібно їх приховати; якщо ми додамо атрибут display=”none” до <svg>, то всі іконки не будуть відображуватися вверху сторінки.

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

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

Використання іконок

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

Зверніть увагу на використання у прикладі вище ID і потім погляньте, як я використовую їх за допомогою use, наприклад  так: <use xlink:href="#twitter-icon"></use>.

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

Удосконалювання ваших спрайтів у форматі SVG

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

У коді нижче я замінив елементи <g> у моєму SVG-страйті на елемент symbol, а також перемістив атрибут viewbox з елементів <svg> на сторінці до нових елементів symbol.

При використанні <symbol> ми не тільки діємо семантично більш правильно, хоча б у моєму випадку, але й позбавляємося від потреби повторення атрибута viewbox у наших елементах <svg> та <use>. Ми можемо повернути видалені нами раніше елементи title та desc і скористатися ними для покращення зручності  використання наших іконок.

Зверніть увагу: Майте на увазі, що вміст елементів  <desc> за налаштуванням відображується в IE7.

Завдяки заміні елементів g на symbol ми змогли додати всі ці покращення. Також ми можемо видалити елемент <defs> зі спрайту SVG, завдяки чому наш код стане чистіше.

Завершення

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.