Приклад з використанням SVG. SVG: основи векторної графіки в HTML Svg html приклади

тег має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:

для тега доступні наступні атрибути:

Атрибут	Опис, прийняте значення
alt	Атрибут alt додає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення. Синтаксис: alt \u003d "(! LANG: опис зображення" . !}
crossorigin	Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можуть бути використані повторно. Допустимі значення: anonymous - Cross-origin запит виконується за допомогою HTTP-заголовка, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані сервера, з якого запитується контент, то зображення буде зіпсовано і його використання буде обмежено. use-credentials - Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin \u003d "anonymous".
height	Атрибут height задає висоту зображення. Може вказуватися в px або%. Синтаксис: height: 300px.
ismap	Атрибут ismap вказує на те, що картинка є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на зображення-карту координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається тільки в разі, якщо елемент є нащадком елемента з дійсним атрибутом href. Синтаксис: ismap.
longdesc	URL розширеного опису зображення, яке доповнює атрибут alt. Синтаксис: longdesc \u003d "http://www.example.com/description.txt".
src	Атрибут src задає шлях до зображення. Синтаксис: src \u003d "flower.jpg".
sizes	Задає розмір зображення в залежності від параметрів відображення. Працює тільки при заданому атрибуті srcset. Значенням атрибута є одна або кілька рядків, зазначених через кому.
srcset	Створює список джерел для зображення, які будуть обрані, виходячи з дозволу екрану. Може використовуватися разом або замість атрибута src. Значенням атрибута є одна або кілька рядків, розділених комою.
usemap	Атрибут usemap визначає зображення в якості карти-зображення. Значення обов'язково має починатися з символу #. Значення асоціюється зі значенням атрибута name або id тега
width	Атрибут width задає ширину зображення. Може вказуватися в px або%. Синтаксис: width: 100%.

1.1. Адреса зображення

Адреса зображення може бути вказаний повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)

Або ж через відносний шлях від документа або кореневого каталогу сайту:
url (../ images / anyphoto.png) - відносний шлях від документа,
url (/images/anyphoto.png) - відносний шлях від кореневого каталогу.

Це інтерпретується наступним чином:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images / - перейти до папки з зображеннями,
anyphoto.png - вказує на файл зображення.

1.2. розміри зображення

Без завдання розмірів зображення малюнок відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width і height. Якщо буде поставлено тільки один з атрибутів, то другий буде обчислюватися автоматично для збереження пропорцій малюнка.

1.3. Формати графічних файлів

формат JPEG (Joint Photographic Experts Group). Зображення JPEG ідеальні для фотографій, вони можуть містити мільйони різних квітів. Стискають зображення краще GIF, але текст і великі площі із суцільним кольором можуть покритися плямами.

формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області із суцільним кольором, наприклад, логотипів. GIF-файли дозволяють встановити один з кольорів прозорим, завдяки чому фон веб-сторінки може проявлятися через частину зображення. Також GIF-файли можуть включати в себе просту анімацію. GIF-зображення містять всього лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.

формат PNG (Portable Network Graphics). Включає в себе кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один з кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.

формат APNG (Animated Portable Network Graphics). Формат зображення, заснований на форматі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.

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

формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальна) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри і графічних даних. У заголовку зберігається інформація про графічному зображенні і файлі (глибина пікселів, висота, ширина і кількість квітів). Палітра вказується тільки в тих Bitmap-файлах, які містять палітровие зображення (8 і менше біт) і перебуває не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в даному форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.

формат ICO (Windows icon). Формат зберігання значків файлів в Microsoft Windows. Також, Windows icon, використовується як іконка на сайтах в інтернеті. Саме картинка такого формату відображається поруч з адресою сайту або закладкою в браузері. Один ICO-файл містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш вживані квадратні значки зі сторонами 16, 32 і 48 пікселів.

2. Тег

тег

