Почему вы не используете SVG?

SVG, или Scalable Vector Graphics , представляет собой движок рендеринга векторной графики в стиле XML для браузера. SVG поддерживается во всех браузерах, кроме IE <v9 и Android <v3. Та же поддержка доступна для canvas (за исключением холста, полностью возвращающегося в Android), поэтому часто возникает вопрос: какой из них использовать?

Сегодня мы рассмотрим SVG и объясним, почему вопрос «какой из них мне следует использовать?» обычно отвечает «что я пытаюсь сделать?». Чтобы получить полный список элементов, составляющих SVG, ознакомьтесь с документами Mozilla по этому вопросу. Вы также можете увидеть API SVG DOM там.

обзор

Мы начнем с описания некоторых уникальных преимуществ SVG. Затем, вместо просмотра всех 80 типов узлов SVG, мы объясним, как Illustrator может быстро получить документ SVG на веб-страницу. Мы также рассмотрим D3.js, мощную библиотеку JavaScript для манипуляции SVG.

«SVG не предназначен для манипулирования пикселями».

Основные преимущества SVG

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

Разрешение Независимости

Если вы еще не слышали, независимость от разрешения и браузерная агностицизм — горячая тема в разработке переднего плана (подумайте «адаптивный дизайн») в наши дни. Большинство решений, которые существуют для решения проблем, связанных с разрешением (например, для экранов сетчатки), включают в себя либо большое количество загруженных ненужных данных (замена изображений в высоком разрешении), либо компромисс для одного или другого браузера (повышение всех разрешений, даже когда на экране не будет отображаться разница). Это заставляет нас полагаться на узкое место в скорости загрузки данных для передачи изображений с более высоким разрешением на устройства, которые часто находятся в беспроводных сетях передачи данных. Не идеально.

«SVG предлагает способ создания графических элементов в полном разрешении, независимо от того, какой размер экрана, какой уровень масштабирования или какое разрешение имеет устройство вашего пользователя».

SVG предлагает способ создания графических элементов в полном разрешении, независимо от того, какой размер экрана, какой уровень масштабирования или какое разрешение имеет устройство вашего пользователя. Это то, что до SVG мы видели только при умном оформлении элементов с помощью CSS и рендеринга текста. Использование элементов divs и: after для создания простых фигур и других эффектов в SVG не требуется. Вместо этого вы можете создавать векторные фигуры всех видов.

Супер-доступный API на основе DOM-узлов

Так ты пишешь HTML? JavaScript? CSS? Хорошо. Тогда вы уже знаете многое из того, что вам нужно знать, чтобы написать SVG. SVG фактически использует XML-совместимый формат для определения форм рендеринга. Помимо этого, вы можете создавать стили в CSS и делать их интерактивными с помощью JavaScript. Существует множество библиотек JS, которые могут помочь вам в этом мире, таких как D3.js и Raphael. Вот пример группы элементов SVG (лист Envato). Вы также можете увидеть этот пример на JSFiddle .

API SVG на основе узлов DOM уже более доступен, чем API-интерфейс только на стороне клиента. С помощью этой конструкции вы можете:

• Создание SVG-изображений на стороне сервера.
• Проверять элементы SVG, как и любой другой элемент HTML
• Программируйте манипуляции с фигурами, стилями и позициями с помощью технологии, с которой вы уже знакомы (JavaScript и CSS)
• Присоединить обработчики событий к узлам SVG

DOM API предоставляет еще один ряд явных преимуществ для использования SVG.

Нет ненужных HTTP-запросов

Когда вы используете изображения в html-документе с <img> , вы определяете файл, который запрашивает браузер пользователя. Этот запрос будет занимать полосу пропускания и потребует больше драгоценного времени для загрузки. Если вместо этого ваше изображение представляет собой набор dom-узлов, оно обрезает этот дополнительный HTTP-запрос, делая ваш сайт более быстрым и удобным для пользователя.

Простые интерактивные сценарии

