🗊Презентация Векторная графика в 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
Загрузить презентацию