Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Масштабна векторна графіка в HTML5

  1. Часто використовувані скорочення
  2. основи SVG
  3. Лістинг 1. XML-файл SVG
  4. Малюнок 1. Червоне коло з 2-піксельної чорної кордоном
  5. Таблиця 1. Елементи XML для створення графіки в форматі SVG
  6. Лістинг 2. Створення горизонтальної лінії
  7. Малюнок 2. Проста горизонтальна лінія
  8. Лістинг 3. Створення діагональної лінії
  9. Малюнок 3. Діагональна лінія
  10. Лістинг 4. Створення ламаної лінії, схожою на сходинки сходів
  11. Малюнок 4. Ламана лінія, схожа на сходинки сходів
  12. Лістинг 5. Створення нерівній лінії
  13. Малюнок 5. Нерівна лінія
  14. Лістинг 6. Створення прямокутника
  15. Малюнок 6. Прямокутник
  16. елемент circle
  17. Лістинг 7. Створення кола
  18. Малюнок 7. Коло
  19. елемент ellipse
  20. Лістинг 8. Створення еліпса
  21. Малюнок 8. Еліпс
  22. елемент polygon
  23. Лістинг 9. Створення трикутника
  24. Малюнок 9. Трикутник
  25. Лістинг 10. Створення чотиристороннього багатокутника
  26. Малюнок 10. Чотирибічний багатокутник
  27. Лістинг 11. Створення зірки
  28. Малюнок 11. Зірчастий багатокутник
  29. Таблиця 2. Команди, що підтримуються елементом path
  30. Лістинг 12. Створення трикутника за допомогою елемента path
  31. Малюнок 12. Трикутник, створений за допомогою елемента path
  32. Лістинг 13. Створення нестандартної фігури за допомогою елемента path
  33. Малюнок 13. Нестандартна фігура, створена за допомогою елемента path
  34. Фільтри і градієнти
  35. фільтри
  36. Лістинг 14. Створення ефекту відкидаємо тіні для прямокутника
  37. Малюнок 14. Ефект відкидаємо тіні для прямокутника
  38. градієнти
  39. Лістинг 15. Створення еліпса з лінійним градієнтом
  40. Малюнок 15. Еліпс з лінійним градієнтом
  41. Лістинг 16. Створення еліпса з радіальним градієнтом
  42. Малюнок 16. ЕЛІПС з радіальнім градієнтом
  43. Текст і SVG
  44. Лістинг 17. Створення тексту з використанням SVG
  45. Малюнок 17. Текст, створений за допомогою SVG
  46. Лістинг 18. Створення тексту за дугоподібної траєкторії
  47. Малюнок 18. Текст, розміщений по дугоподібної траєкторії
  48. Лістинг 19. Створення тексту з фільтром і градієнтом
  49. Малюнок 19. Текст з фільтром і градієнтом
  50. Лістинг 20. Пряма вставка XML-коду SVG в HTML-документ
  51. Лістинг 21. Включення XML-файла SVG за допомогою елемента embed
  52. Лістинг 22. Включення XML-файла SVG за допомогою елемента object
  53. Лістинг 23. Включення XML-файла SVG за допомогою елемента iframe
  54. Висновок
  55. Ресурси для скачування

Наша взаимовыгодная связь https://banwar.org/

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