Несмотря на войны браузеров, DOM API, во всех браузерах, предлагает обширную гибкость с точки зрения интерактивности сценариев, которая распространяется на элементы SVG. Стилизация SVG происходит через CSS. Наличие API-интерфейсов событий браузера, доступных для элементов SVG, делает создание сценариев интерактивного поведения легким. Просто прикрепите обработчик к определенному узлу элемента SVG, и все готово.

Это не относится к элементам, нарисованным на холсте. Поскольку холст — это просто механизм рендеринга пикселей, нарисованные элементы не сохраняются в памяти как объекты. Сценарий должен выполнять сбор этих элементов и отслеживать всю соответствующую информацию о положении и размере для поиска и запуска событий в цикле событий. Помимо этого, z-индексация также должна обрабатываться сценарием.

Давайте посмотрим на пример. Скажем, вы хотите обнаружить зависание над кругом на холсте. Примечание: мы просто скажем, что canvas — это полная ширина окна браузера, и мы будем использовать jQuery только для того, чтобы пример был кратким.

  var circleCenter = [200, 300], радиус = 50;
 $ (window) .on ("mousemove", function (e) {
	 var mx = e.pageX, my = e.pageY;
	 if (mx> circleCenter [0] - радиус && mx <circleCenter [0] + radius && my> circleCenter [1] - радиус && my <circleCenter [1] + radius) {
		 // теперь мы находимся
	 }

 }); 

Несмотря на то, что это не обязательно сложный или необычный шаблон кода, если вы привыкли к API-интерфейсу браузера, это похоже на разочаровывающий процесс, просто проверяющий всплывающие подсказки. Это очень распространенная модель в других низкоуровневых механизмах программирования интерфейсов, таких как Unity3D или Processing. Но в мире Интернета у нас есть инструменты, которые уже справляются со многими общими интерактивными целями, которые у нас могут быть. Вы могли бы написать набор вспомогательных функций для выполнения общих задач, но разве вы бы не подошли к сути? Напротив, мы видим простоту той же задачи, используя SVG.

  $ ("svg path # circle"). on ("hover", function (event) {
	 // Это все.
 }); 

Это явно намного более эффективно для разработчиков сценариев простой интерактивности.

Практическое применение

