Векторна графіка широко використовується у друкованій справі. Але і для веб-сайтів ми можемо використовувати її за допомогою SVG ( Scalable Vector Graphic - масштабована векторна графіка). Відповідно до специфікації W3.org SVG визначається як:

Мова для опису двовимірної графіки у XML. SVG допускає використання трьох типів об'єктів: векторні графічні форми (наприклад, шляхи, що складаються з прямих ліній і кривих), зображення та текст.

Незважаючи на те, що з серпня 2011 року SVG включено до рекомендацій W3C , дана технологіяпрактично не використовується в веб-проектах, хоча і має перед растровими зображеннями ряд переваг. У цій серії уроків ми уявимо, як працювати з SVG елементами на веб-сторінках.

Переваги SVG

Незалежність дозволу

Растрові зображення залежать від роздільної здатності. Графіка набуває непрезентабельного вигляду при зміні розмірів до певних масштабів. З векторною графікою така ситуація неможлива в принципі, тому що все представляється математичними виразами, які автоматично перераховуються при зміні масштабу, і якість зберігається у будь-яких умовах.

Зменшення кількості запитів HTTP

SVG може бути вбудовано безпосередньо в документ HTML за допомогою тега svg, тому браузер не потребує запитів для обслуговування графіки. Такий підхід добре впливає на характеристики завантаження веб-сайту.

Стилі та скрипти

Вбудовування за допомогою тега svg також дозволяє легко визначати стилі для графіки з допомогою CSS. Можна змінювати властивості об'єкта, такі як колір тла, прозорість, рамки тощо. Подібним чином можна маніпулювати графікою за допомогою JavaScript.

Легко редагувати та анімувати

Об'єкти SVG можна анімувати за допомогою CSS або JavaScript. Також можна об'єкти SVG модифікувати за допомогою текстового редактора.

Менший розмір файлу

SVG має менший розмір файлу, порівняно з растровою графікою.

Базові форми SVG

Відповідно до специфікації, ми можемо малювати кілька базових форм: лінія, полілінія, прямокутник, коло, еліпс. Усі елементи мають бути вставлені у тег . Розглянемо базові елементи докладно.

Лінія

Для виведення лінії у SVG використовується елемент . Він малює відрізок, котрому потрібно визначити дві точки: початок і поклала край.

Початок відрізка визначається атрибутами x1 та y1, а кінцева точка визначається координатами в атрибутах x2 and y2.

Також є два інших атрибути (stroke та stroke-width) які використовуються для визначення кольору та ширини лінії відповідно.

Цей об'єкт схожий , але за допомогою елемента Можна малювати кілька ліній одразу.

Елемент Містить атрибут points , який використовується для визначення координати точок.

Прямокутник виводиться за допомогою елемента . Потрібно визначити ширину та висоту.

Для виведення кола використовуємо елемент . У наступному прикладі ми створюємо коло з радіусом 100 який визначається в атрибуті r:

Перші два атрибути cx і cy визначають координати центру. У наведеному вище прикладі ми встановили значення 102 для обох координат. За промовчанням використовується значення 0.

Для виведення еліпса використовуємо елемент . Він працює так само, як і коло, але ми можемо спеціально задавати радіуси по осі x та y за допомогою атрибутів rx і ry:

Елемент Виводить багатогранні фігури, такі як трикутник, шестикутник та інше. Наприклад:

Використання редактора для векторної графіки

Виведення простих об'єктів SVG у HTML здійснюється просто. Однак, коли складність об'єкта збільшується, подібна практика може призвести до великого обсягу потрібної роботи.

Але ви можете скористатися будь-яким редактором для векторної графіки (наприклад, Adobe Illustratorабо Inkscape) до створення об'єктів. Якщо ви володієте подібним інструментом, малювати в них потрібні об'єкти значно простіше, ніж кодувати графіку в тезі HTML.

Можна копіювати команди для векторної графіки з файлу до HTML документа. Або можна вбудовувати файл.svg за допомогою одного з наступних елементів: embed, iframe та object.

Результат буде однаковим.

Підтримка у браузерах

SVG має хорошу підтримку у більшості сучасних браузерів, за винятком IE версії 8 і раніше. Але завдання можна вирішити за допомогою бібліотеки JavaScript. Для полегшення роботи можна скористатись інструментом ReadySetRaphael.com для конвертації коду SVG у формат Raphael.

Спочатку завантажуємо та включаємо бібліотеку в документ HTML. Потім завантажуємо файл.svg , копіюємо та вставляємо отриманий код у функцію після завантаження:

У тезі body розміщуємо наступний елемент div з ідентифікатором rsr.

І все готове.

У наступному уроці серії ми розглянемо, як визначати стилі об'єктів SVG у CSS.

(Оглядова стаття щодо слідів конференції з розробки ПЗ у Єкатеринбурзі та інших виступів. Відео-версію доповіді в Єкатеринбурзідив. на techdays.ru )

Що таке HTML5 Canvas та SVG?

HTML5 Canvas

- Елемент являє собою полотно для малювання растрової графіки. Фактично це порожній блок заданих розмірів, де можна малювати за допомогою спеціальних API для JavaScript.

API включає 45 спеціальних методів і 21 атрибут, що використовуються для відображення графічних примітивів, завдання стилів, трансформацій, доступу до окремих пікселів, проектування зображень і відео.

Сам елемент визначено у специфікації HTML5. API для нього описується окремим документом - HTML Canvas 2D Context.

SVG

Music Can Be Fun

Прекрасна музично-графічна гра-візуалізація (http://musiccanbefun.edankwan.com/).

Приклади схем на SVG

Схема людського скелета, переодічна система хімічних елементів та респіраторна система (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml).

Карти Яндекс

Ближчий приклад із реального життя – при відтворенні маршрутів використовується SVG (якщо браузер підтримує). також доповідь “Карти та SVG” з нашого HTML5 Camp.

Ще приклади:

• Beauty of the Web http://www.beautyoftheweb.com/ – реальні сайти з реального світу
• Dev: unplugged http://contest.beautyoftheweb.com/ – проекти-учасники змагання додатків на HTML5

Різниця між Canvas та SVG

У різних сценаріях для динамічного відтворення графіки може краще підходити або Canvas чи SVG – до цього питання ми ще повернемося наприкінці. А поки зупинимося на ключових відмінностях між одним та іншим:

	Canvas	SVG
Формат	Растрове	вектор
Масштабування
Доступ	Доступ до окремих пікселів (RGBA)	Доступ до окремих елементів (DOM)
Індексованість та Accessibility	Видно лише кінцевий растр (не можна виділити фігури, текст тощо) - погано для Accessibility	Можна переглянути структуру (наприклад, витягти весь текст)
Стилізація	Візуальні стилі задаються під час малювання через API	Візуальні стилі задаються атрибутами, можна підключати CSS
Програмування	JS API для роботи з примітивами	DOM для роботи з елементами
Оновлення	Для оновлення - малювання поверх або повне перемальовування	Можлива зміна окремих елементів
Події	Немає легкого способу обробки подій миші. Об'єкти під курсором слід визначати вручну.	Легко вішаються події від миші через DOM, обробляються автоматично.
Інтеграція коду	Код JS окремо від Canvas	Всередину можна вмикати JS

Ці відмінності необхідно враховувати при використанні тієї чи іншої технології візуалізації даних. Наприклад, малювання графіка функції може бути легшим за допомогою Canvas, в той же час виведення підказок (з визначенням об'єкта під вказівником миші), простіше зробити за допомогою SVG.

Насправді, щоправда, вже є низка готових бібліотек для візуалізації даних, які частково нівелюють ці відмінності.

Я не буду вдаватися в основи роботи з кожною з технологій, як вступну рекомендую доповідь Вадима Макєєва (Opera) з HTML5 Camp “Динамічна графіка: Canvas та SVG”.

також доповіді MIX 2011:

Обробка зображень за допомогою Canvas

Одна з примітних особливостей Canvas полягає в тому, що ця технологія забезпечує попіксельний доступ до даних, що відображаються, і дозволяє проектувати на полотно різні графічні елементи, включаючи відео.

Хорошим прикладом того, де це потрібно, є завдання обробки/аналізу зображень.

Processing.js пропонує два підходи до опису візуалізації: проміжний код, який надалі розбирається самою бібліотекою (окремим файлом або всередині сторінки) і явний код на JavaScript.

Наприклад, щоб намалювати фрактал безліч Мандельброта, можна використовувати як варіант, вказаний на сторінці з відповідним прикладом, так і такий код JavaScript:

var xmin = -2.5; var ymin = -2; var wh = 4; function sketchProc(processing) ( processing.setup = function () ( processing.size(200, 200); processing.noLoop(); ); processing.draw = function () ( processing.loadPixels(); var maxiterations = 200; var xmax = xmin + wh; var ymax = ymin + wh; var dx = (xmax - xmin) / (processing.width); var dy = (ymax - ymin) / (processing.height); (var j = 0; j< processing.height; j++) { var x = xmin; for (var i = 0; i < processing.width; i++) { var a = x; var b = y; var n = 0; while (n < maxiterations) { var aa = a * a; var bb = b * b; var twoab = 2.0 * a * b; a = aa - bb + x; b = twoab + y; if (aa + bb >16.0) (break;) n++; ) if (n == maxiterations) processing.pixels.setPixel(i+j*processing.width, 0); else processing.pixels.setPixel(i+j*processing.width, processing.color(n*16 % 255)); x + = dx; ) y + = dy; ) processing.updatePixels(); ); ) var canvas = document.getElementById("myCanvas"); var p = new Processing(canvas, sketchProc);

Спробувати самостійно можна тут: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (копіюємо код, вставляємо в консоль і виконуємо).

JavaScript InfoVis Toolkit (JIT)

Для відображення даних JIT набуває вихідних значень у вигляді JSON:

var json = ( "label" : ["label A" , "label B" , "label C" , "label D" ], "values" : [ ( "label" : "date A" , "values" : ) , ( "label" : "date B" , "values" : ), ( "label" : "date E" , "values" : ), ( "label" : "date F" , "values" : ), ( "label": "date D", "values":), ("label": "date C", "values":)))); var pieChart = новий $jit.PieChart(( injectInto: "infovis" , animate: true , offset: 30, sliceOffset: 0, labelOffset: 20, тип: "stacked:gradient" , showLabels:true , resizeLabels: 7, ( type: "Native" , size: 20, family: "Arial" , color: "white" ), Tips: ( enable: true , onShow: function (tip, elem) ( tip.innerHTML = " " + elem.name + ": "+ elem.value;)))));

достатньо викликати малювання:

PieChart.loadJSON(json);

jQuery Sparklines

Візуалізація на карті за допомогою SVG

Переходимо до SVG та почнемо з простого прикладу. Уявіть собі, що вам потрібно відобразити якісь дані на карті регіонів, як це зробити найпростіше?

Якщо у вас є готова карта у вигляді SVG (я взяв карту Росії із сайту Вікіпедії), то це робиться дуже просто – достатньо, щоб усередині SVG-документа у кожного регіону був свій унікальний id, далі вставляємо карту як inline svg та простим кодом розфарбовуємо у потрібний колір:

var SverdlovskOblast = document.getElementById("SverdlovskOblast" ); SverdlovskOblast.style.fill = "#fe3300" ;

Якщо зробити все те ж саме в циклі, то вже можна розфарбувати не просто область, а й цілий регіон чи навіть усю країну:

var data = [(id: "KurganOblast" , значення: 30), (id: "SverdlovskOblast" , значення: 200), (id: "TyumenOblast" , значення: 75), (id: "KhantiaMansia" , значення: 100 ), (id: "YamaloNenetsAutDistrict" , value: 20), (id: "ChelyabinskOblast" , value: 150)]; for (var i = 0; i< data.length; i++) { var item = data[i]; var region = document.getElementById(item.id); region.style.fill = RGBtoHex(item.value, 0, 0); }

Бібліотеки для візуалізації даних за допомогою SVG

Як я вже казав, для вирішення традиційної задачі візуалізації числових даних у вигляді графіків та діаграм підходять як Canvas, так і SVG. В обох випадках це легко робиться за допомогою відповідних бібліотек.

Приклади з Canvas ми вже подивилися, тепер подивимося на кілька бібліотек для роботи з SVG. (Це також не вичерпний список, але досить якісні та популярні рішення.)

Raphaël

Щоб додати просту кругову діаграмудостатньо такого коду:

var r = Raphael("chart", 640, 480); var pie = r.g.piechart (320, 240, 100,);

Декількома додатковими операціями можна додати легенду, підписи до діаграми та інтерактивні підказки:

var r = Raphael("chart", 640, 480); r.g.txtattr.font = "12px "Fontin Sans", Fontin-Sans, sans-serif"; r.g.text(320, 100, "Interactive Pie Chart" ).attr(("font-size" : 20)); var pie = r.g.piechart(320, 240, 100, ,
(legend: ["%%.%% – Enterprise Users" , "IE Users" ], legendpos: "west" ,
href: ["http://raphaeljs.com" , http://g.raphaeljs.com]});
, . this .label.scale(1.5); this .label.attr(("font-weight" : 800)); ) ), function () ( this .sector.animate((scale: ), 500, "bounce" ) ; if (this .label) ( this .label.animate((scale: 1), 500, "bounce" ); this .label.attr(("font-weight" : 400)); ) )));

Аналогічним чином можна виводити інші типи діаграм, використовуючи відповідні методи. Див. приклади безпосередньо на сайті розширення http://g.raphaeljs.com/

Highcharts JS

API бібліотеки дозволяє досить легко згенерувати діаграму за даними JSON:

var chart1 = New Highcharts.Chart(( chart: ( renderTo: "charts" , defaultSeriesType: "bar" ), title: ( text: "Fruit Consumption" ), xAxis: ( categories: ["Apples" , "Bananas" , "Oranges" ] ), yAxis: ( title: ( text: "Fruit eaten" ) ), series: [( name: "Jane" , data: ), ( name: "John" , data: )] ));

Трохи складнішим скриптом можна вказати додаткові деталі, наприклад, вивести легенду, налаштувати підказки:

var chart = new Highcharts.Chart(( chart: ( renderTo: "charts" , defaultSeriesType: "area" , spacingBottom: 30 ), title: ( text: "Fruit consumption *" ), subtitle: ( text: "* Jane\"s banana consumption is unknown", floating: true , align: "right" , verticalAlign: "bottom" , y: 15 ), legend: ( layout: "vertical" , align: "left" , verticalAlign: "top" , x: 150, y: 100 , floating: true , borderWidth: 1, backgroundColor: "#FFFFFF" ), xAxis: ( categories: ["Apples" , "Pears" , "Oranges" , "Bananas" , "Grapes" , "Plums" , "Strawberries" , "Raspberries" ] ), yAxis: ( title: ( text: "Y-Axis" ), labels: ( formatter: function () ( return this .value; ) ) ), tooltip: ( formatter: function () ( return " " + this .series.name +"
" + this .x +": " + this .y; ) ), plotOptions: ( area: ( fillOpacity: 0.5 ) ), series: [( name: "John" , data: ), ( name: "Jane" , data:))));

За потреби можна замінити стилі за промовчанням на власні.

Що вибрати: Canvas чи SVG?

Як видно з прикладів вище, для задач візуалізації даних найчастіше підходить і та, і інша технологія. Багато речей робляться таким чином. У випадках, де потрібен попіксельний висновок, очевидно, найкраще підходить Canvas. Там, де діаграма б'ється на окремі об'єкти, де потрібно підтримувати інтерактивність, краще підходить SVG.

Краще підходить Canvas

• Редагування растрової графіки
• Накладення ефектів на графіку/відео
• Генерування растрової графіки (візуалізація даних, фрактали, графіки функцій)
• Аналіз зображенням
• Ігрова графіка (спрайти, тло тощо)

Найкраще підходить SVG

• Інтерфейси, що масштабуються
• Інтерактивні інтерфейси
• Діаграми, схеми
• Векторне редагування зображень

У графічній формі це можна так:

Нарешті, ще один важливий зріз, який також важливо враховувати у виборі технології – продуктивність малювання під час використання Canvas та SVG:

На практиці Сanvas краще працює при невеликих розмірах області малювання і на великій кількості об'єктів, в SVG краще підходить при необхідності масштабування або виведення на великий екран і не дуже велику кількістьвиведених за один раз об'єктів.

Такий висновок випливає з доповіді голови правління «Башнафти», озвученої загальним зборами акціонерів компанії, копія якої надійшла до розпорядження редакції.

З документа випливає, що в результаті геологорозвідувальних робіт, у 2018 році було відкрито 81 продуктивну поклад із запасами 19 мільйонів тонн.

При цьому застосування високоефективних геолого-технічних заходів та впровадження сучасних технологій підвищення нафтовіддачі дозволили зберегти за підсумками 11 місяців видобуток нафти на зрілих родовищах у Башкирії на рівні 2017 року – 15 мільйонів тонн. Загалом обсяг видобутку за вказаний період становив 17,3 мільйона тонн нафти.

У доповіді також зазначається, що створення єдиного виробничого ланцюжка з видобувним та переробним комплексом «Роснефти» підвищило ефективність роботи Уфімських НПЗ та призвело до зниження операційних та логістичних витрат. Зокрема, освоєно випуск бензину «Євро-6» та розпочато промислове виробництво дорожнього бітуму за новим ГОСТом.

Обсяг роздрібної реалізації на АЗС «Башнафти» за 11 місяців 2018 року збільшився порівняно з аналогічним періодом минулого року на 13,2 відсотка та досяг 1,7 мільйона тонн.

Задля реалізації стратегії у сфері нафтохімії ведеться модернізація нафтохімічного виробництва. Так, у травні 2018 року на «Уфаоргсинтезі» введено в експлуатацію нова установкавиробництва кумолу - сировини для виготовлення фарб, розчинників, різних полімерів, що використовуються в автомобільній промисловості, медицині та фармакології. На черзі – реконструкція комплексу виробництва ароматики на «Уфанефтехімі», будівництво нових установок із виробництва олефінів на «Уфаоргсинтезі».

Консолідований показник операційного прибутку за 9 місяців 2018 року зріс порівняно з аналогічним періодом 2017 року на 22,6 відсотка та становив 135,5 мільярда рублів. Чистий прибуток «Башнафти» досяг 74,6 мільярда рублів, що на 73,5 відсотка перевищує аналогічний показник минулого року.

Протягом третього кварталу «Башнафта» виплатила акціонерам оголошені на річних зборах у червні 2018 року дивіденди у розмірі 28,2 мільярда рублів, а сукупний обсяг виплачених з початку року дивідендів становив 43 мільярди рублів.

При цьому рівень чистого боргу компанії знизився і станом на 30 вересня 2018 року становив 40,1 мільярда рублів (на аналогічну дату 2017 року цей показник становив 104,7 мільярда рублів).

При цьому за звітний період податкові відрахування до бюджету Башкортостану з урахуванням разового платежу з податку на прибуток збільшилися порівняно з аналогічним періодом минулого року у 1,5 раза та становили 50,5 мільярда рублів.

Для увімкнення зображення у певному місці сторінки існує тег . Цей тег має обов'язковий параметр: SRC="" і кілька необов'язкових. Параметр SRC="" вказує браузеру адресу, де шукати малюнок і як значення повинен мати URL-адресу ресурсу, де розміщено графічний файл. У найпростішому випадку цей файл буде розміщений у кореневому каталозі або у папці IMG Вашого сайту. Необов'язкові параметри:

Параметр ALT="" як значення містить напис, що розповідає про зміст зображення для тих відвідувачів, браузери яких не підтримують графіку або працюють у режимі вимкненої графіки. Цей напис з'являється при наведенні покажчика мишки на зображення.

Параметри WIDTH="" HEIGHT="" як значення мають розміри зображення за шириною та висотою в пікселях. Ці параметри бажано вказувати в коді сторінки, щоб браузер заздалегідь залишав місце для зображення, тоді, завантажуючи, сторінка буде менше "смикатися". З іншого боку, ці параметри можна використовуватиме регулювання розмірів малюнка у вікні браузера.

Параметр BORDER="" описує рамку навколо зображення. Як значення вказується цифра, що вказує на ширину рамки в пікселях.

Параметр ALIGN= визначає положення зображення на сторінці, і може приймати значення TOP - вирівнює верхню межу зображення за найвищим елементом поточного рядка, TEXTTOP - вирівнює верхню межу зображення за найвищим текстовим елементом поточного рядка, MIDDLE - вирівнює середину зображення по базовій лінії поточного рядка. , ABSMIDDLE – вирівнює середину зображення посередині поточного рядка. BASELINE або BOTTOM – вирівнює нижню межу зображення по базовій лінії поточного рядка, ABSBOTTOM – вирівнює нижню межу зображення по нижній межі поточного рядка, HSPACE= – визначає відступ по горизонталі, VSPACE= – визначає відступ по вертикалі.

Синтаксис тега:

Біжучий рядок

Рядок, що біжить, задається тегом .

Атрибутами цього тегу є bgcolor - колір фону рядка, що біжить, height - висота рядка, width - ширина рядка.

Direction - задає напрямок руху рядка, що біжить - direction="left" (right, up, down) - рух вліво (вправо, вгору, вниз).

Behavior - поведінка рядка - behavior = "scroll" (slide, alternate). Scroll - звичайне прокручування (можна не прописувати, воно так і є за замовчуванням)

Slide - прокручування із зупинкою, рядок пробігає до краю та зупиняється. Якщо одночасно з behavor="slide" використати параметр loop, то рядок прокрутиться встановлену кількість разів і зупиниться біля краю. Alternate - рядок рухатиметься від краю до краю.
Scrollamount - швидкість руху рядка, scrollamount = "1". Може приймати значення від 1 до 10. 1 - найповільніший рух, 10 - найшвидший.

Синтаксис тега: текст

Сучасні веб-браузери можуть відтворювати відео та звукові файли різних форматів. Для цього вони використовують вбудовані плеєри (plug-in, елементи керування ActiveX) або зовнішні програми плеєри. Вставити звук або відео в HTML-документ можна за допомогою різних тегів:

- для вставки фонового звуку;

- для вставки відео у форматі AVI;

- для вставки звукових та відеофайлів;

- для вставки звукових та відеофайлів.

При вирішенні вставити звук та/або відео в HTML-документ, слід враховувати, що відповідні файли мають досить великий обсяг. Найбільш популярними в Інтернеті зараз є файли звукових форматів MP3, WMA, AIFF, AU, RealAudio (з розширенням ra і ram), MP4, MIDI і відеоформатів MPEG, MOV. Звуковий формат WAV та відеоформат AVI в Інтернеті використовуються досить рідко.