Масштабируемая векторная графика в HTML5. Вставка графических изображений Теги для работы с графикой
Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью 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) которые используются для определения цвета и ширины линии соответственно.
Данный объект похож на
Элемент
Прямоугольник выводится с помощью элемента
Для вывода круга используем элемент
Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.
Для вывода эллипса используем элемент
Элемент
Использование редактора для векторной графики
Вывод простых объектов 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.
В большинстве 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 будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.
Базовые концепции и использование
Формат масштабируемой векторной графики (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 Graphics – масштабируемая векторная графика) – стандарт векторной графики , разработанный консорциумом W3C.
SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.
SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.
Последней версией полной спецификации является SVG 1.1.
SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.
Достоинства SVG
- Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
- Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
- SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
- Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
- Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
- В SVG изображение можно добавить несколько ссылок.
- К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.
Вставка SVG на Web-страницу
SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg .
Итак, способы вставки SVG-изображения на Web-страницу:
- прямая вставка кода в HTML-документ в контейнере ;
- использование SVG-файла в качестве фонового изображения;
- подключение SVG-файла в HTML-документ с помощью тегов img , embed , object и iframe ;
- подключение SVG-файла в PHP-документ с помощью функции include .
1. Прямая вставка SVG-кода в Web-документ
2. Использование SVG-файла в качестве фонового изображения
3. Подключение SVG-файла с помощью тега img