Существует множество библиотек JavaScript для canvas (например, KineticJS , которые позволят вам делать довольно интересные вещи . Но если вы похожи на меня, вы не используете полнофункциональные физические движки в своих веб-приложениях. Вместо этого я Мне чаще всего нужны масштабируемые значки, интерактивные графики и подробные, эстетически великолепные способы представления информации моим пользователям. Большая часть нужной мне физики — это простые уравнения смягчения. Эти графические элементы легко создаются с помощью SVG и множество простых физик уравнения, вероятно, справятся с остальными моими потребностями, поэтому давайте рассмотрим несколько практических приложений для SVG.

• График Поскольку наибольшая сила SVG — это базовые векторные фигуры, он, естественно, очень хорошо работает для графиков и инфографики. Он не только отлично подходит для создания статических графиков из заданных чисел, но также хорошо подходит для «живых» графиков, заполняемых запросами AJAX, пользовательским вводом или случайно сгенерированными данными.
• Дорожная карта Дорожные карты состоят из жестких линий и точных форм. Эти фигуры могут быть хорошо представлены с помощью векторной графики и могут использоваться для увеличения масштаба карты.
• Сложные элементы пользовательского интерфейса Допустим, вам нужен элемент пользовательского интерфейса, который выглядит как сложенная пирамида из кругов. Как бы вы сделали это в HTML и CSS? Ну, для начала вы должны создать кучу элементов для каждого отверстия, назначив им определенный радиус и стили границ. Затем вы поместите их в содержащий div. Теперь, что, если вы хотите один градиент по всему этому? Вам, вероятно, придется использовать маскировку или какую-то другую технику. Вы бы предпочли не использовать изображения, так как они не масштабируются и не могут быть программно перерисованы или изменены. Вместо этого, почему бы не нарисовать элемент в Illustrator и не сохранить его в виде файла SVG? Это позволит вам иметь один масштабируемый элемент, не беспокоясь об управлении несколькими элементами div.
• Логотипы Большинство логотипов являются векторными. Вы можете определить SVG-документ в качестве своего логотипа и перетащить его куда угодно, масштабируя на лету до любого необходимого размера без ущерба для качества или слишком большой полосы пропускания.
• Простые игры Не секрет, что canvas хорошо подходит для рендеринга игр. Одна из причин этого заключается в том, что игры часто не зависят от векторной графики; скорее они используют пиксельную графику и анимацию. Тем не менее, SVG является отличной альтернативой для игр, в которых требуется меньше анимации персонажей и больше информации (например, судоку).

Почему вы, вероятно, не используете его

Теперь, когда мы рассмотрели некоторые преимущества SVG, давайте рассмотрим, почему многие разработчики по-прежнему предпочитают не использовать SVG. Есть две основные причины, по которым SVG не используется многими разработчиками.

1. Они никогда не слышали об этом или никогда не думали, что им это нужно, поэтому проигнорировали это (Этот больше не оправдание!)
2. XML-документ SVG любой сложности выглядит относительно архаичным и сложным, и, похоже, не так просто, как просто использовать изображение.

Поэтому, конечно, никто не хочет сидеть и редактировать точки в SVG XML. К счастью, это никому не нужно! Это та часть, которую люди часто не осознают; Есть инструменты для редактирования SVG, так что вам никогда не придется делать это вручную.

SVG Инструменты

Иллюстратор, Inkscape

Если у вас есть векторный редактор, он, скорее всего, может сохранить ваш файл как SVG. Идите и попробуйте. Откройте Illustrator, нарисуйте круг или два, а затем сохраните файл как SVG. Затем откройте этот файл в Sublime Text или другом текстовом редакторе. Вы сразу увидите, что, помимо некоторых дополнительных метаданных, SVG XML готов к переносу прямо в ваш HTML-файл. Скорее всего, вы увидите элементы <g> (group), <path> (path) и, конечно, <svg> (родительский svg).

D3.js

Хотя вы полностью можете перетащить свой SVG XML прямо в файл HTML, что если вы хотите, чтобы SVG создавался динамически? D3.js — это «библиотека JavaScript для работы с документами на основе данных». Другими словами, он отлично подходит для генерации SVG-элементов, таких как гистограммы и линейные графики, на основе набора данных. Мы решили показать D3 из-за его соответствия словаря фактической реализации SVG в браузере; Имейте в виду, что в дикой природе есть и другие замечательные библиотеки SVG (в частности, Raphael.js).

Хотя для краткости D3.js делает больше, чем просто манипуляции с SVG, это все, что мы будем использовать сегодня. (Обязательно ознакомьтесь с примерами на официальном сайте D3.js и ознакомьтесь с семинаром, который Майк разместил на своем личном сайте.)

Пример 1: пульсирующий круг

В этом первом примере мы просто создаем пульсирующий круг, используя Math.sin и итератор с setInterval. Пульсирующий круг

Пример 2: Обновление линейного графика

В этом примере мы обновляем линейчатый граф с некоторыми случайными значениями. Линейный график

Когда НЕ следует использовать SVG?

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

• Если для рендеринга требуются тысячи узлов, более эффективно выполнять рендеринг на холсте (поскольку браузеру не нужно создавать объекты для каждого отрисованного фрагмента, а также не нужно выполнять векторную математику, необходимую для рендеринга объекта. Вместо этого он по существу рисует сопоставленные пиксели.)
• Если вашему приложению требуется поддержка IE8, помните, что вы должны либо предоставить другой запасной вектор (например, более сложный VML ), либо вообще не использовать вектор, а вместо этого полагаться на изображения с адаптивным размером.

Полезные ссылки

Вот несколько полезных ссылок, которые помогут вам закрепиться в SVG!

• Raphaël.js
• Processing.js , основанный на мощном инструменте обработки изображений Java.
• jQuery SVG
• Статья Sitepoint: Как выбрать между Canvas и SVG
• Холст и SVG Performance
• Nettuts + статья о Рафаэле

Какие другие применения вы нашли для SVG? Дайте нам знать в разделе комментариев и большое спасибо за чтение.