🗊Презентация Векторная графика в Web

Категория: Интернет
Нажмите для полного просмотра!
Векторная графика в Web, слайд №1Векторная графика в Web, слайд №2Векторная графика в Web, слайд №3Векторная графика в Web, слайд №4Векторная графика в Web, слайд №5Векторная графика в Web, слайд №6Векторная графика в Web, слайд №7Векторная графика в Web, слайд №8Векторная графика в Web, слайд №9Векторная графика в Web, слайд №10Векторная графика в Web, слайд №11Векторная графика в Web, слайд №12Векторная графика в Web, слайд №13Векторная графика в Web, слайд №14Векторная графика в Web, слайд №15Векторная графика в Web, слайд №16Векторная графика в Web, слайд №17Векторная графика в Web, слайд №18Векторная графика в Web, слайд №19Векторная графика в Web, слайд №20
Скачать
Вы можете ознакомиться и скачать презентацию на тему Векторная графика в Web. Доклад-сообщение содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


Векторная графика в Web Лекция 6
Описание слайда:
Векторная графика в Web Лекция 6

Слайд 2


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

Слайд 3


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

Слайд 4


Пример простого изображения в формате SVG <?xml version="1.0" encoding="UTF-8" standalone="no"?> <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"> <rect x="0" y="0" width="400" height="400" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/> <g fill-opacity="0.6" stroke="black" stroke-width="0.5px"> <circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" /> <circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" /> <circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" /> </g> </svg>
Описание слайда:
Пример простого изображения в формате SVG <?xml version="1.0" encoding="UTF-8" standalone="no"?> <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"> <rect x="0" y="0" width="400" height="400" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/> <g fill-opacity="0.6" stroke="black" stroke-width="0.5px"> <circle cx="200px" cy="200px" r="104px" fill="red" transform="translate( 0,-52)" /> <circle cx="200px" cy="200px" r="104px" fill="blue" transform="translate( 60, 52)" /> <circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" /> </g> </svg>

Слайд 5


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

Слайд 6


Вставка с помощью тега <img> или свойства background-image С помощью тега img: <img src="kiwi.svg" alt="Киви на овале"> С помощью свойства background-image: <a href="/" class="logo">Kiwi Corp </a> .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }
Описание слайда:
Вставка с помощью тега <img> или свойства background-image С помощью тега img: <img src="kiwi.svg" alt="Киви на овале"> С помощью свойства background-image: <a href="/" class="logo">Kiwi Corp </a> .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

Слайд 7


Непосредственная вставка кода в документ <!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
Описание слайда:
Непосредственная вставка кода в документ <!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>

Слайд 8


Внедрение с помощью тега <object> <object type="image/svg+xml" data="picture.svg"> Не сработало! </object>
Описание слайда:
Внедрение с помощью тега <object> <object type="image/svg+xml" data="picture.svg"> Не сработало! </object>

Слайд 9


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

Слайд 10


Линия Линия задаётся двумя точками через 4 атрибута: <svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> Параметры отрисовки можно задать в стиле: style="stroke-width:1; stroke:rgb(0,0,0);"
Описание слайда:
Линия Линия задаётся двумя точками через 4 атрибута: <svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> Параметры отрисовки можно задать в стиле: style="stroke-width:1; stroke:rgb(0,0,0);"

Слайд 11


Линия <svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Линия <svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 12


Ломанная линия Ломанная задаётся через тег polyline и атрибут points <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Ломанная линия Ломанная задаётся через тег polyline и атрибут points <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 13


Ломанная линия <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Ломанная линия <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 14


Прямоугольник <svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Прямоугольник <svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 15


Окружность <svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Окружность <svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 16


Эллипс <svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Эллипс <svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 17


Многоугольник <svg> <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Описание слайда:
Многоугольник <svg> <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>

Слайд 18


Внедрение стилей <svg width="200px" height="200px" viewBox="0 0 200 200"> <defs> <style type="text/css"> <![CDATA[ circle { fill: #ffc; stroke: blue; stroke-width: 2; stroke-dasharray: 5 3 } ]]> </style> </defs> <circle cx="20" cy="20" r="10" /> <circle cx="60" cy="20" r="15" /> <circle cx="20" cy="60" r="10" style="fill: #cfc" /> <circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;" /> </svg>
Описание слайда:
Внедрение стилей <svg width="200px" height="200px" viewBox="0 0 200 200"> <defs> <style type="text/css"> <![CDATA[ circle { fill: #ffc; stroke: blue; stroke-width: 2; stroke-dasharray: 5 3 } ]]> </style> </defs> <circle cx="20" cy="20" r="10" /> <circle cx="60" cy="20" r="15" /> <circle cx="20" cy="60" r="10" style="fill: #cfc" /> <circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;" /> </svg>

Слайд 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 На основе входных данных определить цену деления шкалы на оси ординат. Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию