SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
10
Mon
SVG
Масштабируемая векторная графика (Scalable Vector Graphics —
SVG) является языком разметки расширенным из XML для описания
двухмерной векторной графики. SVG по существу является графикой,
так же, как XHTML — текстом.
SVG является рекомендацией W3C (то есть, стандартом)
<svg> <!--SVG content--> </svg>
<img src="logo.svg" alt="Company Logo“ >
.el {background: url(mySVG.svg);}
<object type="image/svg+xml" data="mySVG.svg">
<!--fallback-->
</object>
<embed type="image/svg+xml" src="mySVG.svg" />
<iframe src="mySVG.svg">
<!--fallback-->
</iframe>
Шесть способов подключить svg
Базовые фигуры
Прямоугольник Круг Эллипс
Ломаная линия Многоугольник Элемент <text>
Элемент path
Данные path содержатся в
атрибуте d внутри
элемента <path>, определяя
форму фигуры: <path
d="<конкретные данные
path>" />.
<svg width="258px" height="184px">
<path fill="#7AA20D" stroke="#7AA20D"
stroke-width="9" stroke-linejoin="round"
d="M248.761,92c0,9.801-7.93,17.731-
17.71,17.731c-0.319,0-0.617,0-0.935-
0.021c-10.035,37.291-51.174,65.206-
100.414,65.206 c-49.261,0-90.443-27.979-
100.435-65.334c-0.765,0.106-1.531,0.149-
2.317,0.149c-9.78,0-17.71-7.93-17.71-
17.731 c0-9.78,7.93-17.71,17.71-
17.71c0.787,0,1.552,0.042,2.317,0.149C39.
238,37.084,80.419,9.083,129.702,9.083
c49.24,0,90.379,27.937,100.414,65.228h0.0
21c0.298-0.021,0.617-0.021,0.914-
0.021C240.831,74.29,248.761,82.22,248.761
,92z" />
</svg>
Рабочая область
Область просмотра устанавливается атрибутами height и width в
элементе <svg>.
viewBox дает возможность указать, что данный набор графических
элементов растягивается, чтобы уместиться в определенный элемент-
контейнер. Эти значения включают четыре числа, разделённые запятыми
или пробелами: min-x, min-y, width и height
<svg width="115" height="190" viewBox="0 0 115 190">
<!--<path <контур изображения груши> />-->
</svg>
<svg width="115px" height="190px" viewBox="0 0 65 140">
<!--<path <контур изображения груши> />-->
</svg>
Заливки
• Атрибут fill раскрашивает внутреннюю часть определённого
графического элемента. Это заливка может состоять из сплошного
цвета, градиента или паттерна.
• Внутренняя часть фигуры определяется путём анализа всех
подконтуров и параметров, описанных в fill-rule.
• Допустимые значения fill-rule -
nonzero, evenodd, inherit.
Градиент
<svg width="405" height="105">
<defs>
<linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0%" stop-color="#BBC42A" />
<stop offset="100%" stop-color="#ED6E46" />
</linearGradient>
</defs>
<rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>
• Атрибут stroke определяет закрашивание «границы» конкретных
фигур и контуров.
• У следующего изображения будет сиреневая обводка:
stroke = "#765373".
stroke-linecap stroke-linejoin
Обводка
Организация документа
Элемент g
Элемент g является контейнером
для группировки связанных
графических элементов.
Элемент use
Элемент <use> позволяет повторно
использовать элементы в любом
месте документа.
• Элемент defs
Графика внутри
элемента <defs> не
отображается на холсте,
но на нее можно
ссылаться и затем
отображать ее
посредством xlink:href.
<svg>
<defs>
<linearGradient id="Gradient-1">
<stop offset="0%" stop-color="#bbc42a" />
<stop offset="100%" stop-color="#765373" />
</linearGradient>
</defs>
<rect x="10" y="10" width="200" height="100" fill= "url(#Gradient-1)"
stroke="#333333" stroke-width="3px" />
</svg>
Элемент symbol
Элемент <symbols> похож на <g>, так как предоставляет
возможность группировать элементы, однако, элементы
внутри <symbols> не отображаются визуально (как и в <defs>) до
тех пор, пока не будут вызваны с помощью элемента <use>.
Также, в отличие от элемента <g>, <symbols> устанавливает
свою собственную систему координат, отдельно от области
просмотра, в которой он отображается.
Практические примеры
Графические приложения, позволяющие
создавать SVG-графику
•Adobe Illustrator
•CorelDRAW Graphics Suite
•Mayura Draw
•Sketsa SVG Editor
•Inkscape
Основные библиотеки для работы с SVG
• Vivus - http://maxwellito.github.io/vivus/
• Bonsai - https://bonsaijs.org/
• Velocity - http://julian.com/research/velocity/
• Raphaël - http://raphaeljs.com/ (http://g.raphaeljs.com/)
• Snap - http://snapsvg.io/
• Lazy Line Painter - http://lazylinepainter.info/
• SVG.js - http://svgjs.com/
• Walkway - https://github.com/ConnorAtherton/walkway
HIGHCHARTS JS
$('#container').highcharts({
chart: {
renderTo: 'charts', defaultSeriesType: 'bar'
},
title: {
text: 'Сравнение'
},
xAxis: {
categories: ['Ром', 'Коньяк', 'Виски']
},
yAxis: {
title: { text: 'Стопок выпито за вечер' }
},
series: [{ name: 'Женя', data: [1, 0, 4] },
{ name: 'Саша', data: [5, 7, 3]}]
});
CANVAS vs. SVG
(СРАВНЕНИЕ)
CANVAS SVG
Формат Растровый Векторный
Масштабирование Zoom Scale
Доступ Доступ к отдельным пикселям (RGBA) Доступ к отдельным элементам
(DOM)
Индексируемость и
Accessibility
Виден только конечный растр (нельзя выделить
фигуры, текст и т.п.) — плохо для Accessibility
Можно посмотреть структуру
(например, вытащить весь текст)
Стилизация Визуальные стили задаются при отрисовке через
API
Визуальные стили задаются
атрибутами, можно подключать CSS
Программирование JS API для работы с примитивами DOM для работы с элементами
Обновление Для обновления — рисование поверх или полная
перерисовка
Возможно изменение отдельных
элементов
События Нет легкого способа для обработки событий
мыши. Объекты под курсором надо определять
вручную.
Легко вешаются события от мыши
через DOM, обрабатываются
автоматически.
Интеграция кода Код на JS отдельно от Canvas Внутрь можно включать JS
Лучше подходит Canvas
•Редактирование растровой
графики
•Наложение эффектов на
графику/видео
•Генерирование растровой
графики (визуализация
данных, фракталы, графики
функций)
•Анализ изображенией
•Игровая графика (спрайты,
фон и т.п.)
Лучше подходит SVG
•Масштабируемые
интерфейсы
•Интерактивные интерфейсы
•Диаграммы, схемы
•Векторное редактирование
изображений
Производительность отрисовки при
использовании Canvas и SVG
Полезные ссылки
Примеры и учебники:
1. Примеры svg-графики с применением фильтров обработки изображений
2. Учебник на русском
3. Учебник на английском
4. Учебник Jacoba Jenkova
Доклады:
1. Приручаем SVG – Лев Солнцев
2. Dmitry Baranovskiy - You Don't Know SVG
3. Introduction to SVG and RaphaelJS
Таблица
СПАСИБО ЗА ВНИМАНИЕ

