При помощи какого тега интегрируется графика. Масштабируемая векторная графика в HTML5

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

Формат масштабируемой векторной графики (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-страницы.

Для включения изображения в определенном месте страницы существует тег . Этот тег имеет обязательный параметр: SRC="", и несколько необязательных. Параметр SRC="" указывает браузеру адрес, где искать рисунок и в качестве значения должен иметь URL-адрес ресурса, где размещен графический файл. В простейшем случае этот файл будет размещен в корневом каталоге или в папке IMG Вашего сайта. Необязательные параметры:

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

Параметры WIDTH="" HEIGHT="" в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше "дергаться". Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.

Параметр BORDER="" прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.

Параметр ALIGN= определяет положение изображения на странице, и может принимать значения TOP - выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, TEXTTOP - выравнивает верхнюю границу изображения по самому высокому текстовому элементу текущей строки, MIDDLE - выравнивает середину изображения по базовой линии текущей строки, ABSMIDDLE - выравнивает середину изображения посередине текущей строки. BASELINE или BOTTOM - выравнивает нижнюю границу изображения по базовой линии текущей строки, ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки, HSPACE= - определяет отступ по горизонтали, VSPACE= - определяет отступ по вертикали.

Синтаксис тэга:

Бегущая строка

Бегущая строка задается тегом .

Атрибутами этого тэга являются bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию)

Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

Синтаксис тега: текст

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различныз тегов:

- для вставки фонового звука;

- для вставки видео в формате AVI;

- для вставки звуковых и видеофайлов;