Векторна графіка у вебпрограмуванні

8. Векторна графіка і гумова графіка

Прокрутити вниз

Векторна графіка у вебпрограмуванні. У цій статті розглянемо що таке векторна і гумова графіка. А після прочитання зможете перевірити знання пройшовши тест. Сертифікат про проходження тесту можна обміняти на валюту нашої школи GoMother – коїни. Коїни можна обміняти на різні подарунки. Почнемо!
Векторна графіка необхідний елемент на сайті. Вона має невеликі розміри файлу і високу масштабованість – при збільшенні масштабу пікселі не збільшуються разом з графікою. У цій статті ми розповімо, як вбудовувати векторну графіку на Вашу сторінку.

Важливо: ця стаття націлена ознайомити вас з векторною графікою в розрізі вебсторінок.

Векторна графіка у вебпрограмуванні

Є два типи зображень у веброзробці – растрова і векторна.

  • Растрове зображення задається сіткою пікселів – файл растрового зображення містить інформацію про розташування і колір кожного пікселя. Серед популярних форматів зображень даного типу вважаються Bitmap (.bmp), PNG (.png), JPEG (.jpg) і GIF (.gif)
  • Векторне зображення визначається алгоритмом – файл векторного зображення містить фігури та правила, за якими комп’ютер може обчислити як має виглядати зображення, коли виводиться на екран. SVG формат дозволяє нам створювати векторну графіку для використання у вебдокументах.

Розгляньмо відмінність між типами графіки. Ви бачите два зображення. Перше в форматі PNG, а друге SVG. Спочатку можна не помітити різницю, але якщо змінити масштаб сторінки – PNG зображення стає піксельним, бо містить головну інформацію, що позначає стан і колір всіх пікселів. Це відбувається в результаті того, що при збільшенні кожен піксель також збільшується, охоплюючи кілька пікселів дисплея, тому стають помітні пікселі. Векторне зображення залишається на вигляд якісним і красивим, через те, що фігури, змінюють масштаб спільно з ним.Векторна графіка у вебпрограмуванні

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

Що таке SVG?

SVG це мова на базі XML для опису векторних зображень. Тобто це мова розмітки, як і HTML, тільки що містить безліч різних елементів для визначення фігур вашого зображення, а також параметрів їх зображення. SVG призначений для розмітки графіки, а не вмісту. У найпростішому випадку, ви можете використовувати елементи для створення простих фігур, таких як <circle> (коло) і <rect> (прямокутник). Складніші SVG елементи включають <feColorMatrix> (en-US) (розкладання кольору з використанням матриці), <animate> (анімація частин вашого векторного зображення) і <mask> (en-US) (застосування маски до зображення.)

Як простий приклад, наступний код створює коло і прямокутник:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg>

В результаті виходить наступне:

З прикладу вище можна зробити висновок, що SVG легко створювати вручну. Але це не зовсім так, використовуючи текстовий редактор можна створити тільки прості SVG зображення. Що б створити складну графіку варто використовувати редактори, такі як Inkscape або Illustrator. Ці програми дозволяють створювати різні зображення, використовуючи безліч графічних інструментів, і створювати наближення фотографій (наприклад опція Trace Bitmap feature додатки Inkscape.)

Як додати SVG на сторінку

Щоб вбудувати SVG використовуючи елемент, вам просто потрібно послатися на нього в атрибуті src, як і слід було очікувати. Вам знадобиться атрибут height або width (або обидва, якщо ваш SVG не має власного співвідношення сторін). Якщо ви ще цього не робили, будь ласка, прочитайте нашу статтю – зображення в HTML.

<img
src = “equilateral.svg”
alt = “triangle with all three sides equal”
height = “87px”
width = “100px” />

Як включити SVG в ваш HTML код

Ви можете відкрити файл SVG в текстовому редакторі, скопіювати цей код і вставити його в ваш HTML документ – такий метод іноді називають вбудуванням SVG (SVG inline або inlining SVG). Переконайтеся, що фрагмент вашого SVG коду починається і закінчується з тегів <svg>

Гумові зображення

Збільшувати або зменшувати зображення пропорційно «гумовому» дизайну для сучасних браузерів не буде проблемою. Для цього потрібно лише написати в коді CSS наступне:

Img {max-width: 100%;

}

В результаті все зображення буде масштабуватись аж до 100% ширини їх елемента-контейнера. Крім цього, аналогічний атрибут і властивість можуть бути застосовані до інших мультимедіа. наприклад:

Img, object, video, embed {max-width: 100%;

}

Вони теж будуть масштабуватись, не рахуючи кількох прикладів винятків. Такі, як відео в тезі <iframe>. Давайте зараз розглянемо принцип додавання зображень.

Використовуючи цей підхід потрібно враховувати кілька моментів:

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

Бажаємо вам удачі на тесті! У вас все вийде!