You are on page 1of 35

Масштабируемая векторная графика

Scalable Vector Graphics
SVG — язык разметки масштабируемой векторной графики,
созданный Консорциумом Всемирной паутины (W3C) и
входящий в подмножество расширяемого языка разметки XML,
предназначен для описания двумерной векторной и смешанной
векторно-растровой графики в формате XML.

http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

2

http://www.adobe.com/svg
SVG files provide resolution independent, high resolution dots per inch
(HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The
ability to style SVG with CSS and the support of scripting and animation makes SVG an
integral part of the web platform.
SVG is ideal for interactive, data-driven, personalized graphics. It is a royaltyfree, vendor neutral open standard developed under the W3C (World Wide Web
Consortium) process, and widely supported by modern web browsers.

3

М. он ИНДЕКСИРУЕТСЯ ПОИСКОВЫМИ МАШИНАМИ. значение атрибута data — имя файла с расширением «. Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS.svg». В SVG обеспечивается событийная модель. 4 © Филиппов Ф. проф. события мыши. SVG не является чьей-либо собственностью. изменение ее параметров. разработанного также консорциумом W3C. меньше по размеру.А. выдавливание. МАСШТАБИРУЕМОСТЬ — cуществует возможность увеличить любую часть изображения SVG без потери качества. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. В отличие от некоторых других форматов. клавиатуры и др.Бонч-Бруевича . подобных применяемым при обработке растровых изображений (размытие. SVG-элементами можно управлять с помощью JavaScript.) SVG — ОТКРЫТЫЙ СТАНДАРТ. а не изображением. Элементы SVG совместимы с HTML и DHTML. доцент СПбГУТ им. К элементам SVG документа МОЖНО ПРИМЕНЯТЬ ФИЛЬТРЫ — специальные модификаторы для создания эффектов. а также хорошо поддаются сжатию.Характеристика SVG o o o o o o o o ТЕКСТОВЫЙ ФОРМАТ — файлы SVG можно читать и редактировать . СОВМЕСТИМОСТЬ С CSS (Cascading Style Sheets).) Текст в графике SVG является текстом. Внешний SVG подключаются через тег <object>. чем сравнимые по качеству изображения в форматах JPEG или GIF. SVG документы легко ИНТЕГРИРУЮТСЯ С HTML И XHTML документами. АНИМАЦИЯ реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language). не нужно создавать дополнительные метафайлы для поисковых роботов.В. отслеживаются события (загрузка страницы.. сложные системы трансформации и др. поэтому его можно выделять и копировать.

ссылки в текущем файле.      автор. расширяемость.Бонч-Бруевича . анимация. информация для поисковых агентов. проблемы несовместимости. М. ссылки на внешние файлы. фильтрация (маски). доступная концепция реализации. цвет. проф. Интерактивность:       Метаданные: масштабирование. Средства разработки:   кроссплатформенная поддержка. шрифты. активное меню. SVG 5 © Филиппов Ф. семантическая группировка.. прозрачность.В.        фигуры. выбор отдельных элементов. авторское право. доцент СПбГУТ им. слои. широкое применение.А. название. возможность динамического редактирования документа.Общие требования W3C Scalable Graphics Requirements Качественная графика: Открытая спецификация:      доступность для любого исполнителя. формат изображения для физической печати.

Преимущества “vector” Растровое изображение содержит в себе информацию о точках. а векторное — о фигурах. М.А. проф.Бонч-Бруевича . Здесь показано ключевое преимущество «вектора» над «растром». доцент СПбГУТ им.В.. SVG 6 © Филиппов Ф.

Бонч-Бруевича .html SVG 7 © Филиппов Ф.Примеры http://www. доцент СПбГУТ им.. проф.ru/2013-02/svg/index.В.03www.А. М.

д. многоугольники. проф. окружности.)  С помощью JavaScript можно описывать самые сложные сценарии.  На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик. эллипсы. описывающей путь от начальной точки до конечной через любые промежуточные координаты.  Каждый отдельный элемент и целое изображение можно различными способами анимировать. связанные с математическими вычислениями координат и пропорций фигур. п. скругление углов и т. квадратичные кривые и т.А.  Широкий спектр визуальных свойств.Cинтаксис  Описание основных геометрических фигур (линии. SVG 8 © Филиппов Ф. М.  Описание путей .Бонч-Бруевича . прямоугольники. наведение курсора. нажатие клавиши и т.. которые можно применить к фигурам и путям: окраска. доцент СПбГУТ им.).В.позволяет задать любую траекторию компактной строкой. прозрачность.д.

