Нарисовать схему в браузере html svg. SVG: основы векторной графики в HTML

Базовые концепции и использование

Формат масштабируемой векторной графики (Scalable Vector Graphics, SVG) является частью семейства стандартов векторной графики. Векторная графика отличается от растровой, в которой определение цвета каждого пиксела хранится в некотором массиве данных. Наиболее распространенными растровыми форматами, используемыми в Интернете в настоящее время, являются JPEG, GIF и PNG, каждый из которых имеет свои достоинства и недостатки.

Часто используемые сокращения

• CSS: Cascading Style Sheets (Каскадные таблицы стилей)
• GIF: Graphics Interchange Format (Формат обмена графическими данными)
• GUI: Graphical User Interface (Графический пользовательский интерфейс)
• HTML: Hypertext Markup Language (Язык разметки гипертекста)
• JPEG: Joint Photographic Experts Group (Объединенная группа экспертов по машинной обработке фотографических изображений)
• PNG: Portable Network Graphics (Переносимая сетевая графика)
• SVG: Scalable Vector Graphics (Масштабируемая векторная графика)
• XML: Extensible Markup Language (Расширяемый язык разметки)

Формат SVG обладает несколькими преимуществами перед любым растровым форматом:

• Графика в формате SVG создается с использованием математических формул, которые требуют сохранения в исходном файле намного меньшего количества данных, поскольку отсутствует необходимость сохранения данных по каждому отдельному пикселу.
• Векторные изображения лучше масштабируются. Попытка увеличения масштаба опубликованных в Интернете изображений по сравнению с исходным размером может приводить к искажению (или пикселизации) изображений.

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

• Размер исходного файла в векторной графике обычно меньше, поэтому графика в формате SVG загружается быстрее по сравнению с ее растровыми аналогами и меньше загружает канал передачи данных.
• Изображения в формате SVG визуализируются браузером и могут выводиться программными средствами. Они способны динамически изменяться, благодаря чему особенно хорошо подходят для управляемых данными приложений, например, диаграмм.
• Исходный файл изображения в формате SVG представлен в текстовом виде, поэтому он является доступным и дружественным для поисковых систем.

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

Основы SVG

При создании графического изображения в формате SVG используется совершенно иной процесс, нежели при создании файлов в форматах JPEG, GIF или PNG. Файлы JPEG, GIF и PNG обычно создаются с помощью какой-либо программы редактирования изображений, например, Adobe Photoshop. Изображения в формате SVG, как правило, создаются с использованием какого-либо языка на базе XML. Существуют графические пользовательские интерфейсы редактирования графики в формате SVG, которые генерируют для вас код XML, лежащий в основе изображения. Тем не менее, в данной статье предполагается, что вы работаете напрямую с XML. Информацию о программах редактирования изображений в формате SVG можно найти в разделе .

В листинге 1 показан пример простого XML-файла SVG, в котором рисуется красный круг с 2-пиксельной черной границей.

Листинг 1. XML-файл SVG

Приведенный выше код дает изображение, показанное на рисунке 1.

Рисунок 1. Красный круг с 2-пиксельной черной границей

Создание базовых геометрических фигур

При работе с графикой в формате SVG для создания геометрических фигур используются теги XML; эти элементы XML показаны в таблице 1.

Таблица 1. Элементы XML для создания графики в формате SVG

Элемент line

Элемент line представляет собой простейший графический элемент. В листинге 2 показано, как создать горизонтальную линию.

Листинг 2. Создание горизонтальной линии

Код, приведенный в листинге 2, дает изображение, показанное на рисунке 2.

Рисунок 2. Простая горизонтальная линия

Корневой тег SVG имеет атрибуты ширины и высоты, которые определяют рабочую область, доступную для рисования. Эти атрибуты действуют так же, как атрибуты высоты и ширины других элементов HTML. В данном случае установлено, что рабочая область занимает все доступное пространство.

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

