TheSlide.ru

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

Содержание

1. Векторная графика в Web
2. Векторная графика в WebВекторная графика — способ
3. Об SVGSVG (Scalable Vector Graphics) – язык
4. Пример простого изображения в формате SVG
5. Способы внедрения SVG на веб-страницуС помощью тега
6. Вставка с помощью тега или свойства background-imageС
7. Непосредственная вставка кода в документ My first SVG
8. Внедрение с помощью тега Не сработало!
9. Графические примитивыСпецификация SVG предоставляет разработчику использование графических примитивов: ЛинияПолилиния (ломанная)ПрямоугольникОкружность
10. ЛинияЛиния задаётся двумя точками через 4 атрибута: Параметры отрисовки можно задать в стиле: style="stroke-width:1; stroke:rgb(0,0,0);"
11. Линия
12. Ломанная линияЛоманная задаётся через тег polyline и атрибут points
13. Ломанная линия
14. Прямоугольник
15. Окружность
16. Эллипс
17. Многоугольник
18. Внедрение стилей circle { fill: #ffc; stroke:
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/
20. Лабораторная работаНаписать скрипт для построения столбчатой диаграммы
21. Скачать презентанцию

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

Главная
Разное
Векторная графика в Web

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

Слайд 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;
}

Слайд 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. Здесь удобно хранить и делиться своими презентациями с другими пользователями.

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