1. MSGROUP /
  2. Блог /
  3. Інтерактивні SVG зображення на CSS та JavaScript /

Інтерактивні SVG зображення на CSS та JavaScript

Інтерактивні SVG зображення на CSS та JavaScript

Якщо ви хочете надати вашому сайту інтерактивності, проілюструвати контент корисною інфографікою, ви можете використати всі можливості SVG файлів.

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

У цій статті ми розглянемо процес створення такого зображення від графічного редактора до виведення на сайт. Прикладом буде такий SVG файл:

Експорт в SVG формат

Я використовую для роботи Photoshop, тому інформація буде описуватися на його основі, але все те ж саме можна виконати через Adobe Illustrator.

Отже, насамперед створюємо необхідне нам зображення у кривих. Кожен елемент на окремому шарі.

Создаем файл в Photoshop

Далі робимо експорт у SVG формат.

Экспорт в SVG в Photoshop

Отриманий файл можна відкрити у будь-якому текстовому редакторі. Зручніше це буде зробити через редактор із підтримкою HTML та CSS синтаксису.

SVG анімація через CSS

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

SVG код файла

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

Між тегами ми можемо залишити лише стилі CSS, решту сміливо видаляємо.
Імена ідентифікаторів у елементів будуть такими ж, як і назви шарів та папок у Photoshop. Тому для зручності краще задати назви одразу у Photoshop. Шари, які були укладені в папки, будуть знаходитися в файлі SVG всередині тегів <g>.

SVG код с CSS анимацией

CSS всередині файлу SVG має дещо інші назви, наприклад:

fill: – визначає колір тла, аналог "background";

stroke: - Визначає стилі для рамок елементів;

stroke-width: - задає товщину рамки. Може набувати як цілі, і дробові значення. Одиниці виміру px, em, % та відсутність таких;

stroke-linecap: - ця властивість задає стиль рамки для початку та кінця лінії;
Може приймати значення:
butt - прямі кути всередині лінії – за замовчуванням;
square -прямі кути за межами лінії;
round - заокруглення на кінцях, радіус заокруглення визначається величиною stroke-width.

stroke-dasharray: – задає кількість штрихів у рамці фігури у файлі SVG, щоб можна було зобразити рамку об'єкта пунктиром. Чим більше, тим більше відступ між штрихами. Може набувати як цілі, і дробові значення. Одиниці виміру: em,% або відсутність таких.

Анімація задається через знайомі @keyframes, тут ми не детально розбиратимемо принципи створення анімації на CSS, на цю тему є окремі статті.

У нашому прикладі комбінація атрибутів stroke-dasharray та stroke-dashoffset створює ефект малювання лінії. При цьому значення stroke-dashoffset змінюється від максимуму до нуля, щоб створити видимість плавного наповнення. За замовчуванням аттрибут stroke-dashoffset має максимальне значення, щоб лінії не було видно.

Вставка SVG файлу в HTML код

Для виконання цієї процедури є кілька варіантів.

Спосіб №1
По-перше, ми всі пам'ятаємо, що SVG – це зображення, отже, вставити його можна через тег <img src="file.svg" alt="">
Але такий спосіб має один недолік, до вставленого таким чином файлу, не можна буде отримати доступ через JavaScript.

Спосіб №2
Вставка через теги object або embed:

<object data="file.svg" type="image/svg+xml" id="myfile"></object>
<embed src="file.svg" type="image/svg+xml" id="myfile" />

Спосіб №3
Вставка через кадр iframe. Але цей варіант менш бажаний через підтримку браузерами, тому його ми не розглядаємо.

Доступ до фігур SVG файлу через JavaScript

Додатково підключаємо бібліотеку JQuery для спрощення коду. Насамперед нам потрібно дочекатися, поки вся графіка і наш SVG завантажиться, тому використовуємо window.onload.

Спосіб №4
Розмістити прямо на сайті всю графіку в контейнері <svg>. При цьому ви зможете застосувати до фігур зовнішні CSS стилі.


$(window).load(function () {

var svgobject1 = document.getElementById('myfile'); // Находим тег object по ID

if ('contentDocument' in svgobject1) { //проверяем не пустой ли он

var svgdom = $(svgobject1.contentDocument); //получаем доступ к объектной модели нашего файла

//теперь можем выполнять разные манипуляции
//вывести подсказку при наведении на файл
$('svg', svgdom).on('mousemove', function(e){
console.log('Подсказка...');
});

//выполнить переход на нужный URL при клике на определенной фигуре
$("#chair", svgdom).click(function(){
location.href='#';
});
}
});

Переваги та недоліки SVG зображень

До плюсів можна віднести:

  1. Зміна розміру зображення без втрати якості;
  2. Мінімальна вага файлів;
  3. Можливість створення анімованих зображень із застосуванням CSS;
  4. Можливість управління фігурами СВГ файл через JavaScript.

Серед недоліків слід виділити:

  1. Трудомісткий процес створення;
  2. Відсутність повноцінної підтримки у браузерах Internet Explorer

SVG файли знаходять застосування на сайтах для створення зображень-завантажувачів, інтерактивних карт (на заміну застарілих тегів), створенні слайдів, діаграм та іншого. Можливості застосування SVG обмежені лише вашою фантазією.




 
надіслати запит
Цікавить розробка сайтів або послуги інтернет-маркетингу? Заповніть форму нижче та надішліть заявку на прорахунок
На вказаному номері є: ;
відгуки клієнтів

This is our 2nd project together. I will hire them on the next project as soon as needed.

Patrick Edmond, Republic of Moldova, Kishinev

Оценка 5

good with the first part of the website, but too long time to get it done. If you want more information contact me.

Vincenzo Morandi,

Оценка 3

Great work. Nice to cooperate with.

KOTNIS. Software Developer, Poland, Wroclaw

Оценка 5

Fantastic jobs! Very good attitude. Will hire him again.

Jack Chan, Australia, Canberra

Оценка 5

Excellent job, will definitely work with him again

Ihor Kyselov, USA, Boston

Оценка 5

Great to work with, will go beyond the task that you needed done

Eldar Makhmudov,

Оценка 5

Ivan was positive, right from the start. He showed confidence and assured us from Day One, that he and his team would be able to complete the given task and get the desired results with the in the stipulated time frame. These guys are very professional people and I would highly recommend other employers to hire them. We are very happy with the way they have dealt with the project. Thanks MSGROUP

Bob, Singapore

Оценка 5

Small Drupal task, well executed, good communication!

Tobias H., Austria, Vienna

Оценка 5

A terrific find! A company small enough with which to develop an ongoing, working relationship (versus the web work "factories" with so many fleeting jobs and changing staff that they cannot keep your project straight.) They were professional, enthusiastic and accommodating. Nice guys, too. I highly recommend them. These guys are GREAT! IT's a small company so the service is very personal, which is ideal in my opinion. They were courteous, accommodating, knowledgeable and dealt with a number of unexpected delays and schedule changes from me. True professionals, trustworthy and nice guys. Highly recommended!

Katherine Robinson, USA, Dallas

Оценка 5

Great team to work with Although we hit some difficulties due to complexity of the work but we manage to finish the job with excellent result

Dilan M.R. Roshani, Iraq, Baghdad

Оценка 5

ru