Векторная графика в Web - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Векторная графика в Web. Доклад-сообщение содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

Об SVG SVG (Scalable Vector Graphics) – язык разметки векторной графики на основе XML. Преимущества: Стили и скрипты: при помощи CSS можно менять параметры графики, а при помощи JavaScript задавать интерактивность Поддержка анимации.

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

Способы внедрения 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

Слайд 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: blue; stroke-width: 2; stroke-dasharray: 5 3 } ]]>

Слайд 19

Описание слайда:

Полезные ссылки - Веб в кривых. Второе рождение SVG.

Слайд 20

Описание слайда:

Лабораторная работа Написать скрипт для построения столбчатой диаграммы в формате SVG На основе входных данных определить цену деления шкалы на оси ординат. Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5

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

Похожие презентации