Для тега доступний атрибут name, який задає ім'я карти. Значення атрибут name для тега

елемент

3. Тег

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

4. Приклад створення карти-зображення

1) Розмічаємо вихідне зображення на активні області потрібної форми. Координати областей можна обчислити за допомогою програми для обробки фотографій, наприклад, Adobe Photoshop або Paint.

2) Задаємо ім'я карти, додавши його в тег

Jpg "alt \u003d" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Рис. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом

Цей пост - перший із серії статей про SVG (Scalable Vector Graphic), що розповідає про основи векторної графіки на сайті.

Проста лінія за допомогою тега line з усього двома параметрами - точками початку (x1 і x2) і кінця (y1 і y2):

Також можна додати атрибути або стилі stroke and stroke-width, щоб задати колір і ширину:

Style \u003d "stroke-width: 1; stroke: rgb (0,0,0);"

Ламана лінія

прямокутник

окружність

еліпс

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

Використання редакторів

Приклад - зображення айпода з сайту OpenClipArt.org.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

лінія

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

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

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

Style \u003d "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.

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

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

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

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

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

Спасибі за читання, і сподіваємося, що дана стаття буде корисною вам!

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

Базові концепції та використання

Формат масштабована векторна графіки (Scalable Vector Graphics, SVG) є частиною сімейства стандартів векторної графіки. Векторна графіка відрізняється від растрової, в якій визначення кольору кожного пікселя зберігається в деякому масиві даних. Найбільш поширеними растровими форматами, використовуваними в Інтернеті в даний час, є JPEG, GIF і PNG, кожен з яких має свої переваги і недоліки.

Часто використовувані скорочення

