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 код, чтобы придать изображению эффект плавной прорисовки на экране, а также эффектов от наведения мышью на отдельные элементы.

Между тегами <defs> мы можем оставить только стили 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 файлы находят применение на сайтах для создания изображений-загрузчиков, интерактивных карт (на замену устаревших тегов <map> - <area>), создании слайдов, диаграмм и прочего. Возможности применения SVG ограничены лишь вашей фантазией.




 
отправить запрос
Интересует разработка сайтов или услуги интернет-маркетинга? Заполните форму ниже и отправьте заявку на просчет
На указанном номере есть: ;
отзывы клиентов

MSGROUP was able to complete the job at good rate... I am planning on working on more projects later. A++

Faizal Johnson,

Оценка 5

Good communication. Good work.

KOTNIS. Software Developer, Poland, Wroclaw

Оценка 5

After few weeks and several freelancer trials. I was able to hire msgroup and he was able to help me get this project done. It was very good meeting this person and I am now able to complete this project. Good A++ Freelancer Highly recommended

Faizal Johnson, USA, Houston

Оценка 5

Excellent job, will definitely work with him again

Ihor Kyselov, USA, Boston

Оценка 5

Very professional and skilled.

Trevor Davenport, USA, New York

Оценка 5

Thanks for your job. Good website was created and communication was also very good, what is very important. I will surely hire you again for my next projects. Thanks. Vince

Vincenzo Morandi, Switzerland, Geneva

Оценка 5

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

Eldar Makhmudov,

Оценка 5

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

Jack Chan, Australia, Canberra

Оценка 5

The first part of the work was done well. If you want more information contact me

Vincenzo Morandi,

Оценка 3

Good work! Just as ordered

Martin,

Оценка 5

ua