Векторная графика SVG
Scalable Vector Graphics масштабируемая векторная графика - язык разметки, созданный W 3 C консорциумом c 1999 года для описания графических данных на веб-странице в виде текста (XML). Однако термин SVG может означать не только сам язык разметки, но и формат получаемого изображения. На SVG можно создавать несложные векторные и смешанные векторно-растровые изображения. В отличие от VML, SVG полностью открыт и бесплатен. Текущая версия - 1. 1, выпущена в 2001 году, в настоящий момент идет разработка и утверждение версии 1. 2. SVG рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т. п. Визуально оценить часть возможностей формата SVG и познакомиться с синтаксисом разметки можно на странице онлайн-редактора.
Масштабируемая векторная графика Название отражает следующие превосходства языка: SVG–документы могут быть отображены на самых различных устройствах – от экранов мобильных телефонов и карманных компьютеров(рис) до мониторов PC и ноутбуков SVG–графика может быть создана «на лету» при помощи любого языка программирования (Javascript, Java или C#) и возможно управление видом этой графики в режиме работы приложения
Поддержка SVG браузерами Браузеры Internet Explorer 7, Opera (начиная с 8 -й версии) и Mozilla способны самостоятельно, без дополнительных утилит воспроизводить формат SVG. Для прочих браузеров – в том числе и Internet Explorer 6, то им для воспроизведения нужны плагины. SVG также может быть встроен в PDF документ. Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). На сайте W 3 C размещен официальный список программного обеспечения для SVG (http: //www. svgi. org/)
Создание SVG документов Запускаем блокнот, вводим в него код Шаблон документа SVG выглядит следующим образом: <? xml version="1. 0" encoding="utf-8"? > стандартное объявление XML – документа <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG ссылка на DTD-схему документа версии 1. 1//EN" "http: //www. w 3. org/Graphics/SVG/1. 1/DTD/sv g 11. dtd"> <svg width="200" height="100" тег <svg> описывает содержимое SVG xmlns="http: //www. w 3. org/2000/svg" документа version="1. 1"> </svg> Атрибуты width и height определяют значения ширины и высоты документа (здесь в пикселях). Внутри тега указывается пространство имен и версия документа при помощи соответствующих тегов xmlns и version. Будем применять полное описание. Простые элементы графики будут отображаться правильно, но сложные элементы, относящиеся к спецификации 1. 1, могут быть не выведены. Лучше сразу привыкать правильно оформлять SVG–документы.
Порядок действий Открываем в блокноте шаблон Shablon_SVG. txt Между тегами <svg …> и </svg> пишем команду, например <rect x="50" y="40" width="100" height="30" fill="blue"/> Сохраняем шаблон в свою папку, называя его Simple. SVG. txt Меняем расширение файла на Simple. SVG. svg Открываем в браузере Simple. SVG. svg и видим синий прямоугольник
Порядок действий
Значения оси абсцисс возрастают при движении слева направо, а оси ординат – при движении сверху вниз При загрузке документа в браузер он располагается, начиная с верхнего левого угла видимой области. Поэтому выбранная система координат достаточно удобна.
Документ вместе с прямоугольником будет выглядеть относительно координатных осей так:
Текст Элемент text предназначен для помещения в SVG – документ символьных данных. Как и в случае графических фигур координаты x и y текстовой строки отсчитываются от верхнего левого угла. <text x="50" y="50"> Сюда помещается текстовый фрагмент </text> Текст, помещаемый в SVG документ, может быть индексирован поисковыми системами.
Основные фигуры SVG – графики Линия. (line) Для ее создания задаются координаты начальной и конечной точек <line x 1="20" y 1="10" x 2="190" y 2="90"/> Линия с заданием цвета и толщины. Приведенные значения совпадают с принятыми по умолчанию. <line x 1="20" y 1="10" x 2="190" y 2="90" stroke="tomato" stroke-width="10"/>
Основные фигуры SVG – графики Прямоугольник (rect) Атрибуты x, y задают координаты верхнего левого угла прямоугольника, а width и height определяют его ширину и высоту. По умолчанию прямоугольник не имеет контура и заливается черным цветом. <rect x="50" y="40" width="100" height="30"/> Атрибут "stroke" задает цвет контура. Атрибут "stroke-width" определяет толщину контура в пикселях. <rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/>
Основные фигуры SVG – графики Элемент circle Атрибуты x, y задают координаты центра окружности, а r определяет ее радиус. По умолчанию фигура не имеет контура и заливается черным цветом. <circle cx="100" cy="50" r="40"/> Элемент ellipse Атрибуты cx и cy задают центр фигуры, а rx и ry определяют длины горизонтальной и вертикальной осей соответственно. По умолчанию фигура не имеет контура и заливается черным цветом. <ellipse cx="100" cy="50" rx="60" ry="40"/> <ellipse cx="100" cy="50" rx="60" ry="40" fill="none" stroke="orange" stroke-width="4"/>
Основные фигуры SVG – графики При расположении нескольких объектов в одном документе важен их вертикальный порядок (z–order). Пример: есть код, в котором создаются прямоугольник, полигон (polygon) и окружность <rect x="10" y="10" width="180" height="80" fill="green"/> <polygon points="20, 20 180, 20 20, 90" fill="blue"/> <circle cx="90" cy="60" r="25" fill="red"/> Строка кода, описывающая окружность, располагается самой последней. На рисунке эти фигуры будут располагаться в обратном порядке – так, окружность будет самой первой в стопке объектов Можно сделать простой вывод – фрагмент кода, представляющий какой-либо объект, добавленный позже всех, графически будет располагаться выше всех.
Основные фигуры SVG – графики
Элемент animate предназначен для анимации отдельного свойства объекта. Рассмотрим следующий фрагмент кода: <rect y="40" width="20" height="20" fill="red"> <animate attribute. Name="x" from="0" to="200" dur="10 s" repeat. Count="indefinite"/> </rect> Внутри тега rect элемента прямоугольник помещен элемент animate. В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attribute. Name="x". Границы изменения (в пикселях) устанавливаются от нуля (from="0") до двухсот (to="200"). По умолчанию, анимация начнется сразу после загрузки в браузер, и будет продолжаться в течении 10 секунд (dur="10 s"). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение (repeat. Count="indefinite"). Работает в ОПЕРЕ
SVG Преимущества, недостатки SVG Основным преимуществом SVG перед другими форматами, применяемыми в Интернете, является то, что SVG картинка представляет из себя простой текстовый файл. Такой файл можно открыть и отредактировать любым текстовым редактором, а также серверным скриптом. Также SVG может похвастаться поддержкой анимации, причем не покадровой, как в GIF, а c очень широкой системой управления. Единственным существенным недостатком SVG является большой вес сложных рисунков, но данную неприятность легко устранить с помощью технологии gzip сжатия. Настоящее и будущее SVG картинка может являться частью веб-страницы, наряду со слоями, таблицами и т. п. тегами. Каждый элемент SVG является и элементом DOM, тоесть маленькой частичкой страницы. А это открывает очень большие возможности для вебмастеров. С помощью Java. Script можно управлять рисунком и наладить взаимосвязь пользователя и рисунка. SVG отлично сочетается со стилями CSS. SVG в сочетании с другими технологиями HTML 5 и Java. Script вполне может выступать конкурентом Flash. Учитывая, что Flash является плагином к браузеру, а SVG неотъемлемой частью веб- страницы, не нужно быть ясновидцем, чтобы предугадать, что произойдет в ближайшее время. С развитием Интернета, SVG приобретает все большую и большую популярность, сегодня почти все современные браузеры поддерживают данную технологию. В ногу со временем и браузерами идут веб-разработчики, которые видят за данной технологией будущее Интернета.
Выполните самостоятельно 1 64 1 48 Опишите рисунок последовательностью векторных команд. Подпишите рисунок Автор: Фамилия Имя
Домашнее задание выполнить средствами SVG 1 Нарисуйте свой рисунок. Опишите свой рисунок последовательностью векторных команд. Подпишите рисунок Автор: Фамилия Имя
Скачать презентацию Векторная графика SVG Scalable Vector Graphics масштабируемая
rastr_svg.ppt