10 90.. М. доцент СПбГУТ им.10 10.10 100.А.Бонч-Бруевича .100" /> ПРЯМОУГОЛЬНИК <rect x="50" y="50" width="400" height="200" rx="20" /> МНОГОУГОЛЬНИК <polygon points="10.ru/2013-02/svg/index. проф.10 100.03www.В.Описание простых геометрических фигур http://www.50 40.150 " stroke="black" /> ОКРУЖНОСТЬ <circle cx="140" cy="140" r="54" fill=“none” stroke=“blue”/> КРУГ <circle cx="140" cy="140" r="54" fill=“red” stroke-width="5"/> ЭЛЛИПС <ellipse cx="140" cy="140" rx="50" ry="100" fill="yellow"/> © Филиппов Ф.html ПРЯМАЯ ЛИНИЯ <line x1="10" y1="10" x2="300" y2="20" stroke="black" /> ЛОМАНАЯ <polyline points="10.100 100.

М. Q — определяет квадратичность кривой.10. Пример: M10 10 Q 160. доцент СПбГУТ им. Кубические (Cubic) кривые Для описания кубической кривой требуется четыре точки: P0.10 P0 — M10. Начало рисования. P1. P1 и P2 которые определяют форму кривой. P2 — 200. которая изменяет траекторию кривой. P2 и P3.150 .150 200.10 300.А..10. Теория кривых Пьера Безье 10 © Филиппов Ф.10.Бонч-Бруевича . Контрольная точка. Пример: M10 10 C 160. Финальная точка.150. определяющие форму кривой. проф. Направляющие. P1 и P2 — 160.150 P0 — M10 10 .150 200. которые отклоняют линию от прямой. С — определяет тип (кубичность) кривой. Финальная точка. P1 — 160.150 и 200. Начало рисования.В. P3 — 300.Описание сложных контуров Квадратичные (Quadratic) кривые Квадратичная кривая Пьера Безье опирается на три опорные точки P0.

