Разделы презентаций


Векторная графика в Web

Содержание

Векторная графика в WebВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).Векторная графика не теряет в качестве при масштабированииДля Web был разработан стандарт векторной графики SVG

Слайды и текст этой презентации

Слайд 1Векторная графика в Web
Лекция 6

Векторная графика в WebЛекция 6

Слайд 2Векторная графика в Web
Векторная графика — способ представления графики в

виде графических примитивов (геометрических контуров и линий).
Векторная графика не теряет

в качестве при масштабировании
Для Web был разработан стандарт векторной графики SVG (Scalable Vector Graphics).
Векторная графика в WebВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).Векторная

Слайд 3Об SVG
SVG (Scalable Vector Graphics) – язык разметки векторной графики

на основе XML.
Преимущества:
Стили и скрипты: при помощи CSS можно менять

параметры графики, а при помощи JavaScript задавать интерактивность
Поддержка анимации.

Об SVGSVG (Scalable Vector Graphics) – язык разметки векторной графики на основе XML.Преимущества:Стили и скрипты: при помощи

Слайд 4Пример простого изображения в формате SVG

version = "1.1" baseProfile="full" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"

xmlns:ev = "http://www.w3.org/2001/xml-events" height = "400px" width = "400px">








Пример простого изображения в формате SVG

Слайд 5Способы внедрения SVG на веб-страницу
С помощью тега
С помощью свойства

background-image
Непосредственная вставка кода в документ
С помощью тега

Способы внедрения SVG на веб-страницуС помощью тега С помощью свойства background-imageНепосредственная вставка кода в документС помощью тега

Слайд 6Вставка с помощью тега или свойства background-image
С помощью тега

img:


С помощью свойства background-image:
Kiwi

Corp
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}
Вставка с помощью тега или свойства background-imageС помощью тега img:С помощью свойства background-image:Kiwi Corp .logo {	display: block;	text-indent:

Слайд 7Непосредственная вставка кода в документ



My first SVG

cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />


Непосредственная вставка кода в документ	My first SVG

Слайд 8Внедрение с помощью тега

Не сработало!

Внедрение с помощью тега Не сработало!

Слайд 9Графические примитивы
Спецификация SVG предоставляет разработчику использование графических примитивов:
Линия
Полилиния (ломанная)
Прямоугольник
Окружность

Графические примитивыСпецификация SVG предоставляет разработчику использование графических примитивов: ЛинияПолилиния (ломанная)ПрямоугольникОкружность

Слайд 10Линия
Линия задаётся двумя точками через 4 атрибута:

y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>

Параметры отрисовки можно задать в стиле: style="stroke-width:1; stroke:rgb(0,0,0);"


ЛинияЛиния задаётся двумя точками через 4 атрибута:	 Параметры отрисовки можно задать в стиле: style=

Слайд 11Линия



Линия

Слайд 12Ломанная линия
Ломанная задаётся через тег polyline и атрибут points

50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>

Ломанная линияЛоманная задаётся через тег polyline и атрибут points

Слайд 13Ломанная линия



Ломанная линия

Слайд 14Прямоугольник




Прямоугольник

Слайд 15Окружность




Окружность

Слайд 16Эллипс




Эллипс

Слайд 17Многоугольник




Многоугольник

Слайд 18Внедрение стилей
circle {
fill:

#ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]>

cx="60" cy="20" r="15" />
Внедрение стилей   	circle {		fill: #ffc;		stroke: blue;		stroke-width: 2;		stroke-dasharray: 5 3	} ]]>

Слайд 19Полезные ссылки
http://www.w3.org/TR/SVG/
http://habrahabr.ru/post/157087/
http://koulikov.com/wp-content/uploads/2012/11/svg/index.htm
http://pepelsbey.net/pres/web-in-curves/ - Веб в кривых. Второе рождение

SVG.
http://frontender.info/using-svg/
https://openclipart.org/

Полезные ссылкиhttp://www.w3.org/TR/SVG/ http://habrahabr.ru/post/157087/http://koulikov.com/wp-content/uploads/2012/11/svg/index.htm http://pepelsbey.net/pres/web-in-curves/ - Веб в кривых. Второе рождение SVG. http://frontender.info/using-svg/ https://openclipart.org/

Слайд 20Лабораторная работа
Написать скрипт для построения столбчатой диаграммы в формате SVG


На основе входных данных определить цену деления шкалы на оси

ординат.
Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5

Лабораторная работаНаписать скрипт для построения столбчатой диаграммы в формате SVG На основе входных данных определить цену деления

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика