D3 е най-полезен, когато се използва за създаване и манипулиране на визуални елементи, базирани на SVG. Рисуване с помощта див"s и други HTML елементи е възможно, но е малко тромаво и обикновено въвежда несъответствия на дисплея в различни браузъри. Използването на SVG е по-надеждно, визуално последователно и по-бързо.
Векторни графични редактори като Illustrator могат да се използват за създаване на SVG файлове, но трябва да се научим как да ги създаваме с помощта на код.
SVG елемент
Мащабируема векторна графика векторни графики) е текстов формат на изображение. Всяко SVG изображение се дефинира с помощта на маркиране на код, подобен на HTML. SVG кодът може да бъде включен директно в HTML документ. Всеки уеб браузър поддържа SVG, като единственото изключение е Internet Explorer версия 8 и по-стара. SVG е базиран на XML, така че може да забележите, че елементите, които нямат затварящ етикет, трябва да се самозатварят. Например:
Преди да можете да нарисувате нещо, трябва да създадете SVG елемент. Мислете за SVG елемента като за платно, върху което са изчертани всички ваши визуални елементи (по този начин SVG е концептуално подобен на HTML елемента за платно). Като минимум е добре да зададете ширината и височината с помощта на атрибути ширинаИ височина, съответно. Ако не ги посочите, SVG ще се простира по цялата площ на блока.
Ето SVG елемент, създаден с помощта на кода по-горе:
Не го виждаш? Кликнете щракнете с десния бутонв празното пространство по-горе и изберете „Преглед на кода на елемента“. Вашият уеб инспектор трябва да покаже нещо подобно на това:
Забележете, че има SVG елемент, който обхваща 500 пиксела хоризонтално и 50 пиксела вертикално.
Също така имайте предвид, че браузърите третират пикселите като мерна единица по подразбиране. Ние посочихме размерите като 500 и 50, а не 500px и 50px. Можем да посочим изрично px или всяка друга мерна единица, например: ем, pt, в, cm, И мм.
Прости форми
Има няколко фигури, които можете да поставите в SVG елемент. Този комплект включва: прав, кръг, елипса, линия, текстИ път.
Ако сте запознати с програмирането компютърна графика, ще си спомните, че обикновено координатната система, базирана на пиксели, започва в горния ляв ъгъл и има координати на точки (0,0). Увеличете Xвъзникват отляво надясно, увеличават се при- отгоре надолу.
0,0 100,20 200,40
праврисува квадрат. Квадратът се дава от четири стойности: х, г- посочете точката на горния ляв ъгъл; ширина, височина- посочете ширината и височината на квадрата. Този квадрат заема цялото пространство на нашия SVG:
кръгрисува кръг. Кръгът се определя от три количества: cx, cyпосочете точка, разположена в центъра на описаната окръжност, rопределя радиуса на окръжността. Този кръг се намира в центъра на нашия SVG, защото атрибутът cx("center-x") е 250. Пример:
елипсасе задава подобно на кръг, но се приема, че радиусът е зададен по две оси: по Xи от при. Вместо да Xизползване rx, вместо г - ри.
линиячертае линия. Използвайте x1И y1за да зададете координатите на началото на линията и x2И y2за да зададете крайните координати. Атрибут инсулттрябва да зададете цвета на линията, в противен случай тя ще бъде невидима.
текстрисува текст. Използвайте хза обозначаване на левия ръб и гза указване на вертикалната позиция на така наречената базова линия.
текстът ще наследи CSS стиловете на шрифта на родителския елемент, освен ако не зададете свои собствени стилове за текста. Забележете как форматирането на текста по-горе съответства на текста, описан в този параграф. Можем да заменим стилове на форматиране като този:
Също така имайте предвид, че когато някой визуален елемент удари границата на SVG елемент, той ще бъде изрязан. Бъдете внимателни, когато използвате текст, така че текстът ви да не се изрязва. Можете да видите какво ще се случи с текста, ако зададете основната линия (т.е. при) равно на 50, същото като височината на SVG:
пътрисува нещо по-сложно от формите, описани по-горе (например силуета на държави на геокарти) и ще бъде описано отделно. Сега ще работим с прости форми.
Оформяне на SVG елементи
По подразбиране всеки SVG елемент има черно запълване и няма рамка. Ако искате нещо извън това, ще трябва да приложите стилове към вашия елемент. Често срещаните свойства на SVG са изброени по-долу:
- запълвам- пълнеж. Значение на цвета. Точно като в CSS цвятможе да се уточни по няколко начина:
- по име: портокал;
- стойност в шестнадесетична бройна система: #3388aa, #38а;
- стойност в RGB формат: rgb(10, 150, 20);
- стойност във формат RGBA: rgba(10, 150, 20, 0,5).
- инсулт- рамка. Значение на цвета.
- ширина на удара- ширина на рамката (обикновено в пиксели).
- непрозрачност- прозрачност. Числова стойност между 0,0 (напълно прозрачен) и 1,0 (напълно видим).
СЪС текстможете също да използвате следните свойства:
- семейство шрифтове
- размер на шрифта
Има два начина за прилагане на стилове към SVG елементи: или директно указване на стилове в елемента като негови атрибути, или чрез CSS правила.
По-долу са някои CSS свойства, зададени директно върху елемента кръг:
Можем да го направим по различен начин: не посочвайте атрибути на стил, но посочете класа на стил (точно като обикновен HTML елемент):
и след това добавете запълвам, инсултИ ширина на ударапараметри в CSS стиловете на необходимия клас:
Тиква (запълване: жълто; контур: оранжев; ширина на контура: 5; )
Вторият подход има няколко очевидни предимства:
- Можете да дефинирате клас веднъж и да го приложите към много елементи.
- CSS кодът е по-лесен за разбиране от атрибутите в елементите.
- Поради тези причини вторият подход е по-лесен за поддържане и по-бърз за прилагане.
Използването на CSS за стилизиране на SVG обаче може да бъде объркващо за някои. запълвам, инсулт, ширина на ударавсе още не са свойства на CSS (най-близките CSS еквиваленти са цвят на фонаИ граница). За да ви помогнем да запомните какви правила за таблица със стилове са определени за SVG елементи, добра идея е да включите svgв CSS селектор:
Svg .pumpkin (/* ... */)
Наслагване и ред на рисуването им
В SVG няма слоеве като такива, нито понятие за дълбочина. SVG не поддържа свойството CSS z-индекс, като по този начин формите могат да бъдат подредени в рамките на двуизмерно пространство.
И все пак, ако нарисувате няколко форми, те се припокриват:
Редът, в който елементите са изброени в кода, определя тяхната дълбочина. Лилавият квадрат е посочен първи в кода, така че той е начертан първи. След това се начертава син квадрат над лилавия, след това зелен квадрат над синия и лилавия и т.н.
Мислете за SVG формите, сякаш са нарисувани върху платно. Цветът, който е нанесен последен, покрива останалите цветове, като е „отпред“.
Този аспект на реда на чертане става важен, когато имате множество визуални елементи, които не трябва да бъдат блокирани от нищо. Например, можете да имате оси или етикети със стойности върху оси, които се появяват на точкова диаграма. Осите и етикетите трябва да се добавят към SVG в края, така че да се показват преди останалите елементи и да са видими.
Прозрачност
Прозрачността може да бъде полезна, когато елементите на вашата визуализация се припокриват, но искате всички те да бъдат видими, или когато искате да подчертаете някои елементи, но да направите други по-малко забележими.
Има два начина за прилагане на прозрачност: използване на RGB цвят с алфа канал или задаване на свойството непрозрачностчислова стойност.
Можете да използвате rgba()навсякъде, където трябва да посочите цвят, например в атрибути запълвамИ инсулт. rgba()очаква да му предадете 3 стойности, вариращи от 0 до 255 за червено, зелено и синьо, плюс алфа канал, вариращ от 0,0 до 1,0.
Имайте предвид, че с метода rgba(), се прилага прозрачност запълвамИ инсултатрибути независимо. Запълването на следните кръгове е 75% прозрачно, а границите им са 25% прозрачни:
За да приложите прозрачност към целия елемент, трябва да зададете атрибута непрозрачност. По-долу са напълно видимите кръгове:
и това са едни и същи кръгове с различна прозрачност:
Можете също да използвате атрибута непрозрачностза елемент, чиито цветове са посочени във формата rgba(). Когато направите това, прозрачността се умножава. Кръговете по-долу използват същите цветови стойности на RGBA запълвамИ инсулт. Първият елемент няма набор от атрибути непрозрачност, а другите две имат:
Моля, обърнете внимание, че третият кръг непрозрачностравна на 0,2 или 20%. Лилавата му част обаче е с прозрачност 75%. Така лилавата част в крайна сметка е 0,2*0,75 = 0,15 или 15% прозрачност.
HTML изображениядобавени към уеб страници с помощта на етикет . Използването на графики прави уеб страниците по-привлекателни визуално. Изображенията помагат да се предадат по-добре същността и съдържанието на уеб документ.
Използване на HTML тагове
Вмъкване на изображения в HTML документ
1. Етикет ![]()
елемент представлява изображение и неговото резервно съдържание, което се добавя с помощта на атрибута alt. Тъй като елементът
е с малки букви, препоръчително е да го поставите вътре в блоков елемент, напр.
или
Етикет има задължителен атрибут src, чиято стойност е абсолютният или относителен път към изображението:
За етикет Налични са следните атрибути:
| Атрибут | Описание, приета стойност |
|---|---|
| алт | Атрибутът alt добавя алтернативен текст към изображение. Показва се там, където се появява изображението, преди да бъде заредено или когато графиките са деактивирани, а също така се показва като подсказка, когато задържите курсора на мишката върху изображението. Синтаксис: alt="описание на изображението" . !} |
| кръстосан произход | Атрибутът crossorigin ви позволява да зареждате изображения от ресурси в друг домейн, като използвате CORS заявки. Изображенията, заредени в платното чрез CORS заявки, могат да бъдат използвани повторно. Позволени стойности: анонимен - Заявката от кръстосан произход се прави с помощта на HTTP заглавка и не се предават идентификационни данни. Ако сървърът не предостави идентификационни данни на сървъра, от който се иска съдържанието, изображението ще бъде повредено и използването му ще бъде ограничено. use-credentials — Заявката от кръстосан произход се изпълнява чрез предаване на идентификационни данни. Синтаксис: crossorigin="анонимен" . |
| височина | Атрибутът височина определя височината на изображението. Може да се посочи в px или %. Синтаксис: височина: 300px. |
| ismap | Атрибутът ismap показва, че картината е част от изображение на карта, разположено на сървъра (изображението на картата е изображение с области, върху които може да се кликне). Когато щракнете върху изображение на карта, координатите се изпращат на сървъра като низ на заявка за URL адрес. Атрибутът ismap е разрешен само ако елементът Синтаксис: ismap. |
| longdesc | URL адрес с разширено описание на изображението, който допълва атрибута alt. Синтаксис: longdesc="http://www.example.com/description.txt" . |
| src | Атрибутът src указва пътя до изображението. Синтаксис: src="цвете.jpg" . |
| размери | Задава размера на изображението в зависимост от опциите на дисплея. Работи само когато е указан атрибутът srcset. Стойността на атрибута е един или повече низове, разделени със запетаи. |
| srcset | Създава списък с източници на изображения, които ще бъдат избрани въз основа на разделителната способност на екрана. Може да се използва заедно с или вместо атрибута src. Стойността на атрибута е един или повече низове, разделени със запетаи. 
|
| usemap | Атрибутът usemap определя изображението като карта на изображението. Стойността трябва да започва със символа #. Стойността е свързана със стойността на името на етикета или атрибута id |
| ширина | Атрибутът width указва ширината на изображението. Може да се посочи в px или %. Синтаксис: ширина: 100% . |
1.1. Адрес на изображението
Адресът на изображението може да бъде указан пълен (абсолютен URL), например:
url(http://anysite.ru/images/anyphoto.png)
Или по относителен път от документили главна директорияуебсайт:
url(../images/anyphoto.png) - относителен път от документа,
url(/images/anyphoto.png) - относителен път от основната директория.
Това се тълкува по следния начин:
../ - означава отиване едно ниво нагоре, до основната директория,
изображения/ - отидете в папката с изображения,
anyphoto.png - сочи към файл с изображение.
1.2. Размери на изображението
Без да задавате размери на изображението, чертежът се показва на страницата в реалния си размер. Можете да редактирате размерите на изображението, като използвате атрибутите за ширина и височина. Ако е зададен само един от атрибутите, вторият ще бъде изчислен автоматично, за да се запазят пропорциите на чертежа.
1.3. Графични файлови формати
JPEG формат (Съвместна група фотографски експерти). JPEG изображенията са идеални за снимки и могат да съдържат милиони различни цветове. Изображенията се компресират по-добре от GIF файловете, но текстът и големите области с плътен цвят може да станат петна.
GIF формат (Формат за обмен на графики). Идеален за компресиране на изображения, които имат области с плътен цвят, като например лога. GIF файловете ви позволяват да зададете един от цветовете да бъде прозрачен, което позволява фонът на уеб страница да се показва през част от изображението. GIF файловете могат също да включват проста анимация. GIF изображенията съдържат само 256 нюанса, което прави изображенията да изглеждат петна и нереалистични като цвят, като плакати.
PNG формат (Преносима мрежова графика). Включва най-добрите характеристики на GIF и JPEG формати. Съдържа 256 цвята и дава възможност да направите един от цветовете прозрачен, като същевременно компресирате изображения в по-малък размер от GIF файл.
APNG формат (Анимирани преносими мрежови графики). Формат на изображение, базиран на PNG формат. Позволява ви да съхранявате анимация и също така поддържа прозрачност.
SVG формат (Мащабираема векторна графика). SVG чертежът се състои от набор от геометрични фигури, описани в XML формат: линия, елипса, многоъгълник и др. Поддържат се както статични, така и анимирани графики. Наборът от функции включва различни трансформации, алфа маски, филтърни ефекти и възможност за използване на шаблони. SVG изображенията могат да бъдат преоразмерени без загуба на качество.
BMP формат (Растерно изображение). Това е некомпресирано (оригинално) растерно изображение, чийто шаблон е правоъгълна мрежа от пиксели. Файлът с растерно изображение се състои от заглавка, палитра и графични данни. Хедърът съхранява информация за графичното изображение и файла (дълбочина на пиксела, височина, ширина и брой цветове). Палитрата е посочена само в онези Bitmap файлове, които съдържат палетни изображения (8 или по-малко бита) и се състоят от не повече от 256 елемента. Графичните данни представляват самата картина. Дълбочината на цвета в този формат може да бъде 1, 2, 4, 8, 16, 24, 32, 48 бита на пиксел.
ICO формат (икона на Windows). Формат за съхранение на икона на файл в Microsoft Windows. Освен това иконата на Windows се използва като икона на уебсайтове в Интернет. Това е картина в този формат, която се показва до адреса на сайта или показалеца в браузъра. Един ICO файл съдържа една или повече икони, като размерът и цветът на всяка от тях могат да се задават отделно. Размерът на иконата може да бъде всякакъв, но най-често срещаните са квадратни икони със страни 16, 32 и 48 пиксела.
2. Етикет
Етикет
Тагът има наличен атрибут име, който указва името на картата. Стойността на атрибута name за етикета
елемент
3. Етикет
Етикет описва само един активен регион като част от карта на изображение от страна на клиента. Елементът няма затварящ етикет. Ако една активна зона се припокрива с друга, ще бъде внедрена първата връзка от списъка с области.
| Атрибут | Кратко описание |
|---|---|
| алт | Задава алтернативен текст за активната област на картата. |
| координати | Определя позицията на областта на екрана. Координатите са дадени в единици за дължина и разделени със запетаи: За кръг— координати на центъра и радиуса на окръжността; За правоъгълник— координати на горния ляв и долния десен ъгъл; За многоъгълник— координатите на върховете на полигона в необходимия ред също така се препоръчва да се посочат последните координати, равни на първите, за логическо завършване на фигурата. |
| изтегляне | Допълва атрибута href и казва на браузъра, че ресурсът трябва да се зареди в момента, в който потребителят щракне върху връзката, вместо, например, да се налага първо да я отвори (като PDF файл). Посочвайки име за атрибут, ние по този начин даваме име на заредения обект. Разрешено е използването на атрибут без посочване на неговата стойност. |
| href | Указва URL адреса за връзката. Може да се посочи абсолютен или относителен адрес на връзката. |
| hreflang | Указва езика на свързания уеб документ. Използва се само във връзка с атрибута href. Приетите стойности са съкращение, състоящо се от двойка букви, указващи езиковия код. |
| медии | Определя за какви типове устройства ще бъде оптимизиран файлът. Стойността може да бъде всяка медийна заявка. |
| отн | Разширява атрибута href с информация за връзката между текущия и свързания документ. Приети стойности: алтернативен - връзка към алтернативна версия на документа (например печатна форма на страницата, превод или огледало). автор — връзка към автора на документа. отметка - Постоянен URL адрес, използван за отметки. помощ - връзка към помощ. лиценз - връзка към информация за авторските права за този уеб документ. next/prev - показва връзката между отделните URL адреси. Благодарение на това маркиране Google може да определи дали съдържанието на тези страници е свързано в логическа последователност. nofollow - не позволява на търсачката да следва линкове на дадена страница или конкретна връзка. noreferrer - показва, че при следване на линк браузърът не трябва да изпраща заглавка на HTTP заявка (Referrer), която записва информация от коя страница е дошъл посетителят на сайта. prefetch - показва, че целевият документ трябва да бъде кеширан, т.е. Браузърът във фонов режим изтегля съдържанието на страницата в своя кеш. търсене - Показва, че целевият документ съдържа инструмент за търсене. таг - указва ключовата дума за текущия документ. |
| форма | Задава формата на активната област на картата и нейните координати. Може да приема следните стойности: rect — правоъгълна активна зона; кръг — активна зона във формата на кръг; поли — активна зона във формата на многоъгълник; по подразбиране - активната област заема цялата площ на изображението. |
| цел | Указва къде ще бъде изтеглен документът, когато се щракне върху връзката. Приема следните стойности: _self — страницата се зарежда в текущия прозорец; _blank — страницата се отваря в нов прозорец на браузъра; _parent — страницата се зарежда в родителската рамка; _top - страницата се зарежда в целия прозорец на браузъра. |
| тип | Указва типа MIME на файловете с връзки, т.е. файлово разширение. |
4. Пример за създаване на карта на изображението
1) Маркирайте оригиналното изображение в активни области с желаната форма. Координатите на зоните могат да се изчислят с помощта на програма за обработка на снимки, напр. Adobe Photoshopили Боядисвайте.
ориз. 1. Пример за маркиране на изображение за създаване на карта 2) Задайте името на картата, като я добавите към етикета
Jpg" alt="фото_цветя" width="680" height="383" usemap="#flowers">
!}
ориз. 2. Пример за създаване на карта на изображението, когато щракнете с курсора на мишката върху цвете, отивате на страница с описание
Векторната графика се използва широко в печата. Но можем също да го използваме за уебсайтове, използващи SVG ( Scalable Vector Graphic - мащабируема векторна графика). Според Спецификацията на W3.org дефинира SVG като:
Език за описание на двуизмерни графики в XML. SVG позволява три типа обекти: векторни графики (като пътища, съставени от прави линии и криви), изображения и текст.
Въпреки факта, че SVG е включен в препоръките на W3C от август 2011 г., тази технология практически не се използва в уеб проекти, въпреки че има редица предимства пред растерните изображения. В тази поредица от уроци ще ви представим как да работите със SVG елементи на уеб страници.
Предимства на SVG
Независимост на резолюцията
Растерните изображения зависят от разделителната способност. Графиките придобиват непредставим вид при преоразмеряване до определен мащаб. При векторната графика тази ситуация е принципно невъзможна, тъй като всичко е представено от математически изрази, които се преизчисляват автоматично при промяна на мащаба и качеството се поддържа при всякакви условия.
Намаляване на броя на HTTP заявките
SVG може да бъде вграден директно в HTML документ с помощта на svg тага, така че браузърът не трябва да прави никакви заявки, за да обслужва графиките. Този подход има добър ефект върху характеристиките на зареждане на уебсайта.
Стилове и скриптове
Вграждането с маркера svg също улеснява стилизирането на вашите графики с помощта на CSS. Можете да промените свойствата на обекта като цвят на фона, прозрачност, граници и т.н. Графиката може да се манипулира по подобен начин с помощта на JavaScript.
Лесен за редактиране и анимиране
SVG обектите могат да бъдат анимирани с помощта на CSS или JavaScript. SVG обектите могат също да бъдат модифицирани с помощта на текстов редактор.
По-малък размер на файла
SVG има по-малък размер на файла в сравнение с растерната графика.
Основни SVG форми
Според спецификацията можем да начертаем няколко основни фигури: линия, полилиния, правоъгълник, кръг, елипса. Всички елементи трябва да бъдат вмъкнати в тага . Нека разгледаме основните елементи в детайли.
Линия
За да покажете линия в SVG, използвайте елемента
Началото на отсечката се определя от атрибутите x1 и y1 , а крайната точка се определя от координатите в атрибутите x2 и y2 .
Има и два други атрибута (щрих и щрих-ширина), които се използват съответно за определяне на цвета и ширината на линията.
Този обект е подобен на
елемент
Правоъгълникът се изчертава с помощта на елемента
За да покажем кръг, използваме елемента
Първите два атрибута cx и cy определят координатите на центъра. В горния пример задаваме стойност 102 и за двете координати. Стойността по подразбиране е 0.
За да покажем елипса, използваме елемента
елемент
Използване на векторен графичен редактор
Извеждането на прости SVG обекти в HTML е лесно. Въпреки това, тъй като сложността на обекта се увеличава, тази практика може да доведе до необходимост от голямо количество работа.
Но можете да използвате всеки векторен графичен редактор (напр. Adobe Illustratorили Inkscape) за създаване на обекти. Ако имате инструмент като този, рисуването на необходимите обекти в тях е много по-лесно от кодирането на графики в HTML таг.
Можете да копирате команди за векторна графика от файл в HTML документ. Или можете да вградите .svg файла, като използвате един от следните елементи: embed, iframe и object.
Резултатът ще бъде същият.
Поддръжка на браузър
SVG има добра поддръжкав мнозинството модерни браузъри, с изключение на IE версия 8 и по-стари. Но проблемът може да бъде решен с помощта на JavaScript библиотеката. За да улесните работата си, можете да използвате инструмента ReadySetRaphael.com за конвертиране на SVG код във формат Raphael.
Първо изтегляме и включваме библиотеката в HTML документа. След това зареждаме .svg файла, копираме и поставяме получения код във функцията след зареждане:
В тага body поставяме следния елемент div с идентификатор rsr.
И всичко е готово.
В следващия урок от поредицата ще разгледаме как да стилизираме SVG обекти в CSS.
Тази публикация е първата от поредица от статии за SVG (Scalable Vector Graphic), обхващаща основите на векторната графика на сайта.
Векторната графика се използва широко в печата. За уебсайтове има SVG, което според официалната спецификация на w3.org е език за описание на двуизмерни графики в XML. SVG включва три типа обекти: форми, изображения и текст. SVG съществува от 1999 г., а от 16 август 2011 г. е включен в препоръките на W3C. SVG е силно подценяван от уеб разработчиците, въпреки че има няколко важни предимства.
Предимства на SVG
- Мащабиране: За разлика от растерна графика, SVG не губи качество при мащабиране, така че е удобно да се използва за развитие на ретината.
- Намаляване на HTTP заявките: когато използвате SVG, броят на обажданията към сървъра се намалява и съответно се увеличава скоростта на зареждане на сайта.
- Стил и скриптове: Използвайки CSS, можете да промените графичните настройки на сайта, като фон, прозрачност или граници.
- Анимация и монтаж: кога помощ за javascript SVG може да се анимира и редактира в текстов или графичен редактор (InkScape или Adobe Illustrator).
- Малък размер: SVG обектите тежат много по-малко от растерните изображения.
Основни SVG форми
Според официалната спецификация можете да рисувате прости обекти с помощта на SVG: правоъгълник, кръг, линия, елипса, полилиния или многоъгълник с помощта на таг svg.Проста линия с помощта на етикет линиясамо с два параметъра - начални точки (x1 и x2) и крайни точки (y1 и y2):
Можете също така да добавите атрибути или стилове за щрих и ширина на щриха, за да зададете цвета и ширината:
Style="stroke-width:1; stroke:rgb(0,0,0);"
прекъсната линия
Синтаксисът е подобен на предишния, използва се етикетът полилиния, атрибут точкизадава точки:
Правоъгълник
Извикан от тага rect, можете да добавите някои атрибути:
кръг
Извиква се от етикет кръг, в примера използвайки атрибута rзадайте радиуса, cxИ cyпосочете координатите на центъра:
Елипса
Извиква се от етикет елипса, работи по подобен начин кръг, но можете да посочите два радиуса - rxИ ри:
Многоъгълник
Извиква се от етикет многоъгълник, един многоъгълник може да има различен брой страни:
Използване на редактори
Както можете да видите от примерите, рисуването на основни SVG форми е много просто, но обектите могат да бъдат много по-сложни. За тях трябва да използвате векторни графични редактори, като Adobe Illustrator или Inkscape, където можете да записвате файлове във формат SVG и след това да ги редактирате в текстов редактор. Можете да вмъкнете SVG в страница, като използвате вграждане, iframe и обект:
Пример е изображение на iPod от OpenClipArt.org.
Основни понятия и употреба
Форматът Scalable Vector Graphics (SVG) е част от семейство стандарти за векторна графика. Векторната графика се различава от растерната графика, при която цветовата дефиниция на всеки пиксел се съхранява в някакъв масив от данни. Най-разпространените растерни формати, използвани в интернет днес, са JPEG, GIF и PNG, всеки от които има своите предимства и недостатъци.
Често използвани съкращения
- CSS: Каскадни стилови таблици
- GIF: Формат за обмен на графики
- GUI: Графичен потребителски интерфейс
- HTML: Hypertext Markup Language
- JPEG: Съвместна група фотографски експерти
- PNG: Преносима мрежова графика
- SVG: мащабируема векторна графика
- XML: Разширяем език за маркиране
Форматът SVG има няколко предимства пред всеки растерен формат:
- SVG графиките се създават с помощта на математически формули, които изискват много по-малко данни да се съхраняват в оригиналния файл, тъй като няма нужда да се съхраняват данни за всеки отделен пиксел.
- Векторни изображенияпо-добър мащаб. Опитът за мащабиране на изображения, публикувани онлайн, над оригиналния им размер може да доведе до изкривени (или пикселизирани) изображения.
Това е така, защото оригиналните пикселни данни са проектирани за конкретен размер на изображението. При преоразмеряване програмата за изобразяване на изображения прави предположение какви данни трябва да се използват за запълване на новите пиксели. Векторните изображения са по-устойчиви на мащабиране; При промяна на размера на изображението могат да се коригират съответните математически формули.
- Размер изходен файлвекторните графики обикновено имат по-малко, така че SVG графиките се зареждат по-бързо от техните растерни аналогове и изискват по-малко използване на честотната лента.
- SVG изображенията се изобразяват от браузъра и могат да бъдат изведени софтуер. Те могат да се променят динамично, което ги прави особено подходящи за приложения, управлявани от данни, като диаграми.
- Оригиналният SVG файл с изображение е в текстова форма, което го прави достъпен и удобен за търсачката.
В тази статия ще научите за предимствата на SVG форматите и как те могат да ви помогнат да създавате HTML5 уебсайтове.
Основи на SVG
Създаването на SVG графики използва напълно различен процес от създаването на JPEG, GIF или PNG файлове. JPEG файлове, GIF и PNG обикновено се създават с помощта на някакъв вид програма за редактиране на изображения, напр. Adobe Photoshop. SVG изображенията обикновено се създават с помощта на някакъв вид език, базиран на XML. Има графични потребителски интерфейси SVG графични редактори, които генерират XML кода зад изображението вместо вас. Тази статия обаче предполага, че работите директно с XML. Информация за програмите за редактиране на SVG изображения можете да намерите в раздела.
Списък 1 показва пример прост XML файл SVG, който рисува червен кръг с черна рамка от 2 пиксела.
Листинг 1. SVG XML файл
Горният код създава изображението, показано на фигура 1.
Фигура 1. Червен кръг с черна рамка от 2 пиксела
Създаване на основни геометрични форми
Когато работите с SVG графики, XML таговете се използват за създаване на геометрични форми; тези XML елементи са показани в таблица 1.
Таблица 1. XML елементи за създаване на SVG графики
линеен елемент
Линейният елемент е най-простият графичен елемент. Листинг 2 показва как да създадете хоризонтална линия.
Листинг 2. Създаване на хоризонтална линия
Кодът, показан в листинг 2, създава изображението, показано на фигура 2.
Фигура 2. Проста хоризонтална линия
Основният таг на SVG има атрибути за ширина и височина, които определят областта за изчертаване. Тези атрибути действат по същия начин като атрибутите за височина и ширина на други HTML елементи. В този случай се определя, че работната зона заема цялото налично пространство.
Освен това този пример използва стиловия таг. SVG графиките поддържат прилагане на стилове към съдържанието, като се използват голямо разнообразие от методи. Стиловете в тази статия са включени, за да направят изображенията лесни за виждане или когато определени атрибути, като цвят и ширина на линията, са необходими за изобразяване на чертеж. Допълнителна информацияотносно прилагането на стилове в SVG графики можете да намерите в раздела.
Можете да създадете дефиниция на линия, като посочите началните и крайните координати в осите X и Y спрямо работното пространство. Атрибутите x1 и y1 представляват началните координати, а атрибутите x2 и y2 представляват крайните координати на линията. За да промените посоката на чертане на линия, просто трябва да промените координатите. Например, като модифицирате предишния пример, можете да създадете диагонална линия, както е показано в списък 3.
Листинг 3. Създаване на диагонална линия
Фигура 3 показва резултата от кода, показан в листинг 3.
Фигура 3. Диагонална линия
полилинеен елемент
Прекъснатата линия е чертеж, съставен от няколко линии. Списък 4 показва пример за създаване на чертеж, който прилича на стъпала на стълбище.
Кодът, показан в листинг 4, създава изображението, показано на фигура 4.
Полилиния се създава с помощта на атрибута точки и чрез дефиниране на двойки координати X и Y, разделени със запетаи. В показания пример първата точка е дефинирана като 0,40, където 0 е координатата X, а 40 е координатата Y, но един набор от точки не е достатъчен за показване на изображението на екрана, тъй като този набор казва само SVG изобразяване на началната позиция. Имате нужда от поне два набора от точки: начална точка и крайна точка (например, points="0.40 40.40").
Както при рисуването на прости линии, линиите не трябва да са строго хоризонтални или вертикални. Ако промените стойностите от предишния пример, можете да получите неправилни форми, направени от линии, като в списък 5.
Листинг 5. Създаване на назъбена линия
Кодът в листинг 5 създава изображението, показано на фигура 5.
Фигура 5. Назъбена линия
прав елемент
За да създадете правоъгълник, просто трябва да определите неговата ширина и височина, както е показано в списък 6.
Листинг 6. Създаване на правоъгълник
Кодът в листинг 6 създава изображението, показано на фигура 6.
Фигура 6. Правоъгълник
Тагът rect може да се използва и за създаване на квадрат; квадратът е просто правоъгълник с еднаква височина и ширина.
кръгов елемент
Кръгът се създава чрез дефиниране на координатите X и Y на центъра и радиуса на кръга, както е показано в списък 7.
Листинг 7. Създаване на кръг
Кодът в листинг 7 създава изображението, показано на фигура 7.
Фигура 7. Кръг
Атрибутите cx и cy определят позицията на центъра на кръга спрямо платното. Тъй като радиусът е половината от ширината на кръга, когато го определяте, не забравяйте, че общата ширина на изображението ще бъде два пъти по-голяма от зададената стойност.
Елемент елипса
По същество елипсата е кръг с два радиуса, посочени в кода, както е показано в листинг 8.
Листинг 8. Създаване на елипса
Кодът в листинг 8 създава изображението, показано на фигура 8.
Фигура 8. Елипса
В този случай атрибутите cx и cy също определят координатите на центъра спрямо платното. С елипса обаче дефинирате един радиус за оста X и втори радиус за оста Y, като използвате атрибутите rx и ry.
многоъгълен елемент
Многоъгълникът е геометрична фигура, която съдържа поне три страни. Списък 9 създава прост триъгълник.
Листинг 9. Създаване на триъгълник
Кодът в листинг 9 създава изображението, показано на фигура 9.
Фигура 9. Триъгълник
Подобно на работата с елемента полилиния, полигоните се създават чрез дефиниране на двойки координати X и Y с помощта на атрибута точки.
Чрез добавяне на двойки координати по осите X и Y можете да създавате многоъгълници с произволен брой страни. Например, като модифицирате кода в предишния пример, можете да създадете четиристранен многоъгълник, както е показано в списък 10.
Листинг 10. Създаване на четиристранен многоъгълник
Кодът, показан в листинг 10, създава изображението, показано на фигура 10.
Фигура 10. Четиристранен многоъгълник
Можете също да използвате маркера многоъгълник за създаване геометрични формисложна форма. Списък 11 създава звездна рисунка.
Листинг 11. Създаване на звезда
Кодът в листинг 11 създава изображението, показано на фигура 11.
Фигура 11. Звезден многоъгълник
елемент път
Елементът път е най-сложният от всички чертожни елементи, позволявайки ви да създавате произволни чертежи с помощта на набор специални екипи. Елементът path поддържа командите, изброени в таблица 2.
Таблица 2. Команди, поддържани от елемента path
Тези команди могат да се използват както с главни, така и с малки букви. Ако командата е дадена с главни букви, абсолютно позициониране. Ако се използва команда с малки букви, се прилага относително позициониране. Предоставянето на примери за използването на всички команди е извън обхвата на тази статия. По-долу обаче има няколко примера, които демонстрират основите на използването на тези команди.
С помощта на елемента path можете да създавате всякакви прости геометрични фигури от предишните примери в тази статия. Списък 12 използва елемента path за създаване на правилен триъгълник.
Листинг 12. Създаване на триъгълник с помощта на елемента path
Кодът, показан в листинг 12, създава изображението, показано на фигура 12.
Фигура 12. Триъгълник, създаден с помощта на елемента path
Списъкът с команди се определя с помощта на атрибута d. IN в този примерЧертежът започва от точката с координати X 150 и Y 0, определени от командата за преместване към точка (M150 0). След това използвайте командата, за да начертаете линия до точката (L75 200). линия се изчертава до точка с координати X = 75 и Y = 200. След това се изчертава друга линия с помощта на друга команда за начертаване на линия до точка (L225 200). Накрая моделът се затваря с помощта на командата snap (Z). Никакви координати не придружават командата Z, тъй като за да затворите път, по дефиниция, начертавате линия от текущата позиция обратно до началната точка на чертежа (в този случай точката с координати X = 150, Y = 0).
Целта на дадения пример беше да ви покаже концепцията; Ако просто трябва да създадете правилен триъгълник, по-добре е да използвате тага многоъгълник.
Истинската „сила“ на елемента път е способността му да създава персонализирани форми, както е показано в листинг 13. Този пример е взет от документа на консорциума По целия святУеб (W3C) Мащабируема векторна графика (SVG) 1.1 (2-ро издание)(виж раздела).
Листинг 13. Създаване на персонализирана форма с помощта на елемента път
Кодът, показан в листинг 13, създава изображението, показано на фигура 13.
Фигура 13. Персонализирана форма, създадена с помощта на елемента path
Елементът път може да се използва за създаване на сложни дизайни като диаграми и криволичещи линии. Имайте предвид, че предоставеният пример използва множество елементи на пътя. Когато създавате чертежи, не сте ограничени до нито един елемент на чертеж в SVG основния таг.
Филтри и градиенти
В допълнение към основните CSS стилове, които бяха използвани в много от примерите по-горе, SVG графиките също поддържат използването на филтри и градиенти. В този раздел ще научите как да прилагате филтри и градиенти към SVG изображения.
Филтри
Филтрите могат да се използват за прилагане на специални ефекти към SVG изображения. SVG поддържа следните филтри.
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feДифузно осветление
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feМорфология
- feOffset
- feSpecularLighting
- feTile
- feТурбуленция
- feDistantLight
- fePointLight
- feSpotLight
Листинг 14 създава ефект на падаща сянка, който се прилага към правоъгълник.
Листинг 14. Създаване на ефект падаща сянка за правоъгълник
Кодът, показан в листинг 14, създава изображението, показано на фигура 14.
Фигура 14. Ефект на падаща сянка за правоъгълник
Филтрите се дефинират вътре в елемента def (съкратено от „дефиниция“). На филтъра в този пример е присвоен идентификатор (id) "f1". Самият таг на филтъра има атрибути за определяне на координатите X и Y, както и ширината и височината на филтъра. Вътре във филтърния етикет използвате необходимите филтърни елементи и задавате техните свойства на желаните стойности.
След като филтърът е дефиниран, вие го свързвате с конкретен чертеж, като използвате атрибута на филтъра, както е показано в .
Задайте стойността на url на стойността на атрибута id, присвоена на филтъра.
ГрадиентиГрадиент
представлява постепенен преход от един цвят към друг. Има два основни вида градиенти: линеен и радиален. Типът приложен градиент се определя от елемента, който използвате. Следните примери показват как да приложите линейни и радиални градиенти към елипса.
Листинг 15 създава елипса с линеен градиент.
Листинг 15. Създаване на елипса с линеен градиент
Кодът, показан в листинг 15, създава изображението, показано на фигура 15.
Фигура 15. Елипса с линеен градиент
Листинг 16 създава елипса с радиален градиент.
Листинг 16. Създаване на елипса с радиален градиент
Кодът, показан в листинг 16, създава изображението, показано на фигура 16.
Фигура 16. Елипса с радиален градиент
Градиентите, подобно на филтрите, са дефинирани в елемента def. На всеки градиент се присвоява идентификатор (id). Атрибутите на градиента (като цветове) се задават вътре в етикета на градиента с помощта на стоп елементи. За да приложите градиент към картина, задайте url стойността на атрибута fill на идентификатора (id) на желания градиент.
Текст и SVG
В допълнение към създаването на основни геометрични форми, SVG може да се използва и за генериране на текст, както е показано в списък 17.
Обичам те SVG
Кодът, показан в листинг 17, създава изображението, показано на фигура 17.
Фигура 17. Текст, създаден с SVG
Този пример създава изречение I love SVG с помощта на текстовия елемент. Когато използвате текстовия елемент, действителният текст, който се показва, е между отварящия и затварящия текстови елементи.
Можете да показвате текст по различни оси и дори по пътеки. В листинг 18 текстът се показва в дъгообразна пътека.
Кодът, показан в листинг 18, създава изображението, показано на фигура 18.
Фигура 18. Текст, разположен по дъгообразна пътека
Този пример добавя допълнително XML пространство от имена, xlink, към коренния таг на SVG. Пътят, използван за дъга на текста, се създава вътре в елемента def, така че самият път не се изобразява в чертежа. Показваният текст е вложен в елемент textPath, който използва пространството от имена на xlink, за да се позовава на идентификатора на желания път.
Както при другите SVG графики, можете също да прилагате филтри и градиенти към текста. Листинг 19 прилага филтър и градиент към текста.
Листинг 19. Създаване на текст с филтър и градиент
Кодът, показан в листинг 19, създава изображението, показано на фигура 19.
Фигура 19. Текст с филтър и градиент
Добавяне на SVG XML код към уеб страници
След като SVG XML бъде създаден, той може да бъде включен в HTML страници по няколко начина. Първият метод е директно вмъкване на SVG XML кода в HTML документа, както е показано в списък 20.
Листинг 20. Директно вмъкване на SVG XML в HTML документ
Този метод е може би най-простият, но не помага повторно използване. Не забравяйте, че SVG XML може да бъде записан като файл с разширение .svg. Когато записвате SVG графика като .svg файл, можете да използвате елементи за вграждане, обект и iframe, за да я включите в уеб страници. Листинг 21 показва кода за вграждане на SVG XML файл с помощта на елемента embed.
Списък 21. Включване на SVG XML файл с помощта на елемента embed
Списък 22 показва кода за включване на SVG XML файл с помощта на елемента object.
Листинг 22. Включване на SVG XML файл с помощта на елемента object
Листинг 23 показва кода за включване на SVG XML файл с помощта на iframe елемент.
Списък 23. Включване на SVG XML файл с помощта на iframe елемент
С един от тези методи можете да включите една и съща SVG графика на множество страници и да я актуализирате, като редактирате оригиналния .svg файл.
Заключение
Тази статия обхваща основите на създаването на графики с помощта на SVG формат. Научихте как да използвате вградените геометрични елементи, за да създавате основни геометрични фигури, като линия, правоъгълник, кръг и т.н. Научихте също как да използвате елемента път, за да създавате сложни дизайни чрез издаване на последователност от команди, като например придвижване до точка, начертаване на линия до точка и начертаване на дъга до точка. Тази статия също ви учи как да прилагате филтри и градиенти към SVG графики, включително графики с текст, и как да включвате SVG графики в HTML страници.