Определение линии можно создать путем задания начальных и конечных координат по осям X и Y относительно рабочей области. Атрибуты x1 и y1 представляют собой координаты начала, а атрибуты x2 и y2 — координаты конца линии. Чтобы изменить направление вычерчивания линии, необходимо просто изменить координаты. Например, путем изменения предыдущего примера вы можете создать диагональную линию, как показано в листинге 3.

Листинг 3. Создание диагональной линии

На рисунке 3 показан результат кода, представленного в листинге 3.

Рисунок 3. Диагональная линия

Элемент polyline

Ломаная линия представляет собой рисунок, составленный из нескольких линий. В листинге 4 приводится пример создания рисунка, который выглядит, как ступеньки лестницы.

Код, приведенный в листинге 4, дает изображение, показанное на рисунке 4.

Ломаная линия создается с помощью атрибута points и путем определения пар координат по осям X и Y, разделенных запятыми. В представленном примере первая точка определена как 0,40 , где 0 — координата по оси X, а 40 — координата по оси Y. Тем не менее одного набора точек недостаточно для вывода изображения на экран, поскольку этот набор указывает рендереру SVG лишь начальную позицию. Вам требуется по меньшей мере два набора точек: начальная точка и конечная точка (например, points="0,40 40,40").

Как и в случае с вычерчиванием простых линий, линии не обязательно должны быть строго горизонтальными или вертикальными. Если изменить значения из предыдущего примера, можно получить состоящие из линий фигуры неправильной формы, как в листинге 5.

Листинг 5. Создание неровной линии

Код, приведенный в листинге 5, дает изображение, показанное на рисунке 5.

Рисунок 5. Неровная линия

Элемент rect

Для создания прямоугольника требуется всего лишь определить его ширину и высоту, как показано в листинге 6.

Листинг 6. Создание прямоугольника

Код, приведенный в листинге 6, дает изображение, показанное на рисунке 6.

Рисунок 6. Прямоугольник

С помощью тега rect также можно создать квадрат; квадрат — это просто прямоугольник с одинаковыми высотой и шириной.

Элемент circle

Круг создается путем определения координат X и Y центра круга и радиуса, как показано в листинге 7.

Листинг 7. Создание круга

Код, приведенный в листинге 7, дает изображение, показанное на рисунке 7.

Рисунок 7. Круг

Атрибуты cx и cy определяют положение центра круга относительно полотна. Поскольку радиус составляет половину ширины круга, при его определении помните о том, что общая ширина изображения будет в два раза больше заданного значения.

Элемент ellipse

По существу, эллипс — это круг, для которого в коде заданы два радиуса, как показано в листинге 8.

Листинг 8. Создание эллипса

Код, приведенный в листинге 8, дает изображение, показанное на рисунке 8.

Рисунок 8. Эллипс

В этом случае атрибуты cx и cy также определяют координаты центра относительно полотна. Однако в случае с эллипсом вы определяете один радиус для оси X и второй радиус для оси Y, используя для этого атрибуты rx и ry .

Элемент polygon

Многоугольник — это геометрическая фигура, которая содержит не менее трех сторон. В листинге 9 создается простой треугольник.

Листинг 9. Создание треугольника

Код, приведенный в листинге 9, дает изображение, показанное на рисунке 9.

Рисунок 9. Треугольник

Подобно работе с элементом polyline , многоугольники создаются путем определения пар координат по осям X и Y с использованием атрибута points .

Добавляя пары координат по осям X и Y, можно создавать многоугольники с любым количеством сторон. Например, путем изменения кода предыдущего примера вы можете создать четырехсторонний многоугольник, как показано в листинге 10.

Листинг 10. Создание четырехстороннего многоугольника

Код, приведенный в листинге 10, дает изображение, показанное на рисунке 10.

Рисунок 10. Четырехсторонний многоугольник

С помощью тега polygon можно также создавать геометрические фигуры сложной формы. В листинге 11 создается рисунок звезды.