Weitere ähnliche Inhalte

Ähnlich wie Svg

Оптимизация графики на практике
Оптимизация графики на практикеОптимизация графики на практике
Оптимизация графики на практикеTimophy Chaptykov
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Yandex
 
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17MoscowJS
 
Редактор Mail.ru. Frontend
Редактор Mail.ru. FrontendРедактор Mail.ru. Frontend
Редактор Mail.ru. FrontendAlexander Rusakov
 
Михаил Черномордиков Ie9
Михаил Черномордиков   Ie9Михаил Черномордиков   Ie9
Михаил Черномордиков Ie9Siel01
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkAlbina Tiupa
 
Sergey Chikuyonok Css Animation
Sergey Chikuyonok  Css AnimationSergey Chikuyonok  Css Animation
Sergey Chikuyonok Css Animationrit2010
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда7bits
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ontico
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikovyaevents
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Yandex
 
Javascript in modern scala backend. [russian]
Javascript in modern scala backend.  [russian]  Javascript in modern scala backend.  [russian]
Javascript in modern scala backend. [russian] Ruslan Shevchenko
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 
CSS. Практика
CSS. ПрактикаCSS. Практика
CSS. ПрактикаVitebsk Miniq
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10OdessaFrontend
 
JavaScript & modern scala backend
JavaScript & modern scala backendJavaScript & modern scala backend
JavaScript & modern scala backendGeeksLab Odessa
 
Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014Yandex
 

