Комплексная Образовательная Система
"Интернет"
~~~ KOCI.INUMO.RU ~~~

За скромным заголовком данного урока "тег <svg>" стоит новая мощная технология отображения информации с помощью векторной графики (в отличии от Канваса, изученного нами на прошлом уроке и графических файлов типа png, jpg, gif и пр.)

SVG (Scalable Vector Graphics, Масштабируемая Векторная Графика) входит в подмножество расширяемого языка разметки XML.

На веб страничках информацию в формате SVG можно представлять в двух видах.

В виде тега <svg></svg>:

В виде отдельного файла *.svg:

Первый способ (в виде тега <svg>) делает функционал SVG похожим на тег <canvas> (Канвас), а второй способ (в виде отдельного файла *.svg) делает его похожим на графические файлы png, jpg, gif и т.п.

Пояснения:

• <svg></svg> - тег svg является парным для обоих способов.
• width="800" - определяет ширину объекта SVG.
• height="600" - определяет высоту объекта SVG.
• начальная точка объекта SVG - это левая верхняя точка и она имеет координаты (0, 0).
• конечная точка объекта SVG - это правая нижняя точка и она имеет координаты (width, height).

Основные особенности функционала SVG:

• Нет потерь качества при сжатии-растяжении - Объекты SVG не теряют качество, если менять их размер, сжимать-растягивать и т.д. Это особенность векторной графики. (SVG graphics do NOT lose any quality if they are zoomed or resized).
• Эффекты анимации - Каждый элемент и каждый атрибут в объекте (файле) SVG может быть анимирован (Every element and every attribute in SVG files can be animated).
• Код объекта SVG - обычный текст - Изображения в формате SVG можно создавать в любом текстовом редакторе (также, как, например, мы редактируем код HTML). Это важное отличие файлов SVG от других графических файлов. Но надо отметить, что на рынке имеется специальный софт, как бесплатный, так и платный для редактирования файлов SVG в визуальном режиме. (SVG images can be created and edited with any text editor).
• Поиск, индексация, программирование, сжатие - Изображения SVG индексируются поисковиками, могут быть сжаты архиватором - сжатые файлы имеют расширение *.svgz. Для любого элемента внутри SVG можно назначить управление событиями (SVG images can be searched, indexed, scripted, and compressed. You can attach JavaScript event handlers for an element.).
• Оперативное реагирование на изменения SVG со стороны браузера - Каждая фигура в SVG запоминается браузером как объект. Если какие-то атрибуты изменились в объекте SVG, браузер может автоматически переделать отображение фигуры. (In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.).

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

Некоторые ключевые моменты кодировки на SVG: В целом рисунок получается такой.



Посмотреть тестовый пример можно здесь:
svg-teg.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
svg-file.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте... svg01.svg ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_036.zip ← скачайте пример, чтобы установить на свой сайт...