Листинг 11. Создание звезды

Код, приведенный в листинге 11, дает изображение, показанное на рисунке 11.

Рисунок 11. Звездчатый многоугольник

Элемент path

Элемент path самый сложный из всех элементов рисования, позволяет создавать произвольные рисунки с использованием набора специальных команд. Элемент path поддерживает команды, указанные в Таблице 2.

Таблица 2. Команды, поддерживаемые элементом path

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

С помощью элемента path можно создавать любые простые геометрические фигуры из предыдущих примеров данной статьи. В листинге 12 с помощью элемента path создается обычный треугольник.

Листинг 12. Создание треугольника с помощью элемента path

Код, приведенный в листинге 12, дает изображение, показанное на рисунке 12.

Рисунок 12. Треугольник, созданный с помощью элемента path

Список команд определяется с помощью атрибута d . В данном примере вычерчивание начинается в точке с координатами X 150 и Y 0, определенными командой перемещения в точку(M150 0). Затем с помощью команды вычерчивания линии до точки (L75 200). проводится линия до точки с координатами X = 75 и Y = 200. После этого проводится еще одна линия с помощью еще одной команды вычерчивания линии до точки(L225 200). Наконец, рисунок замыкается с помощью команды замыкания (Z). Никакие координаты команду Z не сопровождают, поскольку для замыкания траектории вы по определению проводите линию из текущего положения обратно в исходную точку рисунка (в данном случае точку с координатами X = 150, Y = 0).

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

Истинная «мощь» элемента path заключается в его способности создавать фигуры нестандартной формы, как показано в листинге 13. Этот пример взят из документа Консорциума World Wide Web (W3C) Scalable Vector Graphics (SVG) 1.1 («Масштабируемая векторная графика (SVG) 1.1») (второе издание) (см. раздел ).

Листинг 13. Создание нестандартной фигуры с помощью элемента path

Код, приведенный в листинге 13, дает изображение, показанное на рисунке 13.

Рисунок 13. Нестандартная фигура, созданная с помощью элемента path

С помощью элемента path можно создавать сложные рисунки, например диаграммы и волнистые линии. Обратите внимание на то, что в представленном примере используются несколько элементов path . При создании рисунков вы не ограничены каким-либо одним элементом рисования в корневом теге SVG..

Фильтры и градиенты

В дополнение к базовым стилям CSS, которые использовались во многих приведенных выше примерах, SVG-графика также поддерживает использование фильтров и градиентов. Из этого раздела вы узнаете, как применять фильтры и градиенты к рисункам в формате SVG.

Фильтры

Фильтры можно использовать для применения специальных эффектов к изображениям в формате SVG. SVG поддерживает следующие фильтры.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

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

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

Код, приведенный в листинге 14, дает изображение, показанное на рисунке 14.

Рисунок 14. Эффект отбрасываемой тени для прямоугольника

Фильтры определяются внутри элемента def (сокращение от английского «definition», т. е. «определение»). Фильтру в данном примере присваивается идентификатор (id) "f1". Сам тег filter имеет атрибуты для определения координат по осям X и Y, а также ширины и высоты фильтра. Внутри тега filter вы используете требуемые элементы фильтра и устанавливаете нужные значения для их свойств.

После определения фильтра вы связываете его с конкретным рисунком путем использования атрибута filter , как показано в . В качестве значения url установите присвоенное фильтру значение атрибута id .

Градиенты

Градиент представляет собой постепенный переход от одного цвета к другому. Существуют два основных вида градиентов: линейный и радиальный. Применяемый тип градиента определяется используемым вами элементом. В нижеследующих примерах показано применение линейного и радиального градиентов к эллипсу.

В листинге 15 создается эллипс с линейным градиентом.

Листинг 15. Создание эллипса с линейным градиентом

Код, приведенный в листинге 15, дает изображение, показанное на рисунке 15.

Рисунок 15. Эллипс с линейным градиентом

В листинге 16 создается эллипс с радиальным градиентом.

Листинг 16. Создание эллипса с радиальным градиентом

Код, приведенный в листинге 16, дает изображение, показанное на рисунке 16.

Рисунок 16. Эллипс с радиальным градиентом

Градиенты, подобно фильтрам, определяются внутри элемента def . Каждому градиенту присваивается идентификатор (id). Атрибуты градиента (например, цвета) задаются внутри тега градиента с помощью элементов stop . Чтобы применить к рисунку какой-либо градиент, установите в качестве значения url для атрибута fill идентификатор (id) требуемого градиента.

Текст и SVG

Помимо создания базовых геометрических фигур, SVG также можно использовать для генерирования текста, как показано в листинге 17.

Листинг 17. Создание текста с использованием SVG

Код, приведенный в листинге 17, дает изображение, показанное на рисунке 17.

Рисунок 17. Текст, созданный с помощью SVG

В этом примере с помощью элемента text создается предложение I love SVG . При использовании элемента text фактически отображаемый текст находится между открывающим и закрывающим элементами text .

Вы можете выводить текст по различным осям и даже по траекториям. В листинге 18 текст отображается по дугообразной траектории.

Листинг 18. Создание текста по дугообразной траектории

Код, приведенный в листинге 18, дает изображение, показанное на рисунке 18.

Рисунок 18. Текст, размещенный по дугообразной траектории

В этом примере в корневой тег SVG добавляется дополнительное пространство имен XML xlink . Траектория, используемая для изгибания текста дугой, создается внутри элемента def , поэтому сама траектория на рисунке не визуализируется. Отображаемый текст вложен внутрь элемента textPath , который использует пространство имен xlink для обращения к id требуемой траектории.

Как и при работе с другими рисунками в формате SVG, вы также можете применять к тексту фильтры и градиенты. В листинге 19 к тексту применяются фильтр и градиент.

Листинг 19. Создание текста с фильтром и градиентом

Код, приведенный в листинге 19, дает изображение, показанное на рисунке 19.

Рисунок 19. Текст с фильтром и градиентом

Добавление XML-кода SVG на Web-страницы

После того как XML-код SVG создан, его можно включать в HTML-страницы несколькими способами. Первый метод заключается в прямой вставке XML-кода SVG в HTML-документ, как показано в листинге 20.

Листинг 20. Прямая вставка XML-кода SVG в HTML-документ

Вероятно, этот метод является самым простым, но он не способствует повторному использованию. Помните, что XML-код SVG можно сохранить в файле с расширением.svg . Когда вы сохраняете рисунок SVG в файле.svg , для его включения в Web-страницы можно использовать элементы embed, object и iframe . В листинге 21 показан код для включения XML-файла SVG с помощью элемента embed .

Листинг 21. Включение XML-файла SVG с помощью элемента embed

В листинге 22 показан код для включения XML-файла SVG с помощью элемента object .

Листинг 22. Включение XML-файла SVG с помощью элемента object

В листинге 23 показан код для включения XML-файла SVG с помощью элемента iframe .

Листинг 23. Включение XML-файла SVG с помощью элемента iframe

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

Заключение

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

Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика) . В соответствии со спецификацией W3.org SVG определяется как:

Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.

Несмотря на то, с августа 2011 года SVG включено в рекомендации W3C , данная технология практически не используется в веб проектах, хотя и имеет перед растровыми изображениями ряд преимуществ. В данной серии уроков мы представим, как работать с SVG элементами на веб страницах.

Преимущества SVG

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

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

Уменьшение количества запросов HTTP

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

Стили и скрипты

Встраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью JavaScript.

Легко редактировать и анимировать

Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровой графикой.

Базовые формы SVG

В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег . Рассмотрим базовые элементы подробно.

Линия

Для вывода линии в SVG используется элемент . Он рисует отрезок, для которого нужно определить две точки: начало и конец.

Начало отрезка определяется атрибутами x1 и y1 , а конечная точка определяется координатами в атрибутах x2 and y2 .

Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно.

Данный объект похож на , но с помощью элемента Можно рисовать несколько линий сразу.

Элемент Содержит атрибут points , который используется для указания координаты точек.

Прямоугольник выводится с помощью элемента . Нужно определить ширину и высоту.

Для вывода круга используем элемент . В следующем примере мы создаем круг с радиусом 100 , который определяется в атрибуте r:

Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.

Для вывода эллипса используем элемент . Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:

Элемент Выводит многогранные фигуры, такие как треугольник, шестиугольник и прочее. Например:

Использование редактора для векторной графики

Вывод простых объектов SVG в HTML осуществляется просто. Однако, когда сложность объекта увеличивается, подобная практика может привести к большому объему нужной работы.

Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator или Inkscape ) для создания объектов. Если вы владеете подобным инструментом, рисовать в них нужные объекты существенно проще, чем кодировать графику в теге HTML.

Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл.svg с помощью одного из следующих элементов: embed , iframe и object .

Результат будет одинаковым.

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров , за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript . Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Сначала загружаем и включаем библиотеку в документ HTML. Затем загружаем файл.svg , копируем и вставляем полученный код в функцию после загрузки:

В теге body размещаем следующий элемент div с идентификатором rsr .

И все готово.

В следующем уроке серии мы рассмотрим, как определять стили для объектов SVG в CSS.

(Обзорная статья по следам конференции по разработке ПО в Екатеринбурге и другим выступлениям. Видео-версию доклада в Екатеринбурге см. на techdays.ru )

Что такое HTML5 Canvas и SVG?

HTML5 Canvas

– элемент представляет собой холст для отрисовки растровой графики. Фактически, это пустой блок заданных размеров, на котором можно рисовать с помощью специальных API для JavaScript.

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

Сам элемент определен непосредственно в спецификации HTML5. API для него описывается отдельным документом -- HTML Canvas 2D Context .

SVG

Music Can Be Fun

