Як додати на сайт SVG іконки

SVG – формат векторної графіки. Дослівно абревіатура розшифровується як “масштабована векторна графіка” (Scalable Vector Graphics). SVG можна сміло використовувати у себе на сайті, та спершу краще розібратись із усіма нюансами.

Пераваги використання SVG:

  • Масштабування: на відміну від растрового зображення, SVG не втрачає якості при масштабуванні, тому його зручно використовувати для розробки під retina;
  • Зменшення HTTP-запитів: при використанні SVG кількість звернень до сервера зменшується, відповідно збільшується швидкість завантаження сайту;
  • За допомогою CSS можна змінювати параметри графіки на сайті, наприклад background, opacity, border та інші;
  • За допомогою javascript SVG можна легко анімувати;
  • Текстовий формат — файли SVG можна читати і редагувати за допомогою звичайних текстових редакторів;
  • Малий розмір: об’єкти SVG важать набагато менше растрових зображень.

Недоліки використання растрового зображення на сайті

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

Повернемося до нашої задачі. В деяких випадках дизайнери які розробляли дизайн сайту, разом із psd файлом можуть надіслати вам вирізані та збережені у форматі SVG усі іконки майбутнього сайту. Є декілька способів підключити SVG іконки на сторінку. Їх я опишу далі.

Додати SVG на сторінку за допомогою тега <img>

Для цього достатньо однієї строки:

Додати SVG через background-image

Використовувати SVG в якості фону за допомогою CSS-правила background-image досить просто.

Важливо! Два даних способи не дозволяють нам керувати параметрами графіки. Тож далі ми розглянемо способи які нам підходять.

Додати SVG безпосередньо в документ

Щоб отримати SVG код зображення, його достатньо відкрити у текстовому редакторі. Здебільшого для створення векторного зображення використовують Adobe Illustrator, або ж інші векторні редактори (CorelDRAW, Xara Xtreme, Inkscape). При збереженні SVG через Adobe Illustrator код не оптимальним, то ж за допомогою сервісу SVG Optimiser його можна почистити від зайвого сміття. Тепер наш SVG став ще більш схожим на HTML.

Завдяки класу .socialSvgIcon який ми додали безпосередньо для path ми можемо прописувати стилі для цього елемента. Для прикладу:

Зверніть увагу, що для елементів SVG є спеціальний набір властивостей CSS. Наприклад, не можна використовувати background-color, замість нього є fill. Однак дещо стандартне можна використовувати, наприклад, :hover. Ось увесь список CSS-правил для SVG.

Вище я писав що SVG не втрачає якості при масштабуванні, тому якісно відображається на усіх без винятку retina дисплеях. Тим самим позбавляє вас головного болю на кшталт створення додаткового спрайту зображень для retina 2х та 4х. То ж рекомендую усім при можливості використовувати у своїй верстці саме SVG. Демо.

Коментарі (1)

Вам вже є 18 років?

Для переходу по цьому посиланню ви повинні підтвердити, що вам виповнилось 18 років.

Мені немає 18 Мені вже є 18