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

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

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

Пример простого изображения в формате SVG = "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 на веб-страницу
С помощью тега
С помощью свойства background-image
Непосредственная вставка кода в документ
С помощью тега
Слайд 6
Вставка с помощью тега
или свойства background-image
С помощью тега img:
src="kiwi.svg" alt="Киви на овале">
С помощью свойства 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
cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Слайд 8
Внедрение с помощью тега
Не сработало!
Слайд 9
Графические примитивы
Спецификация SVG предоставляет разработчику использование графических примитивов:
Линия
Полилиния (ломанная)
Прямоугольник
Окружность
Слайд 10
Линия
Линия задаётся двумя точками через 4 атрибута:
stroke-width="1" stroke="rgb(0,0,0)"/>
Параметры отрисовки можно задать в стиле:
style="stroke-width:1; stroke:rgb(0,0,0);"
Слайд 11
Линия
Слайд 12
Ломанная линия
Ломанная задаётся через тег polyline и атрибут points
150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
Слайд 13
Ломанная линия
Слайд 14
Прямоугольник
Слайд 15
Окружность
Слайд 16
Эллипс
Слайд 17
Многоугольник
Слайд 18
Внедрение стилей
<br> circle {<br> fill: #ffc;<br> stroke:</div></h2><div class="slides-content">blue;<br> stroke-width: 2;<br> stroke-dasharray: 5 3<br> } <br>
Слайд 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/
Имя файла: Векторная-графика-в-Web.pptx
Количество просмотров: 85
Количество скачиваний: 0
Скачать
- Предыдущая
Гели, способы получения, область применения
Следующая -
Лекарственная форма: Настойка
Похожие презентации
: Новогодние игрушки – шарики, хлопушки!!!
Дорожная карта по управляемому перетоку работников компании
Пешеходная улица в Сыктывкаре
Презентация Реакции замещения, 8 класс
Перспективные технологии и материалы XXI века
Сочинение по картине М.А.Врубеля Царевна-лебедь
Игровая презентация Репка Часть 1
Проект Скоро в школу!
Изделия из жести
Niedrożność jelit
Развивающая предметно-пространственная среда по физическому развитию детей дошкольного возраста
Электронно-дырочный переход
Решение задач по теории вероятностей
Туберкулинодиагностика. Туберкулиндік сынамаларды орындау әдістері мен техникасы
Мы - граждане России
Изображение на координатной плоскости множества решений уравнений и неравенств с двумя переменными и их систем
Текстовые редакторы. Урок 10
Авиационная, высотная, космическая физиология. Особенности адаптации человека к условиям космоса
Средства тиражирования документов
День лингвиста
Фрезерование. Обработка канавок
Искусство Древней Руси
Лики материнской любви. Роль матери в воспитании ребенка
Нахождение значений дробных выражений. 6 класс
Эмоциональное воспитание дошкольников
Электронное портфолио студента
Идентификация и воздействие на человека вредных и опасных факторов
Светофор и я. Правила дорожного движения для дошкольников
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:79555,name:m,category:G,count:H,jpg:"jpg\u002F79555",hits:85,download:b,h1:"Векторная графика в Web презентация",meta:{h1:m,title:m,description:"Векторная графика в Web презентация на тему, доклад, Без категории",keywords:"Векторная графика в Web, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Без категории",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Векторная графика в Web из раздела Без категории. Презентация на заданную тему содержит 20 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).\u003Cbr\u003EВекторная графика не теряет в качестве при масштабировании\u003Cbr\u003EДля Web был разработан стандарт векторной г",file:"Векторная-графика-в-Web.pptx",texts:["\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EЛекция 6\u003Cbr\u003E","\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).\u003Cbr\u003EВекторная графика не теряет в качестве при масштабировании\u003Cbr\u003EДля Web был разработан стандарт векторной графики SVG (Scalable Vector Graphics).\u003Cbr\u003E","\u003Cp\u003EОб SVG\u003Cbr\u003E\u003Cp\u003ESVG (Scalable Vector Graphics) – язык разметки векторной графики на основе XML.\u003Cbr\u003EПреимущества:\u003Cbr\u003EСтили и скрипты: при помощи CSS можно менять параметры графики, а при помощи JavaScript задавать интерактивность\u003Cbr\u003EПоддержка анимации.\u003Cbr\u003E","\u003Cp\u003EПример простого изображения в формате SVG\u003Cbr\u003E\u003Cp\u003E\u003C?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?\u003E \u003Cbr\u003E\u003Csvg version = \"1.1\" baseProfile=\"full\" xmlns = \"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" xmlns:xlink = \"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxlink\" xmlns:ev = \"http:\u002F\u002Fwww.w3.org\u002F2001\u002Fxml-events\" height = \"400px\" width = \"400px\"\u003E\u003Cbr\u003E\u003Crect x=\"0\" y=\"0\" width=\"400\" height=\"400\" fill=\"none\" stroke=\"black\" stroke-width=\"5px\" stroke-opacity=\"0.5\"\u002F\u003E\u003Cbr\u003E\u003Cg fill-opacity=\"0.6\" stroke=\"black\" stroke-width=\"0.5px\"\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"red\" transform=\"translate( 0,-52)\" \u002F\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"blue\" transform=\"translate( 60, 52)\" \u002F\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"green\" transform=\"translate(-60, 52)\" \u002F\u003E\u003Cbr\u003E\u003C\u002Fg\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EСпособы внедрения SVG на веб-страницу\u003Cbr\u003E\u003Cp\u003EС помощью тега \u003Cimg\u003E\u003Cbr\u003EС помощью свойства background-image\u003Cbr\u003EНепосредственная вставка кода в документ\u003Cbr\u003EС помощью тега \u003Cobject\u003E\u003Cbr\u003E","\u003Cp\u003EВставка с помощью тега \u003Cimg\u003E или свойства background-image\u003Cbr\u003E\u003Cp\u003EС помощью тега img:\u003Cbr\u003E\u003Cimg src=\"kiwi.svg\" alt=\"Киви на овале\"\u003E\u003Cbr\u003EС помощью свойства background-image:\u003Cbr\u003E\u003Ca href=\"\u002F\" class=\"logo\"\u003EKiwi Corp \u003C\u002Fa\u003E\u003Cbr\u003E.logo {\u003Cbr\u003E\tdisplay: block;\u003Cbr\u003E\ttext-indent: -9999px;\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 82px;\u003Cbr\u003E\tbackground: url(kiwi.svg);\u003Cbr\u003E\tbackground-size: 100px 82px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНепосредственная вставка кода в документ\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\t\u003Ch1\u003EMy first SVG\u003C\u002Fh1\u003E\u003Cbr\u003E\t\u003Csvg width=\"100\" height=\"100\"\u003E\u003Cbr\u003E\t\t\u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \u002F\u003E \t\u003C\u002Fsvg\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E \u003Cbr\u003E","\u003Cp\u003EВнедрение с помощью тега \u003Cobject\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cobject type=\"image\u002Fsvg+xml\" data=\"picture.svg\"\u003E\u003Cbr\u003EНе сработало!\r\n\u003C\u002Fobject\u003E\u003Cbr\u003E","\u003Cp\u003EГрафические примитивы\u003Cbr\u003E\u003Cp\u003EСпецификация SVG предоставляет разработчику использование графических примитивов: \u003Cbr\u003EЛиния\u003Cbr\u003EПолилиния (ломанная)\u003Cbr\u003EПрямоугольник\u003Cbr\u003EОкружность\u003Cbr\u003E","\u003Cp\u003EЛиния\u003Cbr\u003E\u003Cp\u003EЛиния задаётся двумя точками через 4 атрибута:\u003Cbr\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cline x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E \u003Cbr\u003EПараметры отрисовки можно задать в стиле:\r\nstyle=\"stroke-width:1; stroke:rgb(0,0,0);\" \u003Cbr\u003E","\u003Cp\u003EЛиния\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cline x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЛоманная линия\u003Cbr\u003E\u003Cp\u003EЛоманная задаётся через тег polyline и атрибут points\u003Cbr\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolyline points=\"0,0 50,0 150,100 250,100 300,150\" fill=\"rgb(249,249,249)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЛоманная линия\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolyline points=\"0,0 50,0 150,100 250,100 300,150\" fill=\"rgb(249,249,249)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EПрямоугольник\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Crect width=\"200\" height=\"200\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EОкружность\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"102\" cy=\"102\" r=\"100\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЭллипс\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cellipse cx=\"100\" cy=\"50\" rx=\"100\" ry=\"50\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EМногоугольник\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolygon 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)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EВнедрение стилей\u003Cbr\u003E\u003Cp\u003E\u003Csvg width=\"200px\" height=\"200px\" viewBox=\"0 0 200 200\"\u003E\r\n\u003Cdefs\u003E\r\n\u003Cstyle type=\"text\u002Fcss\"\u003E\r\n\u003C![CDATA[\u003Cbr\u003E\tcircle {\u003Cbr\u003E\t\tfill: #ffc;\u003Cbr\u003E\t\tstroke: blue;\u003Cbr\u003E\t\tstroke-width: 2;\u003Cbr\u003E\t\tstroke-dasharray: 5 3\u003Cbr\u003E\t} \u003Cbr\u003E]]\u003E\r\n\u003C\u002Fstyle\u003E\r\n\u003C\u002Fdefs\u003E\r\n\u003Ccircle cx=\"20\" cy=\"20\" r=\"10\" \u002F\u003E\r\n\u003Ccircle cx=\"60\" cy=\"20\" r=\"15\" \u002F\u003E\r\n\u003Ccircle cx=\"20\" cy=\"60\" r=\"10\" style=\"fill: #cfc\" \u002F\u003E\r\n\u003Ccircle cx=\"60\" cy=\"60\" r=\"15\" style=\"stroke-width: 1; stroke-dasharray: none;\" \u002F\u003E\r\n\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EПолезные ссылки\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fwww.w3.org\u002FTR\u002FSVG\u002F \u003Cbr\u003Ehttp:\u002F\u002Fhabrahabr.ru\u002Fpost\u002F157087\u002F\u003Cbr\u003Ehttp:\u002F\u002Fkoulikov.com\u002Fwp-content\u002Fuploads\u002F2012\u002F11\u002Fsvg\u002Findex.htm \u003Cbr\u003Ehttp:\u002F\u002Fpepelsbey.net\u002Fpres\u002Fweb-in-curves\u002F - Веб в кривых. Второе рождение SVG. \u003Cbr\u003Ehttp:\u002F\u002Ffrontender.info\u002Fusing-svg\u002F \u003Cbr\u003Ehttps:\u002F\u002Fopenclipart.org\u002F \u003Cbr\u003E","\u003Cp\u003EЛабораторная работа\u003Cbr\u003E\u003Cp\u003EНаписать скрипт для построения столбчатой диаграммы в формате SVG \u003Cbr\u003EНа основе входных данных определить цену деления шкалы на оси ординат. \u003Cbr\u003E Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5\u003Cbr\u003E"],href:"\u002Funcategorized\u002Fvektornaya-grafika-v-web",href_category:"\u002Funcategorized",date:1627183163,related:[{id:533808,name:": Новогодние игрушки – шарики, хлопушки!!!",href:"\u002Funcategorized\u002F-novogodnie-igrushki--shariki-hlopushki",jpg:"jpg\u002F533808"},{id:67076,name:"Дорожная карта по управляемому перетоку работников компании",href:"\u002Funcategorized\u002Fdorozhnaya-karta-po-upravlyaemomu-peretoku-rabotnikov",jpg:"jpg\u002F67076"},{id:168802,name:"Пешеходная улица в Сыктывкаре",href:"\u002Funcategorized\u002Fpeshehodnaya-ulitsa-v-syktyvkare",jpg:"jpg\u002F168802"},{id:558303,name:"Презентация Реакции замещения, 8 класс",href:"\u002Funcategorized\u002Fprezentatsiya-reaktsii-zameshcheniya-8-klass",jpg:"jpg\u002F558303"},{id:408855,name:"Перспективные технологии и материалы XXI века",href:"\u002Funcategorized\u002Fperspektivnye-tehnologii-i-materialy-xxi-veka",jpg:"jpg\u002F408855"},{id:60802,name:"Сочинение по картине М.А.Врубеля Царевна-лебедь",href:"\u002Funcategorized\u002Fsochinenie-po-kartine-mavrubelya-tsarevna-lebed",jpg:"jpg\u002F60802"},{id:502865,name:"Игровая презентация Репка Часть 1",href:"\u002Funcategorized\u002Figrovaya-prezentatsiya-repka-chast-1",jpg:"jpg\u002F502865"},{id:463847,name:"Проект Скоро в школу!",href:"\u002Funcategorized\u002Fproekt-skoro-v-shkolu-1",jpg:"jpg\u002F463847"},{id:564882,name:"Изделия из жести",href:"\u002Funcategorized\u002Fizdeliya-iz-zhesti",jpg:"jpg\u002F564882"},{id:36702,name:"Niedrożność jelit",href:"\u002Funcategorized\u002Fniedrono-jelit",jpg:"jpg\u002F36702"},{id:32969,name:"Развивающая предметно-пространственная среда по физическому развитию детей дошкольного возраста",href:"\u002Funcategorized\u002Frazvivayushchaya-predmetno-prostranstvennaya-sreda-po-fizicheskomu",jpg:"jpg\u002F32969"},{id:75724,name:"Электронно-дырочный переход",href:"\u002Funcategorized\u002Felektronno-dyrochnyy-perehod",jpg:"jpg\u002F75724"},{id:42346,name:"Решение задач по теории вероятностей",href:"\u002Funcategorized\u002Freshenie-zadach-po-teorii-veroyatnostey-1",jpg:"jpg\u002F42346"},{id:77524,name:"Туберкулинодиагностика. Туберкулиндік сынамаларды орындау әдістері мен техникасы",href:"\u002Funcategorized\u002Ftuberkulinodiagnostika-tuberkulindk-synamalardy-oryndau-dster-men",jpg:"jpg\u002F77524"},{id:74480,name:"Мы - граждане России",href:"\u002Funcategorized\u002Fmy-grazhdane-rossii-2",jpg:"jpg\u002F74480"},{id:79181,name:"Изображение на координатной плоскости множества решений уравнений и неравенств с двумя переменными и их систем",href:"\u002Funcategorized\u002Fizobrazhenie-na-koordinatnoy-ploskosti-mnozhestva-resheniy",jpg:"jpg\u002F79181"},{id:65366,name:"Текстовые редакторы. Урок 10",href:"\u002Funcategorized\u002Ftekstovye-redaktory-urok-10",jpg:"jpg\u002F65366"},{id:51766,name:"Авиационная, высотная, космическая физиология. Особенности адаптации человека к условиям космоса",href:"\u002Funcategorized\u002Faviatsionnaya-vysotnaya-kosmicheskaya-fiziologiya-osobennosti-adaptatsii",jpg:"jpg\u002F51766"},{id:23761,name:"Средства тиражирования документов",href:"\u002Funcategorized\u002Fsredstva-tirazhirovaniya-dokumentov",jpg:"jpg\u002F23761"},{id:92614,name:"День лингвиста",href:"\u002Funcategorized\u002Fden-lingvista",jpg:"jpg\u002F92614"},{id:269522,name:"Фрезерование. Обработка канавок",href:"\u002Funcategorized\u002Ffrezerovanie-obrabotka-kanavok",jpg:"jpg\u002F269522"},{id:21219,name:"Искусство Древней Руси",href:"\u002Funcategorized\u002Fiskusstvo-drevney-rusi",jpg:"jpg\u002F21219"},{id:35199,name:"Лики материнской любви. Роль матери в воспитании ребенка",href:"\u002Funcategorized\u002Fliki-materinskoy-lyubvi-rol-materi-v",jpg:"jpg\u002F35199"},{id:79265,name:"Нахождение значений дробных выражений. 6 класс",href:"\u002Funcategorized\u002Fnahozhdenie-znacheniy-drobnyh-vyrazheniy-6-klass",jpg:"jpg\u002F79265"},{id:501864,name:"Эмоциональное воспитание дошкольников",href:"\u002Funcategorized\u002Femotsionalnoe-vospitanie-doshkolnikov",jpg:"jpg\u002F501864"},{id:64202,name:"Электронное портфолио студента",href:"\u002Funcategorized\u002Felektronnoe-portfolio-studenta-1",jpg:"jpg\u002F64202"},{id:38379,name:"Идентификация и воздействие на человека вредных и опасных факторов",href:"\u002Funcategorized\u002Fidentifikatsiya-i-vozdeystvie-na-cheloveka-vrednyh",jpg:"jpg\u002F38379"},{id:73584,name:"Светофор и я. Правила дорожного движения для дошкольников",href:"\u002Funcategorized\u002Fsvetofor-i-ya-pravila-dorozhnogo-dvizheniya",jpg:"jpg\u002F73584"}],navigation:{next:"\u002Funcategorized\u002Flekarstvennaya-forma-nastoyka",next_name:"Лекарственная форма: Настойка",prev:"\u002Funcategorized\u002Fgeli-sposoby-polucheniya-oblast-primeneniya",prev_name:"Гели, способы получения, область применения"}}},categories:{result:[{id:I,ordering:b,name:G,pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:"Информатика",pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:H,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Векторная графика в Web","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Без категории",20,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

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

Непосредственная вставка кода в документ
My first SVG cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

Внедрение с помощью тега
Не сработало!
Слайд 9
Графические примитивы
Спецификация SVG предоставляет разработчику использование графических примитивов:
Линия
Полилиния (ломанная)
Прямоугольник
Окружность
Слайд 10
Линия
Линия задаётся двумя точками через 4 атрибута:
stroke-width="1" stroke="rgb(0,0,0)"/>
Параметры отрисовки можно задать в стиле:
style="stroke-width:1; stroke:rgb(0,0,0);"
Слайд 11
Линия
Слайд 12
Ломанная линия
Ломанная задаётся через тег polyline и атрибут points
150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
Слайд 13
Ломанная линия
Слайд 14
Прямоугольник
Слайд 15
Окружность
Слайд 16
Эллипс
Слайд 17
Многоугольник
Слайд 18
Внедрение стилей
<br> circle {<br> fill: #ffc;<br> stroke:</div></h2><div class="slides-content">blue;<br> stroke-width: 2;<br> stroke-dasharray: 5 3<br> } <br>
Слайд 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/
Имя файла: Векторная-графика-в-Web.pptx
Количество просмотров: 85
Количество скачиваний: 0
Скачать
- Предыдущая
Гели, способы получения, область применения
Следующая -
Лекарственная форма: Настойка
Похожие презентации
: Новогодние игрушки – шарики, хлопушки!!!
Дорожная карта по управляемому перетоку работников компании
Пешеходная улица в Сыктывкаре
Презентация Реакции замещения, 8 класс
Перспективные технологии и материалы XXI века
Сочинение по картине М.А.Врубеля Царевна-лебедь
Игровая презентация Репка Часть 1
Проект Скоро в школу!
Изделия из жести
Niedrożność jelit
Развивающая предметно-пространственная среда по физическому развитию детей дошкольного возраста
Электронно-дырочный переход
Решение задач по теории вероятностей
Туберкулинодиагностика. Туберкулиндік сынамаларды орындау әдістері мен техникасы
Мы - граждане России
Изображение на координатной плоскости множества решений уравнений и неравенств с двумя переменными и их систем
Текстовые редакторы. Урок 10
Авиационная, высотная, космическая физиология. Особенности адаптации человека к условиям космоса
Средства тиражирования документов
День лингвиста
Фрезерование. Обработка канавок
Искусство Древней Руси
Лики материнской любви. Роль матери в воспитании ребенка
Нахождение значений дробных выражений. 6 класс
Эмоциональное воспитание дошкольников
Электронное портфолио студента
Идентификация и воздействие на человека вредных и опасных факторов
Светофор и я. Правила дорожного движения для дошкольников
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:79555,name:m,category:G,count:H,jpg:"jpg\u002F79555",hits:85,download:b,h1:"Векторная графика в Web презентация",meta:{h1:m,title:m,description:"Векторная графика в Web презентация на тему, доклад, Без категории",keywords:"Векторная графика в Web, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Без категории",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Векторная графика в Web из раздела Без категории. Презентация на заданную тему содержит 20 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).\u003Cbr\u003EВекторная графика не теряет в качестве при масштабировании\u003Cbr\u003EДля Web был разработан стандарт векторной г",file:"Векторная-графика-в-Web.pptx",texts:["\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EЛекция 6\u003Cbr\u003E","\u003Cp\u003EВекторная графика в Web\u003Cbr\u003E\u003Cp\u003EВекторная графика — способ представления графики в виде графических примитивов (геометрических контуров и линий).\u003Cbr\u003EВекторная графика не теряет в качестве при масштабировании\u003Cbr\u003EДля Web был разработан стандарт векторной графики SVG (Scalable Vector Graphics).\u003Cbr\u003E","\u003Cp\u003EОб SVG\u003Cbr\u003E\u003Cp\u003ESVG (Scalable Vector Graphics) – язык разметки векторной графики на основе XML.\u003Cbr\u003EПреимущества:\u003Cbr\u003EСтили и скрипты: при помощи CSS можно менять параметры графики, а при помощи JavaScript задавать интерактивность\u003Cbr\u003EПоддержка анимации.\u003Cbr\u003E","\u003Cp\u003EПример простого изображения в формате SVG\u003Cbr\u003E\u003Cp\u003E\u003C?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?\u003E \u003Cbr\u003E\u003Csvg version = \"1.1\" baseProfile=\"full\" xmlns = \"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" xmlns:xlink = \"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxlink\" xmlns:ev = \"http:\u002F\u002Fwww.w3.org\u002F2001\u002Fxml-events\" height = \"400px\" width = \"400px\"\u003E\u003Cbr\u003E\u003Crect x=\"0\" y=\"0\" width=\"400\" height=\"400\" fill=\"none\" stroke=\"black\" stroke-width=\"5px\" stroke-opacity=\"0.5\"\u002F\u003E\u003Cbr\u003E\u003Cg fill-opacity=\"0.6\" stroke=\"black\" stroke-width=\"0.5px\"\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"red\" transform=\"translate( 0,-52)\" \u002F\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"blue\" transform=\"translate( 60, 52)\" \u002F\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"104px\" fill=\"green\" transform=\"translate(-60, 52)\" \u002F\u003E\u003Cbr\u003E\u003C\u002Fg\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EСпособы внедрения SVG на веб-страницу\u003Cbr\u003E\u003Cp\u003EС помощью тега \u003Cimg\u003E\u003Cbr\u003EС помощью свойства background-image\u003Cbr\u003EНепосредственная вставка кода в документ\u003Cbr\u003EС помощью тега \u003Cobject\u003E\u003Cbr\u003E","\u003Cp\u003EВставка с помощью тега \u003Cimg\u003E или свойства background-image\u003Cbr\u003E\u003Cp\u003EС помощью тега img:\u003Cbr\u003E\u003Cimg src=\"kiwi.svg\" alt=\"Киви на овале\"\u003E\u003Cbr\u003EС помощью свойства background-image:\u003Cbr\u003E\u003Ca href=\"\u002F\" class=\"logo\"\u003EKiwi Corp \u003C\u002Fa\u003E\u003Cbr\u003E.logo {\u003Cbr\u003E\tdisplay: block;\u003Cbr\u003E\ttext-indent: -9999px;\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 82px;\u003Cbr\u003E\tbackground: url(kiwi.svg);\u003Cbr\u003E\tbackground-size: 100px 82px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EНепосредственная вставка кода в документ\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\t\u003Ch1\u003EMy first SVG\u003C\u002Fh1\u003E\u003Cbr\u003E\t\u003Csvg width=\"100\" height=\"100\"\u003E\u003Cbr\u003E\t\t\u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \u002F\u003E \t\u003C\u002Fsvg\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E \u003Cbr\u003E","\u003Cp\u003EВнедрение с помощью тега \u003Cobject\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cobject type=\"image\u002Fsvg+xml\" data=\"picture.svg\"\u003E\u003Cbr\u003EНе сработало!\r\n\u003C\u002Fobject\u003E\u003Cbr\u003E","\u003Cp\u003EГрафические примитивы\u003Cbr\u003E\u003Cp\u003EСпецификация SVG предоставляет разработчику использование графических примитивов: \u003Cbr\u003EЛиния\u003Cbr\u003EПолилиния (ломанная)\u003Cbr\u003EПрямоугольник\u003Cbr\u003EОкружность\u003Cbr\u003E","\u003Cp\u003EЛиния\u003Cbr\u003E\u003Cp\u003EЛиния задаётся двумя точками через 4 атрибута:\u003Cbr\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cline x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E \u003Cbr\u003EПараметры отрисовки можно задать в стиле:\r\nstyle=\"stroke-width:1; stroke:rgb(0,0,0);\" \u003Cbr\u003E","\u003Cp\u003EЛиния\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cline x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЛоманная линия\u003Cbr\u003E\u003Cp\u003EЛоманная задаётся через тег polyline и атрибут points\u003Cbr\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolyline points=\"0,0 50,0 150,100 250,100 300,150\" fill=\"rgb(249,249,249)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЛоманная линия\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolyline points=\"0,0 50,0 150,100 250,100 300,150\" fill=\"rgb(249,249,249)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EПрямоугольник\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Crect width=\"200\" height=\"200\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EОкружность\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Ccircle cx=\"102\" cy=\"102\" r=\"100\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EЭллипс\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cellipse cx=\"100\" cy=\"50\" rx=\"100\" ry=\"50\" fill=\"rgb(234,234,234)\" stroke-width=\"1\" stroke=\"rgb(0,0,0)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EМногоугольник\u003Cbr\u003E\u003Cp\u003E\u003Csvg\u003E\u003Cbr\u003E\t\u003Cpolygon 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)\"\u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EВнедрение стилей\u003Cbr\u003E\u003Cp\u003E\u003Csvg width=\"200px\" height=\"200px\" viewBox=\"0 0 200 200\"\u003E\r\n\u003Cdefs\u003E\r\n\u003Cstyle type=\"text\u002Fcss\"\u003E\r\n\u003C![CDATA[\u003Cbr\u003E\tcircle {\u003Cbr\u003E\t\tfill: #ffc;\u003Cbr\u003E\t\tstroke: blue;\u003Cbr\u003E\t\tstroke-width: 2;\u003Cbr\u003E\t\tstroke-dasharray: 5 3\u003Cbr\u003E\t} \u003Cbr\u003E]]\u003E\r\n\u003C\u002Fstyle\u003E\r\n\u003C\u002Fdefs\u003E\r\n\u003Ccircle cx=\"20\" cy=\"20\" r=\"10\" \u002F\u003E\r\n\u003Ccircle cx=\"60\" cy=\"20\" r=\"15\" \u002F\u003E\r\n\u003Ccircle cx=\"20\" cy=\"60\" r=\"10\" style=\"fill: #cfc\" \u002F\u003E\r\n\u003Ccircle cx=\"60\" cy=\"60\" r=\"15\" style=\"stroke-width: 1; stroke-dasharray: none;\" \u002F\u003E\r\n\u003C\u002Fsvg\u003E\u003Cbr\u003E","\u003Cp\u003EПолезные ссылки\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fwww.w3.org\u002FTR\u002FSVG\u002F \u003Cbr\u003Ehttp:\u002F\u002Fhabrahabr.ru\u002Fpost\u002F157087\u002F\u003Cbr\u003Ehttp:\u002F\u002Fkoulikov.com\u002Fwp-content\u002Fuploads\u002F2012\u002F11\u002Fsvg\u002Findex.htm \u003Cbr\u003Ehttp:\u002F\u002Fpepelsbey.net\u002Fpres\u002Fweb-in-curves\u002F - Веб в кривых. Второе рождение SVG. \u003Cbr\u003Ehttp:\u002F\u002Ffrontender.info\u002Fusing-svg\u002F \u003Cbr\u003Ehttps:\u002F\u002Fopenclipart.org\u002F \u003Cbr\u003E","\u003Cp\u003EЛабораторная работа\u003Cbr\u003E\u003Cp\u003EНаписать скрипт для построения столбчатой диаграммы в формате SVG \u003Cbr\u003EНа основе входных данных определить цену деления шкалы на оси ординат. \u003Cbr\u003E Пример входных данных: 4.3;2.5;3.5;4.5;10;3;4;12;13;2;3;5\u003Cbr\u003E"],href:"\u002Funcategorized\u002Fvektornaya-grafika-v-web",href_category:"\u002Funcategorized",date:1627183163,related:[{id:533808,name:": Новогодние игрушки – шарики, хлопушки!!!",href:"\u002Funcategorized\u002F-novogodnie-igrushki--shariki-hlopushki",jpg:"jpg\u002F533808"},{id:67076,name:"Дорожная карта по управляемому перетоку работников компании",href:"\u002Funcategorized\u002Fdorozhnaya-karta-po-upravlyaemomu-peretoku-rabotnikov",jpg:"jpg\u002F67076"},{id:168802,name:"Пешеходная улица в Сыктывкаре",href:"\u002Funcategorized\u002Fpeshehodnaya-ulitsa-v-syktyvkare",jpg:"jpg\u002F168802"},{id:558303,name:"Презентация Реакции замещения, 8 класс",href:"\u002Funcategorized\u002Fprezentatsiya-reaktsii-zameshcheniya-8-klass",jpg:"jpg\u002F558303"},{id:408855,name:"Перспективные технологии и материалы XXI века",href:"\u002Funcategorized\u002Fperspektivnye-tehnologii-i-materialy-xxi-veka",jpg:"jpg\u002F408855"},{id:60802,name:"Сочинение по картине М.А.Врубеля Царевна-лебедь",href:"\u002Funcategorized\u002Fsochinenie-po-kartine-mavrubelya-tsarevna-lebed",jpg:"jpg\u002F60802"},{id:502865,name:"Игровая презентация Репка Часть 1",href:"\u002Funcategorized\u002Figrovaya-prezentatsiya-repka-chast-1",jpg:"jpg\u002F502865"},{id:463847,name:"Проект Скоро в школу!",href:"\u002Funcategorized\u002Fproekt-skoro-v-shkolu-1",jpg:"jpg\u002F463847"},{id:564882,name:"Изделия из жести",href:"\u002Funcategorized\u002Fizdeliya-iz-zhesti",jpg:"jpg\u002F564882"},{id:36702,name:"Niedrożność jelit",href:"\u002Funcategorized\u002Fniedrono-jelit",jpg:"jpg\u002F36702"},{id:32969,name:"Развивающая предметно-пространственная среда по физическому развитию детей дошкольного возраста",href:"\u002Funcategorized\u002Frazvivayushchaya-predmetno-prostranstvennaya-sreda-po-fizicheskomu",jpg:"jpg\u002F32969"},{id:75724,name:"Электронно-дырочный переход",href:"\u002Funcategorized\u002Felektronno-dyrochnyy-perehod",jpg:"jpg\u002F75724"},{id:42346,name:"Решение задач по теории вероятностей",href:"\u002Funcategorized\u002Freshenie-zadach-po-teorii-veroyatnostey-1",jpg:"jpg\u002F42346"},{id:77524,name:"Туберкулинодиагностика. Туберкулиндік сынамаларды орындау әдістері мен техникасы",href:"\u002Funcategorized\u002Ftuberkulinodiagnostika-tuberkulindk-synamalardy-oryndau-dster-men",jpg:"jpg\u002F77524"},{id:74480,name:"Мы - граждане России",href:"\u002Funcategorized\u002Fmy-grazhdane-rossii-2",jpg:"jpg\u002F74480"},{id:79181,name:"Изображение на координатной плоскости множества решений уравнений и неравенств с двумя переменными и их систем",href:"\u002Funcategorized\u002Fizobrazhenie-na-koordinatnoy-ploskosti-mnozhestva-resheniy",jpg:"jpg\u002F79181"},{id:65366,name:"Текстовые редакторы. Урок 10",href:"\u002Funcategorized\u002Ftekstovye-redaktory-urok-10",jpg:"jpg\u002F65366"},{id:51766,name:"Авиационная, высотная, космическая физиология. Особенности адаптации человека к условиям космоса",href:"\u002Funcategorized\u002Faviatsionnaya-vysotnaya-kosmicheskaya-fiziologiya-osobennosti-adaptatsii",jpg:"jpg\u002F51766"},{id:23761,name:"Средства тиражирования документов",href:"\u002Funcategorized\u002Fsredstva-tirazhirovaniya-dokumentov",jpg:"jpg\u002F23761"},{id:92614,name:"День лингвиста",href:"\u002Funcategorized\u002Fden-lingvista",jpg:"jpg\u002F92614"},{id:269522,name:"Фрезерование. Обработка канавок",href:"\u002Funcategorized\u002Ffrezerovanie-obrabotka-kanavok",jpg:"jpg\u002F269522"},{id:21219,name:"Искусство Древней Руси",href:"\u002Funcategorized\u002Fiskusstvo-drevney-rusi",jpg:"jpg\u002F21219"},{id:35199,name:"Лики материнской любви. Роль матери в воспитании ребенка",href:"\u002Funcategorized\u002Fliki-materinskoy-lyubvi-rol-materi-v",jpg:"jpg\u002F35199"},{id:79265,name:"Нахождение значений дробных выражений. 6 класс",href:"\u002Funcategorized\u002Fnahozhdenie-znacheniy-drobnyh-vyrazheniy-6-klass",jpg:"jpg\u002F79265"},{id:501864,name:"Эмоциональное воспитание дошкольников",href:"\u002Funcategorized\u002Femotsionalnoe-vospitanie-doshkolnikov",jpg:"jpg\u002F501864"},{id:64202,name:"Электронное портфолио студента",href:"\u002Funcategorized\u002Felektronnoe-portfolio-studenta-1",jpg:"jpg\u002F64202"},{id:38379,name:"Идентификация и воздействие на человека вредных и опасных факторов",href:"\u002Funcategorized\u002Fidentifikatsiya-i-vozdeystvie-na-cheloveka-vrednyh",jpg:"jpg\u002F38379"},{id:73584,name:"Светофор и я. Правила дорожного движения для дошкольников",href:"\u002Funcategorized\u002Fsvetofor-i-ya-pravila-dorozhnogo-dvizheniya",jpg:"jpg\u002F73584"}],navigation:{next:"\u002Funcategorized\u002Flekarstvennaya-forma-nastoyka",next_name:"Лекарственная форма: Настойка",prev:"\u002Funcategorized\u002Fgeli-sposoby-polucheniya-oblast-primeneniya",prev_name:"Гели, способы получения, область применения"}}},categories:{result:[{id:I,ordering:b,name:G,pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:"Информатика",pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:H,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Векторная графика в Web","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Без категории",20,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) stroke-width="1" stroke="rgb(0,0,0)"/>
Параметры отрисовки можно задать в стиле:
style="stroke-width:1; stroke:rgb(0,0,0);"

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

Линия
Линия задаётся двумя точками через 4 атрибута: stroke-width="1" stroke="rgb(0,0,0)"/>
Параметры отрисовки можно задать в стиле:
style="stroke-width:1; stroke:rgb(0,0,0);"

Линия

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

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

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

Окружность

Эллипс

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

Внедрение стилей
<br> circle {<br> fill: #ffc;<br> stroke:</div></h2><div class="slides-content">blue;<br> stroke-width: 2;<br> stroke-dasharray: 5 3<br> } <br>

Полезные ссылки
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/