Існує кілька основних фігур, які використовуються в більшості малюнків SVG. Призначення цих фігур цілком очевидно з їх імен. Ми привели тут деякі атрибути, що визначають положення і розмір, але специфікація елемента, ймовірно, містить більш точне і повний опис, разом з іншими властивостями, не описаними тут. Однак, так як вони використовуються в більшості документів SVG, важливо мати певне уявлення про них.
Основні форми
Щоб вставити форму, потрібно створити елемент в документі. Різні елементи відповідають різним формам і вимагають різні атрибути для опису розміру і положення цих форм. Деякі трохи громіздкі, оскільки можуть бути створені іншими формами, але для зручності вони все тут наведені і сприяють збереженню документів SVG настільки короткими і чіткими, наскільки це можливо. Всі основні форми показані на зображенні справа. Код для генерації виглядає якось так:
Зауваження: Атрибути stroke. stroke-width і fill описуються в рукодстве далі.
прямокутники
Елемент rect робить саме те, що ви і чекаєте, тобто малює прямокутник на екрані. Існують тільки 6 основних атрибутів, які контролюють стан і форму прямокутника на екрані. Раніше показане зображення відображає два елементи rect, які виглядають трохи зайвими. Один справа має набір атрибутів rx і ry, які відповідають за округлі кути. Якщо цього набору немає, то за замовчуванням вони приймаються рівними 0.
x Положення x верхнього лівого кута прямокутника. y Положення y верхнього лівого кута прямокутника. width Ширина прямокутника height Висота прямокутника rx Радіус x кутів прямокутника ry Радіус y кутів прямокутника
окружність
Як ви могли припустити, елемент circle малює окружність на екрані. Існує 3 атрибута для опису цього елемента.
r Радіус кола. cx Положення x центру кола. cy Положення y центра кола.
Ellipse - це найбільш загальна форма елемента окружність, в якому можна маштабіровать радіуси x і y (зазвичай звані математиками половиною великий осі і половиною малої осі) окружності окремо.
rx Радіус x еліпса. ry Радіус y еліпса. cx Положення x центру еліпса. cy Положення y центру еліпса.
Line зображує просту пряму лінію. Її атрибутами являють дві точки, які визначають початкову та конечно точки лінії.
x1 Положення x точки 1. y1 Положення y точки 1. x2 Положення x точки 2. y2 Положення y точки 2.
Ламана лінія
Елемент polyline відтворює групу з'єднаних прямих ліній. Оскільки цей список може бути досить довгим, все точки включені в один атрибут:
точки Список точок, кожна розділена прогалиною, коми, EOL. або символом переведення рядка. Кожна точка повинна містити два числа, координату x і координату y. Тому список (0,0), (1,1) і (2,2) може бути записаний: "0 0, 1 + 1, 2 + 2".
багатокутник
Елемент polygon дуже схожий на елемент polyline в тому, що вони утворені сегментами прямих ліній, що з'єднують список точок. Але для багатокутників шлях автоматично повертається до першої точки в кінці, створюючи тим самим замкнуту форму. Слід зазначити, що прямокутник є окремим випадком багатокутника, тому polygon можна використовувати для створення елемента
точки Список точок, кожна розділена прогалиною, коми, EOL. або символом переведення рядка. Кожна точка повинна містити два числа, координату x і координату y. Тому список (0,0), (1,1) і (2,2) може бути записаний як: "0 0, 1 + 1, 2 + 2". Полігон замикається фінальної прямою лінією від (2,2) до (0,0).
Path. ймовірно, найбільш загальна форма, яку можна використовувати в SVG. Використовуючи елемент path ви можете малювати прямокутники (із закругленими кутами або без), окружності, еліпси, ламані лінії і багатокутники; і по суті будь-які інші типи форм: криві Безьє, квадратические криві і багато іншого. З цієї причини елемент path буде розглянуто окремо в наступній секції цього керівництва, але зараз відзначимо лише, що існує єдиний атрибут для контролю його форми.
d Список точок та іншої інформації про те, як малювати шлях. Для докладної інформації дивись секцію Шляху.