Ähnlich wie Svg (20)

Оптимизация графики на практике
Оптимизация графики на практикеОптимизация графики на практике
Оптимизация графики на практике
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Canvas
CanvasCanvas
Canvas
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"
 
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
"Ractive.js — реактивные усы!" Ефим Соловьев, MoscowJS 17
 
Редактор Mail.ru. Frontend
Редактор Mail.ru. FrontendРедактор Mail.ru. Frontend
Редактор Mail.ru. Frontend
 
Михаил Черномордиков Ie9
Михаил Черномордиков   Ie9Михаил Черномордиков   Ie9
Михаил Черномордиков Ie9
 
Андрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass frameworkАндрей Тюпа Оптимизация верстки Sass + Compass framework
Андрей Тюпа Оптимизация верстки Sass + Compass framework
 
Sergey Chikuyonok Css Animation
Sergey Chikuyonok  Css AnimationSergey Chikuyonok  Css Animation
Sergey Chikuyonok Css Animation
 
МАПО Лаба №1
МАПО Лаба №1МАПО Лаба №1
МАПО Лаба №1
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
 
Js templating stepan_reznikov
Js templating stepan_reznikovJs templating stepan_reznikov
Js templating stepan_reznikov
 
Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"Степан Резников "Шаблонизация на клиенте"
Степан Резников "Шаблонизация на клиенте"
 
Javascript in modern scala backend. [russian]
Javascript in modern scala backend.  [russian]  Javascript in modern scala backend.  [russian]
Javascript in modern scala backend. [russian]
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 
CSS. Практика
CSS. ПрактикаCSS. Практика
CSS. Практика
 
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10
 
JavaScript & modern scala backend
JavaScript & modern scala backendJavaScript & modern scala backend
JavaScript & modern scala backend
 
Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014Как мы документируем программные интерфейсы. YaC 2014
Как мы документируем программные интерфейсы. YaC 2014
 