Формат масштабована векторна графіки (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
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <circle cx = "100" cy = "50" r = "40" stroke = "black" stroke-width = "2" fill = "red" /> </ svg>

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

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

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

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

Таблиця 1. Елементи XML для створення графіки в форматі SVG
Елемент Опис line Створює просту лінію polyline Формує фігури, побудовані з використанням декількох визначень ліній rect Створює прямокутник circle Створює коло ellipse Створює еліпс polygon Створює багатокутник path Дозволяє визначати довільні траєкторії

елемент line

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

Лістинг 2. Створення горизонтальної лінії
<Svg xmlns = "http://www.w3.org/2000/svg" version = '1.1' width = "100%" height = "100%"> <line x1 = '25 'y1 = "150" x2 = '300' y2 = '150' style = 'stroke: red; stroke-width: 10' /> </ svg>

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

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

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

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

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

Лістинг 3. Створення діагональної лінії
<Svg xmlns = "http://www.w3.org/2000/svg" version = '1.1' width = "100%" height = "100%"> <line x1 = "0" y1 = "0" x2 = "200" y2 = "200" style = 'stroke: red; stroke-width: 10' /> </ svg>

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

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

елемент polyline

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

Лістинг 4. Створення ламаної лінії, схожою на сходинки сходів
<Svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%" version = '1.1'> <polyline points = "0,40 40,40 40, 80 80,80 80,120 120,120 120,160 "style =" fill: white; stroke: red; stroke-width: 4 "/> </ svg>

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

Малюнок 4. Ламана лінія, схожа на сходинки сходів

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

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

Лістинг 5. Створення нерівній лінії
<Svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%" version = '1.1'> <polyline points = "20,20 40,25 60, 40 80,120 120,140 200,180 "style =" fill: white; stroke: red; stroke-width: 3 "/> </ svg>

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

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

елемент rect

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

Лістинг 6. Створення прямокутника
<Svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%" version = '1.1'> <rect width = "300" height = "100" style = "fill: red" /> </ svg>

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

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

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

елемент circle

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

Лістинг 7. Створення кола
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <circle cx = "100" cy = "50" r = "40" fill = "red" /> < / svg>

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

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

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

елемент ellipse

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

Лістинг 8. Створення еліпса
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <ellipse cx = "300" cy = "80" rx = "100" ry = "50" style = " fill: red; "/> </ svg>

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

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

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

елемент polygon

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

Лістинг 9. Створення трикутника
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <polygon points = "200,10 250,190 160,210" style = "fill: red; stroke: black; stroke-width : 1 "/> </ svg>

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

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

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

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

Лістинг 10. Створення чотиристороннього багатокутника
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <polygon points = "220,10 300,210 170,250 123,234" style = "fill: red; stroke: black; stroke- width: 1 "/> </ svg>

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

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

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

Лістинг 11. Створення зірки
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <polygon points = "100,10 40,180 190,60 10,60 160,180 100,10" style = "fill: red; stroke: black; stroke-width: 1 "/> </ svg>

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

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

Елементpath

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

Таблиця 2. Команди, що підтримуються елементом path
Команда Опис M Переміститися в точку L Лінія до точки H Горизонтальна лінія до точки V Вертикальна лінія до точки C Крива до точки S Гладка крива до точки Q Квадратична крива Безьє до точки T Гладка квадратична крива Безьє до точки A Еліптична дуга до точки Z Замкнути траєкторію в точці

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

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

Лістинг 12. Створення трикутника за допомогою елемента path
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <path d = "M150 0 L75 200 L225 200 Z" style = "fill: red" /> </ svg >

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

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

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

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

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

Лістинг 13. Створення нестандартної фігури за допомогою елемента path
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <path d = "M300,200 h-150 a150,150 0 1,0 150, -150 z" fill = "red" stroke = "blue" stroke-width = "5" /> <path d = "M275,175 v-150 a150,150 0 0,0 -150,150 z" fill = "yellow" stroke = "blue" stroke-width = "5" /> <path d = "M600,350 l 50, -25 a25,25 -30 0,1 50, -25 l 50, -25 a25,50 -30 0,1 50, - 25 l 50, -25 a25,75 -30 0,1 50, -25 l 50, -25 a25,100 -30 0,1 50, -25 l 50, -25 "fill =" none "stroke =" red "stroke-width =" 5 "/> </ svg>

Код, наведений у лістингу 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. Створення ефекту відкидаємо тіні для прямокутника
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <defs> <filter id = "f1" x = "0" y = "0" width = "200% "height =" 200% "> <feOffset result =" offOut "in =" SourceAlpha "dx =" 20 "dy =" 20 "/> <feGaussianBlur result =" blurOut "in =" offOut "stdDeviation =" 10 "/ > <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter> </ defs> <rect width = "90" height = "90" stroke = "green" stroke-width = " 3 "fill =" yellow "filter =" url (# f1) "/> </ svg>

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

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

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

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

градієнти

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

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

Лістинг 15. Створення еліпса з лінійним градієнтом
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <defs> <linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = " 100% "y2 =" 0% "> <stop offset =" 0% "style =" stop-color: rgb (255,255,0); stop-opacity: 1 "/> <stop offset =" 100% "style = "stop-color: rgb (255,0,0); stop-opacity: 1" /> </ linearGradient> </ defs> <ellipse cx = "200" cy = "70" rx = "85" ry = " 55 "fill =" url (# grad1) "/> </ svg>

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

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

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

Лістинг 16. Створення еліпса з радіальним градієнтом
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <defs> <radialGradient id = "grad1" cx = "50%" cy = "50%" r = " 50% "fx =" 50% "fy =" 50% "> <stop offset =" 0% "style =" stop-color: rgb (255,255,255); stop-opacity: 0 "/> <stop offset =" 100 % "style =" stop-color: rgb (255,0,0); stop-opacity: 1 "/> </ radialGradient> </ defs> <ellipse cx =" 200 "cy =" 70 "rx =" 85 "ry =" 55 "fill =" url (# grad1) "/> </ svg>

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

Малюнок 16. ЕЛІПС з радіальнім градієнтом

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

Текст і SVG

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

Лістинг 17. Створення тексту з використанням SVG
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <text x = "0" y = "15" fill = "red"> I love SVG </ text> </ svg>

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

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

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

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

Лістинг 18. Створення тексту за дугоподібної траєкторії
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" xmlns: xlink = "http://www.w3.org/1999/xlink"> <defs> <path id = "path1" d = "M75,20 a1,1 0 0,0 100,0" /> </ defs> <text x = "10" y = "100" style = "fill: red;"> <textPath xlink: href = "# path1"> I love SVG I love SVG </ textPath> </ text> </ svg>

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

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

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

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

Лістинг 19. Створення тексту з фільтром і градієнтом
<Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" xmlns: xlink = "http://www.w3.org/1999/xlink"> <defs> <radialGradient id = "grad1" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%"> <stop offset = "0%" style = "stop-color: red; stop-opacity: 0 "/> <stop offset =" 100% "style =" stop-color: rgb (0,0,0); stop-opacity: 1 "/> </ radialGradient> <filter id = "f1" x = "0" y = "0" width = "200%" height = "200%"> <feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20" /> <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" /> <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" /> </ filter> </ defs> <text x = "10" y = "100" style = "fill: url (# grad1); font-size: 30px;" filter = "url (# f1)"> I love SVG I love SVG </ text> </ svg>

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

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

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

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

Лістинг 20. Пряма вставка XML-коду SVG в HTML-документ
<Html> <head> <title> Embedded SVG </ title> </ head> <body style = "height: 600px; width: 100%; padding: 30px;"> <svg xmlns = "http: // www. w3.org/2000/svg "version =" 1.1 "> <circle cx =" 100 "cy =" 50 "r =" 40 "fill =" red "/> </ svg> </ body> </ html>

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

Лістинг 21. Включення XML-файла SVG за допомогою елемента embed
<Embed src = "circle.svg" type = "image / svg + xml" />

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

Лістинг 22. Включення XML-файла SVG за допомогою елемента object
<Object data = "circle.svg" type = "image / svg + xml"> </ object>

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

Лістинг 23. Включення XML-файла SVG за допомогою елемента iframe
<Iframe src = "circle1.svg"> </ iframe>

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

Висновок

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

Ресурси для скачування

Схожі тими

  • Оригінал статті: Scalable Vector Graphics in HTML5 .
  • Редактори векторної графіки : Вивчіть цей список в Вікіпедії і випробуйте в роботі програми редагування SVG-графіки.
  • Розділ про застосування стилів в стандарті масштабована векторна графіки W3W Scalable Vector Graphics (SVG) 1.1 (друге видання) містить додаткову інформацію про застосування стилів до SVG-графіку.
  • Розділ про траєкторії стандарті масштабована векторна графіки W3W Scalable Vector Graphics (SVG) 1.1 (друге видання) містить додаткову інформацію про використання траєкторій в SVG-графіку.
  • Розділ про ефекти фільтрів в стандарті масштабована векторна графіки W3W Scalable Vector Graphics (SVG) 1.1 (друге видання) містить докладне пояснення фільтрів, згаданих у цій статті.
  • Render dynamic graphs in SVG ( «Візуалізація динамічних графіків в форматі SVG») (developerWorks, жовтень 2004 роки): роз'яснення порядку створення графіків в форматі SVG, які динамічно масштабируются в залежності від вмісту.
  • У статті Вікіпедії Scalable Vector Graphics ( «Швидка, векторна графіка») наводяться відомості загального характеру.
  • документ SVG 1.1 / 1.2 / 2.0 Requirements ( «Вимоги SVG 1.1 / 1.2 / 2.0») Консорціуму World Wide Web (W3C) містить інформацію про принципи розробки та вимоги до майбутніх версіях мови SVG.
  • Scalable Vector Graphics ( «Швидка, векторна графіка»): відвідайте сайт W3C, присвячений SVG.
  • Навчальний посібник по SVG : Дізнайтеся про SVG в цьому інтерактивному навчальному посібнику w3schools.
  • книга HTML5: Designing Rich Internet Applications (Visualizing the Web) ( «HTML5: розробка Web-додатків з широкими можливостями (візуалізація Інтернету)») містить приклади малювання в форматі SVG.
  • Сертифікація IBM в області XML : Дізнайтеся про те, як можна стати сертифікованим корпорацією IBM розробником в області XML і пов'язаних з цим мовою технологій.
  • developerWorks в Твіттері : Приєднуйтесь прямо зараз, щоб читати твіти developerWorks.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: