Візуалізація даних за допомогою HTML5 Canvas та SVG. Ознайомлення з SVG-графікою Векторна графіка svg

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

• вставка окремих картинок;
• заповнення фону зображення.

У будь-якому випадку, графічне зображення береться з файлу.

Вставка на сторінку графічного зображення з файлу графічного формату здійснюється за допомогою тега (від англ, image - зображення) із зазначенням адреси файлу як аргумент атрибута SRC:

Адреса графічного файлу - це URL-адреса, або ім'я файлу, можливо, із зазначенням шляху. Наприклад, для відображення графічного файлу logotip.jpg слід написати тег

Для збільшення швидкості передачі графічного зображення у тезі можна використовувати атрибут (додатковий параметр) LOWSRC, який приймає як аргумент адресу графічного файлу. Ви можете створити два графічні файли: один (наприклад, нехай це файл logotip.jpg) містить картинку, отриману з високою роздільною здатністю, а інший (наприклад, logotip.gif) - картинку, отриману з низькою роздільною здатністю. Тоді тег

Запишіть браузеру спочатку завантажити файл logotip.gif, а потім у міру прийому замінити його файлом logotip.jpg.
Інший спосіб прискорення завантаження графіки полягає в заданні розмірів прямокутної області, в якій буде розміщено графічне зображення, за допомогою атрибутів WIDTH (ширина) та HEIGHT (висота), що вимірюються у пікселах. Якщо вказати ці атрибути, то браузер спочатку виділить місце під графіку, підготує макет документа, відобразить текст і потім завантажить графіку. Зауважимо, що браузер стискає або розтягує зображення, вбудовуючи його у рамки вказаного розміру. Приклад вказівки розмірів зображення:

Графіка зазвичай використовується разом із текстом, тому виникає завдання вирівнювання тексту та графічного зображення. Це завдання вирішується за допомогою атрибуту ALIGNтега із застосуванням різних аргументів. Наприклад, ми можемо побажати, щоб текст обтікав зображення праворуч або ліворуч. Зазвичай картинка вбудовується впритул з текстом, що може бути некрасиві. Щоб уникнути цього, можна встановити порожні поля навколо ілюстрації. Поля створюються за допомогою атрибутів VSРАСЕдля верхнього та нижнього полів та НSPACEдля бічних полів у тезі . Аргументи цих атрибутів вказуються як чисел, визначальних розміри полів у пікселах. Для скасування обтікання графіки текстом є тег
.
Наступний тег задає обтікання графіки з файлу logotip.jpg праворуч (картинка буде зліва від тексту):

Якщо потрібно розташувати картинку праворуч від тексту, потрібно атрибуту ALIGNпривласнити аргумент RIGHT:

Щоб задати поля навколо картинки, треба написати тег виду:

Тут числа 20 та 10 визначають розміри полів.
Розглянемо приклад спільного використання графіки та текстів. Відкрийте Блокнот (текстовий редактор Notepad) Windows. Напишіть у ньому HTML-код із використанням розглянутих вище тегів. Нижче наводиться програма, що виводить деякий текст та графіку. Як графічний файл можна використовувати будь-який з наявних у вас файлів. Тут використається файл logotip.gif.

<Н1>Текст обтікає графіку праворуч
Це - приклад спільного використання тексту та графіки.
Текст програми HTML можна писати у будь-якому текстовому редакторі. У цьому використовуються теги розмітки тексту.

Цей текст виводиться із нового абзацу. Щоб це зробити, ми використовували спеціальний тег.

Спробуйте змінити розмір вікна Вашого браузера. Зверніть увагу, як змінюється розташування тексту.

Рис. 657. Текст обтікає зображення праворуч

Широкі можливості точного позиціонування зображень (як інших елементів) на сторінці надають таблиціі стилі. Ці елементи HTML будуть розглянуті пізніше. Наприклад, можна визначити таблицю без видимих ​​рамок, а в осередках цієї таблиці розмістити картинки, тексти та інші елементи.

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

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

Елемент SVG

Scalable Vector Graphics(масштабована векторна графіка) - формат зображень на основі тексту. Кожне SVG-зображення визначено за допомогою розмітки коду, схожої на HTML. SVG-код може бути включений безпосередньо до HTML-документу. Кожен веб-браузер підтримує SVG, винятком лише Internet Explorer версії 8 і старше . SVG заснований на XML, тому ви можете помітити, що елементи, що не мають тега, що закриває, повинні бути самозакриваються. Наприклад:

Перед тим, як ви зможете щось малювати, вам потрібно створити SVG-елемент. Думайте про SVG-елемент, як про полотно, на якому малюються всі ваші візуальні образи (У такому трактуванні, SVG концептуально схожий з елементом HTML - canvas). Як мінімум, добре задати ширину та висоту за допомогою атрибутів widthі heightвідповідно. Якщо ви їх не поставите, SVG розтягнеться на всю площу блоку.

Тут SVG-елемент, створений з використанням вище коду:

Чи не бачите його? Натисніть правою кнопкою по порожньому місці вище та виберіть "Перегляд коду елемента". Ваш веб-інспектор має показати щось схоже:

Зверніть увагу, що тут є SVG-елемент, який займає 500 пікселів по горизонталі і 50 пікселів по вертикалі.

Також зауважте, що браузери вважають пікселі одиницею за замовчуванням. Ми вказали розміри як 500 та 50, а не 500px та 50px. Ми можемо вказати px явно, або будь-яку іншу одиницю виміру, наприклад: em, pt, in, cm, і mm.

Прості фігури

Існує деякий набір фігур, які можна помістити всередину елемента SVG. Цей набір включає: rect, circle, ellipse, line, textі path.

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

0,0 100,20 200,40

rectмалює квадрат. Квадрат задається чотирма значеннями: x, y- Вказують точку верхнього лівого кута; width, height- вказують ширину та висоту квадрата. Цей квадрат займає весь простір нашого SVG:

circleмалює коло. Коло задається трьома величинами: cx, cyвказують точку, розташовану в центрі описуваного кола, rзадає радіус кола. Це коло розташоване в центрі нашого SVG, тому що атрибут cx("center-x") дорівнює 250. Приклад:

ellipseзадається схоже з circleале передбачається, що радіус задається по двох осях: по хі по у. Замість хвикористовуйте rx, замість y - ry.

lineмалює лінію. Використовуйте x1і y1для завдання координат початку лінії, та x2і y2для завдання координат кінця. Атрибут strokeповинен задавати колір лінії, інакше вона буде невидимою.

textмалює текст. Використовуйте x, щоб вказати лівий край, і y, щоб вказати вертикальну позицію так званої базової лінії

Easy-peasy Easy-peasy

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

Easy-peasy Easy-peasy

Також зауважте, коли будь-який візуальний елемент упирається в межу SVG-елемента, він буде обрізаний. Будьте обережні, коли використовуєте text, щоб ваші загагуліни тексту не були обрізані. Ви можете побачити, що трапиться з текстом, якщо виставити baseline (тобто у) рівним 50, таку ж, як висота SVG:

Easy-peasy Easy-peasy

pathмалює щось складніше, ніж фігури, описані вище (наприклад, силует країн на геокартах), і буде описаний окремо. А тепер ми працюватимемо з простими фігурами.

Стилізація SVG-елементів

За замовчуванням будь-який елемент SVG має чорну заливку та не має рамки. Якщо ви хочете щось більше, вам доведеться застосувати стилі до вашого елементу. Загальні властивості SVG перераховані нижче:

• fill- заливання. Колірне значення. Також як і CSS колір може бути вказаний декількома способами:
  • на ім'я: orange;
  • значення у шістнадцятковій системі числення: #3388aa, #38a;
  • значення у форматі RGB: rgb(10, 150, 20);
  • значення у форматі RGBA: rgba(10, 150, 20, 0.5).
• stroke- рамка. Колірне значення.
• stroke-width- ширина рамки (зазвичай у пікселях).
• opacity- прозорість. Числове значення в проміжку від 0.0(цілком прозоро) до 1.0(цілком мабуть).

З textтакож можна використовувати такі властивості:

• font-family
• font-size

Існує два способи застосування стилів до SVG-елементів: або безпосередньо прописувати стилі всередині елемента як його атрибути, або через правила CSS.

Нижче деякі CSS-властивості задані безпосередньо в елементі circle:

Інакше ми могли б зробити так: не прописувати атрибути стилю, а вказати клас стилів (так само як і звичайному HTML елементу):

а потім додати fill, strokeі stroke-widthпараметри в CSS-стилі необхідного класу:

Pumpkin ( fill: yellow; stroke: orange; stroke-width: 5; )

Другий підхід має кілька очевидних переваг:

1. Можна описати клас один раз і застосовувати його до багатьох елементів.
2. CSS-код простіше сприймати ніж атрибути всередині елементів.
3. З цих причин другий підхід більш простий в обслуговуванні, а також він швидше застосовується.

Використання CSS для застосування стилів до SVG, однак, може когось збентежити. fill, stroke, stroke-widthвсе-таки не CSS-властивості (найближчі CSS-еквіваленти це background-colorі border). Щоб допомогти вам запам'ятати, які правила в таблиці стилів вказані для SVG-елементів, бажано вмикати svgв CSS-селектор:

Svg .pumpkin ( /* ... */ )

Накладання та порядок їх малювання

У SVG немає таких шарів і ніякого поняття глибини. SVG не підтримує CSS-властивість z-indexТаким чином, фігури можуть бути впорядковані в рамках двовимірного простору.

І ще, якщо намалювати кілька фігур, вони перекриваються:

Порядок, в якому елементи вказані в коді, визначає їхню глибину. Фіолетовий квадрат вказаний у коді першим, тому першим він і малюється. Далі малюється синій квадрат над фіолетовим, далі зелений над синім та фіолетовим тощо.

Думайте так, що SVG-фігури малюються на полотні. Колір, який застосовується пізніше за всіх, зафарбовує інші кольори, опиняючись "попереду".

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

Прозорість

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

Існує два способи застосувати прозорість: використовувати колір RGB з альфа-каналом або встановити властивості opacityчислове значення.

Ви можете використовувати rgba()скрізь, де треба вказати колір, наприклад, в атрибутах fillі stroke. rgba()очікує, що ви передасте йому 3 значення в проміжку від 0 до 255 для червоного, зеленого та синього плюс альфа-канал (прозорість) в діапазоні від 0.0 до 1.0.

Зауважте, що з методом rgba(), прозорість застосовується до fillі strokeатрибутам незалежно. Заливка наступних кіл на 75% прозора, а їх рамка – на 25%:

Для застосування прозорості до всього елемента необхідно встановити атрибут opacity. Нижче повністю видимі кола:

а це ті ж кола з різною прозорістю:

Ви також можете використовувати атрибут opacityелемент, колір якого заданий у форматі rgba(). Коли ви це робите – прозорість множиться. Нижче кола використовують ті ж значення кольору RGBA для fillі stroke. Перший елемент не має атрибута opacity, а у двох інших встановлено:

Зверніть увагу, що у третього кола opacityодно 0.2 або 20%. Проте його фіолетова частина має прозорість 75%. Таким чином, фіолетова частина зрештою прозора на 0.2 * 0.75 = 0.15 або 15%.

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

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

Технологія була доступна аж з 1999 року, і 16 серпня 2011 року увійшла до списку рекомендацій W3C. Тим не менш, SVG досі не так часто використовується, незважаючи на безліч переваг у використанні векторної графіки замість растрової.

Переваги масштабованої векторної графіки

З точки зору використання графіки на сторінках веб-сайту, масштабована векторна графіка пропонує нам кілька переваг над растрової графікою, які включають:

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

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

Скорочення HTTP-запитів

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

Стилізація та скриптинг

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

Можливість анімації та редагування

SVG-об'єкт може бути анімований при використанні анімаційного елемента або за допомогою JS-бібліотеки на зразок jQuery. SVG-об'єкт також може бути відредагований за допомогою будь-якого текстового редактора або графічного програмного забезпечення на зразок (безкоштовний) або .

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

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

Малюємо прості фігури, використовуючи SVG

Наслідуючи специфікації, ми можемо малювати на кшталт багатокутників, кіл, ліній або еліпсів за допомогою SVG і, щоб браузер генерував масштабовану векторну графіку, всі ці графічні елементи повинні бути поміщені в теги «svg». Давайте розглянемо на прикладах, наведених нижче:

Лінія

Для того, щоб намалювати лінію за допомогою SVG, ми можемо використовувати елемент "line". Цей елемент використовується для малювання однієї прямої лінії, тому він складатиметься всього з двох точок: початкової та завершальної.

Як ви можете бачити вище, координата початкової точки лінії вказана у перших двох атрибутах х1 та х2, а координата завершальної точки вказана атрибутами y1 та y2.

Тут також є два інші атрибути: stroke та stroke-width, які відповідають за колір та ширину кордону. З іншого боку, ми також можемо визначити ці атрибути в рядковому стилі таким чином:

Style="stroke-width:1; stroke:rgb(0,0,0);"
і це дасть нам той самий результат.

*

Ламана лінія

Тут все дуже сходиться з "line", але за допомогою елемента "polyline" ми можемо намалювати кілька ліній замість однієї. Ось приклад:

Елемент "polyline" має атрибути точок, які містять усі координати ліній.

*

Прямокутник

Намалювати прямокутник ми можемо так само просто, лише за допомогою елемента rect. Нам тільки потрібно буде вказати ширину і висоту:

*

Окружність

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

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

*

Еліпс

Ми можемо намалювати еліпси за допомогою елемента ellipse. Тут все працює приблизно так само, як і з колом, але цього разу ми можемо керувати окремо радіусом лінії х та радіусом лінії y за допомогою атрибутів rx та ry.

*

Багатокутник

За допомогою елемента polygon ми можемо малювати багатокутники, фігури з декількома кутами і сторонами на зразок трикутника, восьмикутника. Приклад:

*

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

Як видно, малювати прості фігури за допомогою SVG HTML досить просто. Проте, якщо нам потрібний складніший об'єкт, цей метод нам не підійде.

На щастя, як ми вже вказали вище, ми можемо використовувати редактор векторної графіки на зразок Adobe Illustrator або Inkscape для того, щоб зробити цю роботу. Якщо ви знайомі з цим ПЗ, то ви легко зможете малювати об'єкти за допомогою зручного інтерфейсу, ніж за допомогою коду HTML.

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

Результат буде схожим.

У цьому прикладі ми використовували з .

*

Браузерна підтримка масштабованої векторної графіки

Що стосується підтримки в браузерах, то масштабована векторна графіка вже сьогодні добре підтримується за винятком IE8 і більш ранніх версій. Але це можна виправити за допомогою JavaScript-бібліотеки під назвою . Щоб полегшити завдання, ми скористаємося інструментом , щоб конвертувати наш SVG-код у формат Raphael.

Для початку, завантажте та увімкніть бібліотеку Raphael.js у ваш HTML-код. Потім, завантажте svg-файл на сайт, скопіюйте та вставте згенерований код у наступну функцію load:

Window.onload=function() (
//the Raphael code goes here
}
Всередині тега body вставте наступний div з id атрибутом rsr.

І на цьому ми скінчили! Перегляньте приклад, наведений за посиланням нижче.

На завершення

Отже, це є основи SVG. Ми сподіваємось, що тепер ви трохи розумієте цей предмет. Це один із найкращих способів оптимізувати продуктивність ваших сторінок, і при цьому надати графіку, здатну чітко відображатись навіть на екранах Retina.

Як завжди, якщо ви допитливі, то ми підготували вам невелику добірку додаткових статей.

* (Вступ до SVG)
* (SVG: не залежатимемо від дозволу)
* (Чому б не використовувати SVG?)

Дякуємо за читання, і сподіваємось, що ця стаття виявиться корисною вам!

Увага! У вас немає прав для перегляду прихованого тексту.

HTML-зображеннядодаються на веб-сторінки за допомогою тега . Використання графіки робить веб-сторінки візуально привабливішим. Зображення допомагають краще передати суть та зміст веб-документа.

За допомогою HTML-тегів

Вставка зображень у HTML-документ

1. Тег

Елемент представляє зображення та його резервний контент, який додається за допомогою атрибута alt . Оскільки елемент є малим, то рекомендується розташовувати його всередині блокового елемента, наприклад,

Або