числа — её параметры (чаще всего — координаты).В. описывающей путь от начальной точки до конечной через любые промежуточные координаты: • cтрока задаётся атрибутом d тега path и содержит команды. V) и кривых Безье (P0. <path d="M10 10 H100 L10 100 H100 Z" stroke="black" fill="none" /> M\m — начало пути пара координат: x и y L\l — линия к точке по двум координатам. C). М. • буква определяет тип команды. H\h — горизонтальная линия к точке по одной координате x. Z\z — линия к начальной точке пути.А. проф. H.Описание путей <path> Позволяет задать любую траекторию компактной строкой.. P3. V\v — вертикальная линия к точке по одной координате y. SVG 11 © Филиппов Ф. состоящие из отрезков прямых (L. доцент СПбГУТ им. P2. закодированные набором букв и чисел.Бонч-Бруевича . • команды позволяют описывать фигуры. Q. P1.

to — конечное значение параметра. XML или auto.А.В. attributeType . 12 © Филиппов Ф.может принимать значения: CSS. from и to .. attributeName — имя анимируемого атрибута. проф. attributeName . 6.Бонч-Бруевича .в общем. attributeType — тип анимируемого атрибута. repeatCount . эти два параметра зависят от того. 5. что за свойство мы анимируем. 3. from — начальное значение параметра.все свойства объекта влияющие на его внешний вид потенциально могут быть анимированы.Анимация параметров объекта <animate> Для задания анимации внутри тега описывающего объект следует поместить тег <animate> со следующими параметрами: 1. 4. dur — продолжительность анимации. repeatCount — количество анимационных циклов. М. доцент СПбГУТ им. 2.количество анимационных циклов должно быть представлено числом или словом indefinite.

<animate attributeType="XML" attributeName="fill" from="red" to="yellow" <?xml version="1..org/2000/svg"> repeatCount="indefinite" /> <title>Circle animation</title> <circle cx="140" cy="140" fill="red" r=""> <animate attributeType="XML" attributeName="r" from="25" to="100" dur="5s" repeatCount="indefinite" /> </circle> </svg> Примеры анимации 13 © Филиппов Ф. доцент СПбГУТ им.0" encoding="UTF-8"?> dur="5s" <svg version="1. проф. М.w3.В.А.Бонч-Бруевича .1" xmlns="http://www.

Бонч-Бруевича . } </style> </head> <body> <div>Hello.. доцент СПбГУТ им.масштабирование div { width:200px.перемещение <html> rotate() . проф. http://xhtml. skew() – скручивание по осям x и y height:100px.Трансформации в CSS3 http://xhtml.вращение <head> <style> scale() . text-align:right.ru/post/135816/ Методы 2D трансформаций: Перемещения и трансформации в CSS translate() . matrix() – изменение по 6-ти параметрам background-color:yellow.il/ru/CSS3/3D-трансформации Методы 3D трансформаций: rotateX() rotateY() -ms-transform:rotate(30deg). ИСиТ!</div> </body> </html> 14 © Филиппов Ф.В.А.co.il/ru/CSS3/2D-трансформации http://habrahabr. М.co.

которые используются в CSS3. а в качестве attributeType можно указать XML или CSS.Анимация трансформаций <animateTransform> Для создания трансформаций в SVG подобных тем. можно пользоваться свойством transform. <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="ForestGreen" additive="replace" from="0" to="360" dur="2s" repeatCount="indefinite" /> 15 . Перечень возможных трансформаций совпадает со списком из CSS3. В attributeName кладем transform. Для анимации этих трансформаций можно использовать тег <animateTransform>.

org/2000/svg"> <title>Rotate rect</title> <g transform="translate(200.А. доцент СПбГУТ им.200)"> <rect fill="ForestGreen" width="200" height="100"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="ForestGreen" additive="replace" from="0" to="360" dur="2s" repeatCount="indefinite" /> </rect> </g> </svg> rotate_rect.0" encoding="UTF-8"?> <svg version="1.w3. М.svg 16 © Филиппов Ф. проф.1" xmlns="http://www.В.Бонч-Бруевича .Анимация трансформаций пример <?xml version="1..

М.В. проф.0" encoding="UTF-8"?> <svg version="1.Анимация цвета <animateColor> <?xml version="1.org/2000/svg"> <title>Animation size and color</title> <circle fill="" cx="340" cy="340" r=""> <animate attributeType="XML" attributeName="r" from="5" to="230" dur="10s" repeatCount="indefinite" /> <animateColor attributeName="fill" from="red" to="green" dur="5s" repeatCount="indefinite" /> </circle> </svg> КРУГ_РАЗМЕР_ЦВЕТ.Бонч-Бруевича .А.1" xmlns="http://www.w3..svg 17 © Филиппов Ф. доцент СПбГУТ им.

0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1. М.Анимация CSS атрибута пример <?xml version="1.org/2000/svg" version="1.w3.org/Graphics/SVG/1.w3.В.1/DTD/svg11.. доцент СПбГУТ им.Бонч-Бруевича . проф.dtd"> <svg width="300" height="200" xmlns="http://www.1//EN" "http://www.А.1"> <rect x="95" y="45" width="80" height="80" fill="none" stroke="red"> <animate attributeType="CSS" attributeName="stroke-width" from="0" to="75" dur="5s" repeatCount="indefinite"/> </rect> </svg> КВАДРАТ 18 © Филиппов Ф.

В. Самой важной частью тега animateMotion является параметр path который определяет путь объекта в пространстве. http://y3x.А. Как описывать простой контур с помощью path-data можно прочитать в заметке «рисуем простую контурную линию» и в заметке про то как легко можно «нарисовать сложные контуры».Анимация движения Еще одним интересным подходом к анимации объектов в SVG является анимация движения.Бонч-Бруевича . Этот путь строится в полном соответствии с правилами описания тега <path>.ru/2011/07/svg-animatemotion/ 19 © Филиппов Ф. доцент СПбГУТ им. В спецификации этот подход представлен тегом <animateMotion>.. проф. М.

Указывает общую продолжительность анимации. проф. accumulate . restart Отвечает за перезагрузку анимации. repeatCount .В..html 20 © Филиппов Ф.Анимация движения атрибуты <animateMotion> Синтаксис: <animateMotion path="M20 20 L 40 0" dur="10s" /> Применяемые атрибуты: begin Определяет начало анимации. values Универсальный способ задания контрольных значений для анимации.Определяет количество повторений анимации. как значение анимации будет добавляться к базовому значению атрибута. max Определяет максимальное значение при котором анимация может быть активной. end Определяет конец анимации.Задает режим интерполяции для анимации.pro/svg/spravochnik/elementy/animatemotion. М.Бонч-Бруевича . fill Дает возможность оставить эффект от анимации. calcMode . min Определяет минимальное значение при котором анимация может быть активной.Определяет. repeatDur . additive Определяет.А. доцент СПбГУТ им. from Задает начальное значение анимации to Задает конечное значение анимации by Задает относительное значение смещения анимации dur Определяет продолжительность анимации http://webix. как будет "накапливаться" анимация при нескольких повторениях.

Анимация движения пример <svg width="300px" height="200px" version="1.7 -53.55 16.А. доцент СПбГУТ им.32 3.w3.-96 z " /> </circle> animateMotion </svg> 21 © Филиппов Ф.-28 8.69 26.В..-10 74.0 -56. М.-53 23.24 20.43 38.62 46.-55 90.-85 -19.0 c 0.6 66.9 59.-38 14.1" viewbox="0 0 300 200" xmlns="http://www.Бонч-Бруевича .org/2000/svg"> <rect x="2" y="2" width="296" height="196" style="fill:#000000.2 18.stroke:#cbcbcb" stroke-width="2px" /> <circle cx="75" cy="60" r="15" fill="yellow" > <animateMotion begin="2s" dur="5s" repeatCount="indefinite" path="m 0. проф.

svg НЛО: НЛО над городом.В. М.А.ru/examples/svg/map..Бонч-Бруевича .htm Спутники: СПУТНИК_3. проф.svg 22 © Филиппов Ф.narod.Анимация движения примеры Движение по карте: http://dunaevv1. доцент СПбГУТ им.svg Траектория: MovingEx_1.

SVG также можно использовать для генерирования текста.com/developerworks/ru/library/wa-scalable/ 23 © Филиппов Ф.А.ibm. как показано в листинге 17 .В. http://www. доцент СПбГУТ им. проф..Текст и SVG Помимо создания базовых геометрических фигур.Бонч-Бруевича .19. М.

М.Бонч-Бруевича .А..В.svg SVG 24 © Филиппов Ф. проф. доцент СПбГУТ им.Эффекты в SVG Тень: ТЕНЬ.

svg" type="image/svg+xml" /> Включение XML-файла SVG с помощью элемента <object> <object data="circle.В.width: 100%. доцент СПбГУТ им."> <svg xmlns="http://www. М. padding: 30px.org/2000/svg" version="1.svg" type="image/svg+xml"></object> Включение XML-файла SVG с помощью элемента <iframe> <iframe src="circle1.А. проф.svg"></iframe> 25 © Филиппов Ф.w3.Включение SVG на Web-страницы Прямая вставка XML-кода SVG в HTML-документ <html> <head> <title>Embedded SVG</title> </head> <body style="height: 600px.1"> <circle cx="100" cy="50" r="40" fill="red"/> </svg> </body> </html> Включение XML-файла SVG с помощью элемента <embed> <embed src="circle..Бонч-Бруевича .

где анимация покадровая. каждый элемент может стать актером на сцене — холсте. проф. В отличие от GIF. М. Как и SVG.В. рекомендованный W3C для описания мультимедийных презентаций..SMIL — режиссер геометрических фигур SMIL — язык разметки. доцент СПбГУТ им.Бонч-Бруевича . Анимация в SVG осуществляется средствами этого языка. SMIL представляет из себя простой XML. в SVG каждой отдельной геометрической фигуре можно присвоить свои инструкции по поведению.А. Synchronized Multimedia Integration Language SVG 26 © Филиппов Ф.

SMIL и JavaScript К сожалению. ведь это язык разметки.А.элемент DOM. Пример использования библиотеки http://raphaeljs.getElementById. анимацию лучше реализовывать посредством языка программирования JavaScript. Если есть необходимость вычислять сложные траектории полета фигур.. проф.В.координаты места на карте мира.setAttribute. Очень удобно использовать библиотеку Raphael.svg. поэтому никаких сложностей: доступ к элементу . М. С полным списком доступных для создания SVGграфики приложений можно ознакомиться по адресу: http://wiki.дело техники.Бонч-Бруевича .org/Design_Tools.com/world/ . изменение значения атрибута . SMIL не умеет считать. а остальное . доцент СПбГУТ им. Каждый элемент SVG рисунка . 27 © Филиппов Ф.

03www. доцент СПбГУТ им.html SVG 28 © Филиппов Ф.Примеры Ключевые значения и время Слайд шоу Картография Часы http://www.ru/2013-02/svg/index.В. М.Бонч-Бруевича .А.. проф.

не теряет качества при изменении размера.Бонч-Бруевича . масштабируется. поддерживает стандартизированную модель DOM. 29 © Филиппов Ф.В. SVG работает на всех современных браузерах. проф.А. доцент СПбГУТ им. интегрирован с HTML и XHTML. W3C рекомендует использование формата SVG. фильтруется и анимируется. может индексироваться поисковыми системами. может работать под управлением JavaScript и CSS.SVG – резюме          текстовый формат и открытый стандарт.. М.

SVG Viewer.  Apple Safari. Экспорт  Adobe Illustrator. SVG 30 © Филиппов Ф.А. доцент СПбГУТ им.Приложения Редакторы    Inkscape. Браузеры  Mozilla Firefox. проф. М.Бонч-Бруевича .. SVG-edit.В.  Google Chrome.  Internet Explorer.  Scribus.  Opera.  CorlDraw.

inkscape.org/ 31 .http://www.

В.А.объемные изображения в Inkscape © Филиппов Ф. доцент СПбГУТ им.Inkscape http://habrahabr.Бонч-Бруевича 32 . проф.ru/post/81633/ .. М.

html SVG Tutorial http://www. доцент СПбГУТ им.com/tutorials/basics/index.Бонч-Бруевича 33 . применение маски и наложение Фильтры Интерактивность Связывание Скрипты Анимация Шрифт Метаданные http://apike. М. проф.1 определены 14 функциональных групп: Пути Основные фигуры Текст Заливка Цвет Градиенты и шаблоны Обрезка.org/TR/SVG/ В спецификации SVG 1.В.w3..htm Tutorials © Филиппов Ф.kevlindev.ca/prog_svg.А.http://www.

No comments! 34 .

com/svg/ 35 © Филиппов Ф.А.В.w3schools. проф.Бонч-Бруевича . доцент СПбГУТ им.http://www.. М.