Svg

  • 2. SVG Масштабируемая векторная графика (Scalable Vector Graphics — SVG) является языком разметки расширенным из XML для описания двухмерной векторной графики. SVG по существу является графикой, так же, как XHTML — текстом. SVG является рекомендацией W3C (то есть, стандартом)
  • 3. <svg> <!--SVG content--> </svg> <img src="logo.svg" alt="Company Logo“ > .el {background: url(mySVG.svg);} <object type="image/svg+xml" data="mySVG.svg"> <!--fallback--> </object> <embed type="image/svg+xml" src="mySVG.svg" /> <iframe src="mySVG.svg"> <!--fallback--> </iframe> Шесть способов подключить svg
  • 5. Прямоугольник Круг Эллипс Ломаная линия Многоугольник Элемент <text>
  • 6. Элемент path Данные path содержатся в атрибуте d внутри элемента <path>, определяя форму фигуры: <path d="<конкретные данные path>" />. <svg width="258px" height="184px"> <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9.801-7.93,17.731- 17.71,17.731c-0.319,0-0.617,0-0.935- 0.021c-10.035,37.291-51.174,65.206- 100.414,65.206 c-49.261,0-90.443-27.979- 100.435-65.334c-0.765,0.106-1.531,0.149- 2.317,0.149c-9.78,0-17.71-7.93-17.71- 17.731 c0-9.78,7.93-17.71,17.71- 17.71c0.787,0,1.552,0.042,2.317,0.149C39. 238,37.084,80.419,9.083,129.702,9.083 c49.24,0,90.379,27.937,100.414,65.228h0.0 21c0.298-0.021,0.617-0.021,0.914- 0.021C240.831,74.29,248.761,82.22,248.761 ,92z" /> </svg>
  • 7. Рабочая область Область просмотра устанавливается атрибутами height и width в элементе <svg>. viewBox дает возможность указать, что данный набор графических элементов растягивается, чтобы уместиться в определенный элемент- контейнер. Эти значения включают четыре числа, разделённые запятыми или пробелами: min-x, min-y, width и height <svg width="115" height="190" viewBox="0 0 115 190"> <!--<path <контур изображения груши> />--> </svg> <svg width="115px" height="190px" viewBox="0 0 65 140"> <!--<path <контур изображения груши> />--> </svg>
  • 8. Заливки • Атрибут fill раскрашивает внутреннюю часть определённого графического элемента. Это заливка может состоять из сплошного цвета, градиента или паттерна. • Внутренняя часть фигуры определяется путём анализа всех подконтуров и параметров, описанных в fill-rule. • Допустимые значения fill-rule - nonzero, evenodd, inherit.
  • 9. Градиент <svg width="405" height="105"> <defs> <linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0%" stop-color="#BBC42A" /> <stop offset="100%" stop-color="#ED6E46" /> </linearGradient> </defs> <rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" /> </svg>
  • 10. • Атрибут stroke определяет закрашивание «границы» конкретных фигур и контуров. • У следующего изображения будет сиреневая обводка: stroke = "#765373". stroke-linecap stroke-linejoin Обводка
  • 12. Элемент g Элемент g является контейнером для группировки связанных графических элементов. Элемент use Элемент <use> позволяет повторно использовать элементы в любом месте документа.
  • 13. • Элемент defs Графика внутри элемента <defs> не отображается на холсте, но на нее можно ссылаться и затем отображать ее посредством xlink:href. <svg> <defs> <linearGradient id="Gradient-1"> <stop offset="0%" stop-color="#bbc42a" /> <stop offset="100%" stop-color="#765373" /> </linearGradient> </defs> <rect x="10" y="10" width="200" height="100" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="3px" /> </svg>
  • 14. Элемент symbol Элемент <symbols> похож на <g>, так как предоставляет возможность группировать элементы, однако, элементы внутри <symbols> не отображаются визуально (как и в <defs>) до тех пор, пока не будут вызваны с помощью элемента <use>. Также, в отличие от элемента <g>, <symbols> устанавливает свою собственную систему координат, отдельно от области просмотра, в которой он отображается.
  • 16. Графические приложения, позволяющие создавать SVG-графику •Adobe Illustrator •CorelDRAW Graphics Suite •Mayura Draw •Sketsa SVG Editor •Inkscape
  • 17. Основные библиотеки для работы с SVG • Vivus - http://maxwellito.github.io/vivus/ • Bonsai - https://bonsaijs.org/ • Velocity - http://julian.com/research/velocity/ • Raphaël - http://raphaeljs.com/ (http://g.raphaeljs.com/) • Snap - http://snapsvg.io/ • Lazy Line Painter - http://lazylinepainter.info/ • SVG.js - http://svgjs.com/ • Walkway - https://github.com/ConnorAtherton/walkway
  • 18. HIGHCHARTS JS $('#container').highcharts({ chart: { renderTo: 'charts', defaultSeriesType: 'bar' }, title: { text: 'Сравнение' }, xAxis: { categories: ['Ром', 'Коньяк', 'Виски'] }, yAxis: { title: { text: 'Стопок выпито за вечер' } }, series: [{ name: 'Женя', data: [1, 0, 4] }, { name: 'Саша', data: [5, 7, 3]}] });
  • 20. CANVAS SVG Формат Растровый Векторный Масштабирование Zoom Scale Доступ Доступ к отдельным пикселям (RGBA) Доступ к отдельным элементам (DOM) Индексируемость и Accessibility Виден только конечный растр (нельзя выделить фигуры, текст и т.п.) — плохо для Accessibility Можно посмотреть структуру (например, вытащить весь текст) Стилизация Визуальные стили задаются при отрисовке через API Визуальные стили задаются атрибутами, можно подключать CSS Программирование JS API для работы с примитивами DOM для работы с элементами Обновление Для обновления — рисование поверх или полная перерисовка Возможно изменение отдельных элементов События Нет легкого способа для обработки событий мыши. Объекты под курсором надо определять вручную. Легко вешаются события от мыши через DOM, обрабатываются автоматически. Интеграция кода Код на JS отдельно от Canvas Внутрь можно включать JS
  • 21. Лучше подходит Canvas •Редактирование растровой графики •Наложение эффектов на графику/видео •Генерирование растровой графики (визуализация данных, фракталы, графики функций) •Анализ изображенией •Игровая графика (спрайты, фон и т.п.) Лучше подходит SVG •Масштабируемые интерфейсы •Интерактивные интерфейсы •Диаграммы, схемы •Векторное редактирование изображений
  • 23. Полезные ссылки Примеры и учебники: 1. Примеры svg-графики с применением фильтров обработки изображений 2. Учебник на русском 3. Учебник на английском 4. Учебник Jacoba Jenkova Доклады: 1. Приручаем SVG – Лев Солнцев 2. Dmitry Baranovskiy - You Don't Know SVG 3. Introduction to SVG and RaphaelJS Таблица