Красивая музыкально-графическая игра-визуализация (http://musiccanbefun.edankwan.com/).

Примеры схем на SVG

Схема человеческого скелета, переодических система химических элементов и респираторная система (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).

Карты Яндекс

Более близкий пример из реальной жизни – при отрисовке маршрутов используется SVG (если браузер поддерживает). См. также доклад “Карты и SVG” с нашего HTML5 Camp.

Еще примеры :

• Beauty of the Web http://www.beautyoftheweb.com/ – реальные сайты из реального мира
• Dev: unplugged http://contest.beautyoftheweb.com/ – проекты-участники соревнования приложений на HTML5

Разница между Canvas и SVG

В различных сценариях для динамичной отрисовки графики может лучше подходить или Canvas или SVG – к этому вопросу мы еще вернемся в конце. А пока остановимся на ключевых различиях между одним и другим:

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

На практике, правда, уже есть ряд готовых библиотек для визуализации данных, которые частично нивелируют эти различия.

Я не буду вдаваться в основы работы с каждой из технологий, в качестве вводной рекомендую доклад Вадима Макеева (Opera) с HTML5 Camp “Динамическая графика: Canvas и SVG ”.

См. также доклады MIX 2011:

Обработка изображений с помощью Canvas

Одна из примечательных особенностей Canvas заключается в том, что эта технология обеспечивает попиксельный доступ к отображаемым данным и позволяет проектировать на холст различные графические элементы, включая видео.

Хорошим примером того, где это нужно, являюется задача обработки/анализа изображений.

Processing.js предлагает два подхода к описанию визуализации: промежуточный код, в дальнейшем разбираемый самой библиотекой (отдельным файлом или внутри страницы) и явный код на JavaScript.

Например, чтобы нарисовать фрактал множество Мандельброта, можно использовать как вариант, указанный на странице с соответствующим примером , так и такой код на JavaScript:

Попробовать самостоятельно можно здесь: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (копируем код, вставляем в консоль и выполняем).

JavaScript InfoVis Toolkit (JIT)

Для отображения данных JIT принимает исходные значения в виде JSON:

достаточно вызвать отрисовку:

PieChart.loadJSON(json);

jQuery Sparklines

Визуализация на карте с помощью SVG

Переходим к SVG и начнем с простого примера. Представьте себе, что вам нужно отобразить какие-то данные на карте регионов, как это сделать проще всего?

Если у вас есть готовая карта в виде SVG (я взял карту России с сайта Википедии), то это делается очень просто – достаточно, чтобы внутри SVG-документа у каждого региона был свой уникальный id, далее вставляем карту как inline svg и простым кодом раскрашиваем в нужный цвет:

Если сделать все то же самое в цикле, то уже можно раскрасить не просто область, но и целый регион или даже всю страну:

Библиотеки для визуализации данных с помощью SVG

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

Примеры с Canvas мы уже посмотрели, давайте теперь посмотрим на несколько библиотек для работы с SVG. (Это также не исчерпывающий список, но довольно качественные и популярные решения.)

Raphaël

Чтобы добавить простую круговую диаграмму достаточно такого кода:

Несколькими дополнительными операциями можно добавить легенду, подписи к диаграмме и интерактивные подсказки:

Аналогичным образом можно выводить и другие типы диаграмм, используя соответствующие методы. См. примеры непосредственно на сайте расширения http://g.raphaeljs.com/

Highcharts JS

API библиотеки позволяет достаточно легко сгенерировать диаграмму по данным в JSON:

Немного более сложным скриптом можно указать дополнительные детали, например, вывести легенду, настроить подсказки:

При необходимости можно заменить стили по умолчанию на свои собственные.

Что выбрать: Canvas или SVG?

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

Лучше подходит Canvas

• Редактирование растровой графики
• Наложение эффектов на графику/видео
• Генерирование растровой графики (визуализация данных, фракталы, графики функций)
• Анализ изображенией
• Игровая графика (спрайты, фон и т.п.)

Лучше подходит SVG

• Масштабируемые интерфейсы
• Интерактивные интерфейсы
• Диаграммы, схемы
• Векторное редактирование изображений

В графической форме это можно представить так:

Наконец, еще один важный срез, который также важно учитывать в выборе технологии – производительность отрисовки при использовании Canvas и SVG:

На практике Сanvas лучше работает при небольших размерах области отрисовки и на большом числе объектов, в SVG лучше подходит при необходимости масштабирования или вывода на большой экран и на не слишком большом количестве выводимых за раз объектов.

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

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка на страницу графического изображения из файла графического формата производится с помощью тега (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тег

Для увеличения скорости передачи графического изображения в теге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тег

Предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в теге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тег
.
Следующий тег задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

Чтобы задать поля вокруг картинки, надо написать тег вида:

Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тегов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

<Н1>Текст обтекает графику справа
Это - пример совместного использования текста и графики.
Текст программы HTML можно писать в любом текстовом редакторе. При этом используются теги разметки текста.

Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали специальный тег.

Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как изменяется расположение текста.

Рис. 657. Текст обтекает картинку справа

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Векторная графика широко применима в печатной продукции. Что касается веб-сайта, то здесь мы также можем использовать векторную графику посредством SVG или Scalable Vector Graphics (масштабируемая векторная графика). В официальной спецификации W3.org описывается следующим образом:

Язык для описания двумерной графики посредством XML. SVG позволяет нам использовать три типа графических объектов: векторные графические фигуры (например, пути, состоящие из прямых и кривых линий), изображений и текст.

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

Преимущества масштабируемой векторной графики

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

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

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

Сокращение HTTP-запросов

Масштабируемая векторная графика можете быть встроена напрямую в HTML-документ при помощи тега svg, так что браузеру не нужно будет дополнительный запрос для графики. Это также положительно сказывается на производительности веб-сайта.

Стилизация и скриптинг

Прямая интеграция при помощи тега svg также позволит нам стилизовать графику при помощи CSS. Мы можем изменять такие параметры объекта как цвет фона, непрозрачность, границы и так далее, таким же образом, как это происходит в HTML. Мы также можем управлять графикой посредством javascript.

Возможность анимации и редактирования

SVG-объект может быть анимирован при использовании анимационного элемента или посредством JS-библиотеки вроде jQuery. SVG-объект также может быть отредактирован посредством любого текстового редактора или графического ПО вроде (бесплатен) или .

Меньший размер файла

SVG имеет меньший размер файлов в сравнении с растровой графикой.

Рисуем простые фигуры, используя SVG

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

Линия

Для того чтобы нарисовать линию при помощи SVG, мы можем использовать элемент «line». Этот элемент используется для рисования одной прямой линии, поэтому он будет состоять всего из двух точек: начальной и завершающей.

Как вы можете видеть выше, координата начальной точки линии указана в первых двух атрибутах х1 и х2, а координата завершающей точки указана атрибутами y1 и y2.

Здесь также есть два других атрибута: stroke и stroke-width, которые отвечают за цвет и ширину границы. С другой стороны, мы также можем определить эти атрибуты в строчном стиле, следующим образом:

Style="stroke-width:1; stroke:rgb(0,0,0);"
и это даст нам тот же результат.

Ломаная линия

Здесь все очень сходится с «line», но посредством элемента «polyline» мы можем нарисовать несколько линий, вместо одной. Вот пример:

Элемент «polyline» имеет атрибуты точек, которые содержат все координаты линий.

Прямоугольник

Нарисовать прямоугольник мы можем так же просто, только при помощи элемента «rect». Нам только лишь нужно будет указать ширину и высоту:

Окружность

Мы также можем нарисовать окружность посредством элемента «circle». В этом примере мы нарисуем окружность с радиусом 100, который определяется атрибутом r:

Первые два атрибута, cx и cy, определяют центральную координату окружности. В вышеприведенном примере мы выставили 102 как для координаты x, так и для y. Если эти атрибуты не будут заданы, то по умолчанию они будут составлять 0.

Эллипс

Мы можем нарисовать эллипсы посредством элемента «ellipse». Здесь все работает примерно так же, как и с кругом, но на этот раз мы можем управлять отдельно радиусом линии х и радиусом линии y посредством атрибутов rx и ry.

Многоугольник

С помощью элемента «polygon» мы можем рисовать многоугольники, фигуры с несколькими углами и сторонами вроде треугольника, восьмиугольника. Пример:

Применение редактора векторной графики

Как видно, рисовать простые фигуры при помощи SVG в HTML довольно просто. Тем не менее, если нам нужен более сложный объект, то этот метод нам уже не подойдет.

К счастью, как мы уже указали выше, мы можем использовать редактор векторной графики вроде Adobe Illustrator или Inkscape для того, чтобы проделать эту работу. Если вы знакомы с этим ПО, то вы без труда сможете рисовать объекты при помощи удобного интерфейса, нежели при помощи кода HTML.

Либо вы также можете встроить сам svg-файл при помощи одного из следующих элементов: embed, iframe, object.

Результат будет схожим.

В данном примере мы использовали с .

Браузерная поддержка масштабируемой векторной графики

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

Window.onload=function() {
//the Raphael code goes here
}
Внутри тега body вставьте следующий div с id атрибутом rsr.

В завершение

Итак, это и есть основы SVG. Мы надеемся, что теперь вы немного понимаете этот предмет. Это один из лучших способов оптимизировать производительность ваших страниц, и при этом предоставить графику, способную отчетливо отображаться даже на экранах Retina.

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

* (Введение в SVG)
* (SVG: не будем зависеть от разрешения)
* (Почему бы не использовать SVG?)

Спасибо за чтение, и надеемся, что данная статья окажется полезной вам!

Внимание! У вас нет прав для просмотра скрытого текста.