Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью 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 y = ymin; for (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 = new $jit.PieChart({ injectInto: "infovis" , animate: true , offset: 30, sliceOffset: 0, labelOffset: 20, type: "stacked:gradient" , showLabels:true , resizeLabels: 7, Label: { 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" , value: 30}, {id: "SverdlovskOblast" , value: 200}, {id: "TyumenOblast" , value: 75}, {id: "KhantiaMansia" , value: 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 ]});
pie.hover(function () { this .sector.stop(); this .sector.scale(1.1, 1.1, this .cx, this .cy); if (this .label) { this .label.stop(); 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 (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.