• CSS: Cascading Style Sheets (Каскадні таблиці стилів)
• GIF: Graphics Interchange Format (Формат обміну графічними даними)
• GUI: Graphical User Interface (Графічний користувальницький інтерфейс)
• HTML: Hypertext Markup Language (Мова розмітки гіпертексту)
• JPEG: Joint Photographic Experts Group (Об'єднана група експертів з машинної обробці фотографічних зображень)
• PNG: Portable Network Graphics (Стерпна мережева графіка)
• SVG: Scalable Vector Graphics (Масштабируемая векторна графіка)
• XML: Extensible Markup Language (Розширювана мова розмітки)

Формат SVG володіє декількома перевагами перед будь-яким растровим форматом:

• Графіка в форматі SVG створюється з використанням математичних формул, які вимагають збереження в вихідному файлі набагато меншої кількості даних, оскільки відсутня необхідність збереження даних по кожному окремому пікселу.
• Векторні зображення краще масштабуються. Спроба збільшення масштабу опублікованих в Інтернеті зображень в порівнянні з початковим розміром може призводити до спотворення (або пикселизации) зображень.

  Це пов'язано з тим, що вихідні піксельні дані були призначені для конкретного розміру зображення. При зміні розміру програма виведення зображень робить припущення щодо того, які дані слід використовувати для заповнення нових пікселів. Векторні зображення більш стійкі до масштабування; при зміні розміру зображення відповідні математичні формули можна скорегувати.

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

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

основи SVG

При створенні графічного зображення в форматі SVG використовується зовсім інший процес, ніж при створенні файлів у форматах JPEG, GIF або PNG. Файли JPEG, GIF і PNG зазвичай створюються за допомогою будь-якої програми редагування зображень, наприклад, Adobe Photoshop. Зображення в форматі SVG, як правило, створюються з використанням будь-якої мови на базі XML. Існують графічні інтерфейси редагування графіки в форматі SVG, які генерують для вас код XML, що лежить в основі зображення. Проте, в даній статті передбачається, що ви працюєте безпосередньо з XML. Інформацію про програми редагування зображень у форматі SVG можна знайти в розділі.

У лістингу 1 показаний приклад простого XML-файла SVG, в якому малюється червоне коло з 2-піксельної чорної кордоном.

Лістинг 1. XML-файл SVG

Наведений вище код дає зображення, показане на малюнку 1.

Малюнок 1. Червоне коло з 2-піксельної чорної кордоном

Створення базових геометричних фігур

При роботі з графікою в форматі SVG для створення геометричних фігур використовуються теги XML; ці елементи XML показані в таблиці 1.

Таблиця 1. Елементи XML для створення графіки в форматі SVG

елемент line

Елемент line представляє собою найпростіший графічний елемент. У лістингу 2 показано, як створити горизонтальну лінію.

Лістинг 2. Створення горизонтальної лінії

Код, наведений у лістингу 2, дає зображення, показане на малюнку 2.

Малюнок 2. Проста горизонтальна лінія

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

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

Визначення лінії можна створити шляхом завдання початкових і кінцевих координат по осях X і Y щодо робочої області. Атрибути x1 і y1 представляють собою координати початку, а атрибути x2 і y2 - координати кінця лінії. Щоб змінити напрямок креслення лінії, необхідно просто змінити координати. Наприклад, шляхом зміни попереднього прикладу ви можете створити діагональну лінію, як показано в лістингу 3.

Лістинг 3. Створення діагональної лінії

На малюнку 3 показаний результат коду, представленого в лістингу 3.

Малюнок 3. Діагональна лінія

елемент polyline

Ламана лінія являє собою малюнок, складений з кількох ліній. У лістингу 4 наводиться приклад створення малюнка, який виглядає, як сходинки сходів.

Код, наведений у лістингу 4, дає зображення, показане на малюнку 4.

Ламана лінія створюється за допомогою атрибута points і шляхом визначення пар координат по осях X і Y, розділених комами. У представленому прикладі перша точка визначена як 0,40, де 0 - координата по осі X, а 40 - координата по осі Y. Проте одного набору точок недостатньо для виведення зображення на екран, оскільки цей набір вказує рендерер SVG лише початкову позицію. Вам потрібно щонайменше два набори крапок: початкова точка і кінцева точка (наприклад, points \u003d "0,40 40,40").

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

Лістинг 5. Створення нерівній лінії

Код, наведений у лістингу 5, дає зображення, показане на малюнку 5.

Малюнок 5. Нерівна лінія

елемент rect

Для створення прямокутника потрібно всього лише визначити його ширину і висоту, як показано в лістингу 6.

Лістинг 6. Створення прямокутника

Код, наведений у лістингу 6, дає зображення, показане на малюнку 6.

Малюнок 6. Прямокутник

За допомогою тега rect також можна створити квадрат; квадрат - це просто прямокутник з однаковими висотою і шириною.

елемент circle

Коло створюється шляхом визначення координат X і Y центру кола і радіусу, як показано в лістингу 7.

Лістинг 7. Створення кола

Код, наведений у лістингу 7, дає зображення, показане на малюнку 7.

Малюнок 7. Коло

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

елемент ellipse

По суті, еліпс - це коло, для якого в коді задані два радіуса, як показано в лістингу 8.

Лістинг 8. Створення еліпса

Код, наведений у лістингу 8, дає зображення, показане на малюнку 8.

Малюнок 8. Еліпс

В цьому випадку атрибути cx і cy також визначають координати центру щодо полотна. Однак у випадку з еліпсом ви визначаєте один радіус для осі X і другий радіус для осі Y, використовуючи для цього атрибути rx і ry.

елемент polygon

Багатокутник - це геометрична фігура, яка містить не менше трьох сторін. У лістингу 9 створюється простий трикутник.

Лістинг 9. Створення трикутника

Код, наведений у лістингу 9, дає зображення, показане на малюнку 9.

Малюнок 9. Трикутник

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

Додаючи пари координат по осях X і Y, можна створювати багатокутники з будь-якою кількістю сторін. Наприклад, шляхом зміни коду попереднього прикладу ви можете створити чотиристоронній багатокутник, як показано в лістингу 10.

Лістинг 10. Створення чотиристороннього багатокутника

Код, наведений у лістингу 10, дає зображення, показане на малюнку 10.

Малюнок 10. Чотирибічний багатокутник

За допомогою тега polygon можна також створювати геометричні фігури складної форми. У лістингу 11 створюється малюнок зірки.

Лістинг 11. Створення зірки

Код, наведений у лістингу 11, дає зображення, показане на малюнку 11.

Малюнок 11. Зірчастий багатокутник

елемент path

Елемент path найскладніший з усіх елементів малювання, дозволяє створювати довільні малюнки з використанням набору спеціальних команд. Елемент path підтримує команди, зазначені в Таблиці 2.

Таблиця 2. Команди, що підтримуються елементом path

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

За допомогою елемента path можна створювати будь-які прості геометричні фігури з попередніх прикладів даної статті. У лістингу 12 за допомогою елемента path створюється звичайний трикутник.

Лістинг 12. Створення трикутника за допомогою елемента path

Код, наведений у лістингу 12, дає зображення, показане на малюнку 12.

Малюнок 12. Трикутник, створений за допомогою елемента path

Список команд визначається за допомогою атрибуту d. В даному прикладі креслення починається в точці з координатами X 150 і Y 0, визначеними командою переміщення в точку (M150 0). Потім за допомогою команди креслення лінії до точки (L75 200). проводиться лінія до точки з координатами X \u003d 75 і Y \u003d 200. Після цього проводиться ще одна лінія з допомогою ще однієї команди креслення лінії до точки (L225 200). Нарешті, малюнок замикається за допомогою команди замикання (Z). Ніякі координати команду Z не супроводжують, оскільки для замикання траєкторії ви за визначенням проводите лінію з поточного положення назад у вихідну точку малюнка (в даному випадку точку з координатами X \u003d 150, Y \u003d 0).

Мета наведеного прикладу полягала в тому, щоб продемонструвати вам суть концепції; якщо вам необхідно створити всього лише звичайний трикутник, краще скористатися тегом polygon.

Справжня «міць» елемента path полягає в його здатності створювати фігури нестандартної форми, як показано в лістингу 13. Цей приклад взятий з документа Консорціуму World Wide Web (W3C) Scalable Vector Graphics (SVG) 1.1 ( «Швидка, векторна графіка (SVG) 1.1») (друге видання) (Див. Розділ).

Лістинг 13. Створення нестандартної фігури за допомогою елемента path

Код, наведений у лістингу 13, дає зображення, показане на малюнку 13.

Малюнок 13. Нестандартна фігура, створена за допомогою елемента path

За допомогою елемента path можна створювати складні малюнки, наприклад діаграми і хвилясті лінії. Зверніть увагу на те, що в представленому прикладі використовуються кілька елементів path. При створенні малюнків ви не обмежені будь-яким одним елементом малювання в кореневому тезі SVG ..

Фільтри і градієнти

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

фільтри

Фільтри можна використовувати для застосування спеціальних ефектів до зображень у форматі SVG. SVG підтримує такі фільтри.

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight

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

Лістинг 14. Створення ефекту відкидаємо тіні для прямокутника

Код, наведений у лістингу 14, дає зображення, показане на малюнку 14.

Малюнок 14. Ефект відкидаємо тіні для прямокутника

Фільтри визначаються всередині елемента def (скорочення від англійського «definition», т. Е. «Визначення»). Фільтру в даному прикладі присвоюється ідентифікатор (id) "f1". Сам тег filter має атрибути для визначення координат по осях X і Y, а також ширини і висоти фільтра. Усередині тега filter ви використовуєте необхідні елементи фільтра і встановлюєте потрібні значення для їх властивостей.

Після визначення фільтра ви пов'язуєте його з конкретним малюнком шляхом використання атрибута filter, як показано в. Як значення url встановіть присвоєне фільтру значення атрибута id.

градієнти

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

У лістингу 15 створюється еліпс з лінійним градієнтом.

Лістинг 15. Створення еліпса з лінійним градієнтом

Код, наведений у лістингу 15, дає зображення, показане на малюнку 15.

Малюнок 15. Еліпс з лінійним градієнтом

У лістингу 16 створюється еліпс з радіальним градієнтом.

Лістинг 16. Створення еліпса з радіальним градієнтом

Код, наведений у лістингу 16, дає зображення, показане на малюнку 16.

Малюнок 16. Еліпс з радіальним градієнтом

Градієнти, подібно фільтрам, визначаються всередині елемента def. Кожному градієнту присвоюється ідентифікатор (id). Атрибути градієнта (наприклад, кольору) задаються всередині тега градієнта за допомогою елементів stop. Щоб застосувати до малюнка будь-якої градієнт, встановіть в якості значення url для атрибута fill ідентифікатор (id) необхідного градієнта.

Текст і SVG

Крім створення базових геометричних фігур, SVG також можна використовувати для генерування тексту, як показано в лістингу 17.

Лістинг 17. Створення тексту з використанням SVG

Код, наведений у лістингу 17, дає зображення, показане на малюнку 17.

Малюнок 17. Текст, створений за допомогою SVG

У цьому прикладі за допомогою елемента text створюється пропозиція I love SVG. При використанні елемента text фактично відображається текст знаходиться між відкриває і закриває елементами text.

Ви можете виводити текст по різним осях і навіть по траєкторіях. У лістингу 18 текст відображається по дугоподібної траєкторії.

Лістинг 18. Створення тексту за дугоподібної траєкторії

Код, наведений у лістингу 18, дає зображення, показане на малюнку 18.

Малюнок 18. Текст, розміщений по дугоподібної траєкторії

У цьому прикладі в кореневій тег SVG додається додатковий простір імен XML xlink. Траєкторія, використовувана для згинання тексту дугою, створюється всередині елемента def, тому сама траєкторія на малюнку не візуалізується. Текст, що відображається вкладений всередину елемента textPath, який використовує простір імен xlink для звернення до id необхідної траєкторії.

Як і при роботі з іншими малюнками в форматі SVG, ви також можете застосовувати до тексту фільтри і градієнти. У лістингу 19 до тексту застосовуються фільтр і градієнт.

Лістинг 19. Створення тексту з фільтром і градієнтом

Код, наведений у лістингу 19, дає зображення, показане на малюнку 19.

Малюнок 19. Текст з фільтром і градієнтом

Додавання XML-коду SVG на Web-сторінки

Після того як XML-код SVG створений, його можна включати в HTML-сторінки декількома способами. Перший метод полягає в прямій вставці XML-коду SVG в HTML-документ, як показано в лістингу 20.

Лістинг 20. Пряма вставка XML-коду SVG в HTML-документ

Ймовірно, цей метод є найпростішим, але він не сприяє повторному використанню. Пам'ятайте, що XML-код SVG можна зберегти у файлі з расшіреніем.svg. Коли ви зберігаєте малюнок SVG в файле.svg, для його включення в Web-сторінки можна використовувати елементи embed, object і iframe. У лістингу 21 показаний код для включення XML-файла SVG за допомогою елемента embed.

Лістинг 21. Включення XML-файла SVG за допомогою елемента embed

У лістингу 22 показаний код для включення XML-файла SVG за допомогою елемента object.

Лістинг 22. Включення XML-файла SVG за допомогою елемента object

У лістингу 23 показаний код для включення XML-файла SVG за допомогою елемента iframe.

Лістинг 23. Включення XML-файла SVG за допомогою елемента iframe

При використанні одного з цих методів ви можете включати один і той же малюнок SVG в кілька сторінок і виробляти оновлення шляхом редагування вихідного файла.svg.

висновок

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