ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Код

SVG: Новият Flash. От Ерик Витиело Мл..

През последните около 10 години Macromedia беше доминиращата сила в векторната графика и анимация за Мрежата. Времената се променят и на хоризонта се появявате все нови техники. Задаващият се претендент при векторните графики е Scalable Vector Graphics (SVG) - език, основаващ се на XML и разработван от W3C.

Повечето читатели знаят, че в началото на 90-те години, Macromedia разработи продукт наречен Shockwave. Shokwave позволяваше на разработчиците на мултимедия да създадат една анимация и да я на накарат да се движи чрез програмен език, давайки на мултимедийните презентации невиждана до тогава интерактивност.

Ранните браузъри започнаха да поддържат Shokwave чрез plug-ins, а скоро в Macromedia разбраха, че на браузърите трябва да са предлага специална, по-малка версия на Shockwave. През 1996 година, Macromedia купиха FutureWave Software, чийто продукт FutureSplash, се превърна във Flash 1.0.

В средата на 90-те години, XML беше изгряващата звезда в света на данните, заради простия начин, по който организираше данните. Много схеми за данни бяха разработени с XML - схеми за съхраняване и показване на математическа информация (MathML), общи описания на ресурсите (RDF) и дори химическа информация (CML). Този метод за организиране на информацията стана основата на SVG.

Дойде 1999 година и с нея новата XML схема - SVG. SVG предоставя структура за дефиниране на растерни/векторни графики в XML формат. В тази спецификация са включени дефиниции за създаване на анимация, скриптове за events и възможност за промяна на документи, което превръща SVG в силен конкурент на Flash.

SVG в подробности

Ясно е, че SVG спецификацията предлага алтернативи за много от функциите на Flash и включва доста други. Възможността за създаване на векторни графични елементи е в сърцето на SVG - също както и при Flash. SVG също предлага възможност да се създават анимации към всеки обект и позволява да се създават скриптове чрез DOM, JavaScript, ECMAScript или всеки друг език, който се поддържа от SVG viewer. Разработчиците разполагат с много основни елементи, сред които такива за създаване на кръгове, правоъгълници, линии, елипси, многоъгълници и текст. Съвсем като HTML, елементите се оформят чрез Cascading Style Sheets (CSS2) или директно чрез атрибута за стил.

Понастоящем се предлагат много SVG viewers (бел. прев. програми, чрез които се гледа SVG) и редактори, чрез които могат да се създават и разглеждат SVG документи. Adobe създаде plug-in за браузъри, за да може SVG да се разглежда и през браузър, а освен това добави към Illustrator 10 възможност за редактиране на SVG файлове. Други компании като например JASC, Corel, Sun и IBM започват да поддържат различни нива SVG в своите продукти. Заради простотата на XML схемата, вие можете да създадете SVG файл доста лесно, използвайки някой текстов редактор.

Един прост SVG файл, съдържащ черен кръг, би изглеждал така:

1: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
4: <svg xmlns="http://www.w3.org/2000/svg">
5:   <title>A Circle</title>
6:   <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none"/>
7: </svg>

Ще забележите, че първият ред е XML декларацията, на втория и третия e SVG DOCTYPE декларацията. Ред 4 е главният елемент на SVG. В този елемент ще откриете поделемент за заглавието (<title>) и елемент за кръга (<circle>). Чрез елемента кръг задаваме местоположението на центъра на кръга чрез cx и cy атрибутите, и радиуса на кръга - чрез атрибута r. Оставащите атрибути задават очертанието около кръга, неговия цвят и цвета на заливката (fill), който в случая липсва ("none").

Към SVG могат да се добавят и други елементи, за да увеличи ползата от него. Чрез елемента image могат да се вмъкват bitmap изображения във формат PNG, GIF и JPG. Чрез SVG схемата можете да дефинирате свои собствени шрифтове и дори да прикрепяте текст към определен контур. Всички атрибути асоциирани с тези елементи могат да бъдат анимирани чрез скриптове или чрез елемента animate, който е описан по-долу.

Работа с SVG

Създаването на SVG файл е доста лесно и за разлика от Flash, не изисква използването на графичен редактор или купуването на някакъв софтуер - viewer-ът на Adobe е безплатен. Тази простота води до друго предимство на SVG пред Flash: XML е текстов език и това позволява на търсачките да индексират съдържанието на SVG файловете, като по този начин се преодолява нуждата от задаване на отделни meta тагове за търсачките, иначе необходими при Flash съдържание. SVG дори може да се вмъква в кода на HTML документ.

XML формата на SVG дава на разработчиците явното преимущество да създават SVG графики въз основа на други XML данни. Трансформирането на XML данни в SVG чрез XSL позволява преноса на данни в графичен вид. Трансформацията от XML файл, съдържащ информация за разположението на помещенията в един офис, към SVG може да стане лесно.

XML данни:

1: <?xml version="1.0"?>
2: <cubicles>
3:   <cubicle north="10" east="15" width="10" length="10"/>
4:   <cubicle north="0" east="0" width="10" length="10"/>
5: </cubicles>

XSL Трансформация:

1: <?xml version='1.0'?>
2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3:   <xsl:template match="/">
4:     <svg xmlns="http://www.w3.org/2000/svg">
5:       <title>Our Cubicles</title>
6:       <xsl:apply-templates select="cubicle"/>
7:     </svg>
8:   </xsl:template>
9:   <xsl:template match="cubicle">
10:     <rect x="{north}" y="{east}" width="{width}" height="{length}"/>
11:   </xsl:template>
12: </xsl:stylesheet>

Полученият SVG документ:

1: <?xml version="1.0" standalone="no"?>
3: <svg xmlns="http://www.w3.org/2000/svg">
4:   <title>Our Cubicles</title>
5:   <rect x="10" y="15" width="10" height="10"/>
5:   <rect x="0" y="0" width="10" height="10"/>
8: </svg>

С тази трансформация се създава графика на разположението на помещенията в един офис, предоставяща лесна за разбиране графична форма на разположението на едно помещение спрямо друго. Графичните изображения на данни подобни на това са безброй и могат лесно да се създават чрез SVG.

SVG анимация

Както споменахме по-горе, в SVG е включена и възможност за анимиране чрез Synchronized Multimedia Integration Language (SMIL), който също е технология разработена от W3C. За да демонстрираме простотата на възможностите за анимация в SVG, ще вземем предишния ни пример с кръга и ще анимираме неговия радиус, добавяйки само един елемент:

1: <?xml version="1.0" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
4: <svg xmlns="http://www.w3.org/2000/svg">
5:   <title>A Circle</title>
6:   <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none">
7:     <animate attributeType="XML" attributeName="r" from="0" to="50" dur="2s"/>
8:   </circle>
9: </svg>

Анимацията може да се активира от събития като onmouseover, onclick или скрипт, което дава възможност за взаимодействие между потребителя и графиките. Елементите, като кръга например, също съдържат свои собствени атрибути, чрез които се свързват със скриптовете. Тази интерактивност се свързва с SVG информацията по много начини и може да бъде изменяна лесно. Създаването на сложни набори от анимации и различни графики също става лесно чрез SVG. Всичко е елемент и всичко може да се обработва, защото SVG спазва DOM правилата и ви дава неограничен контрол върху това къде отиват, как се държат и кога действат елементите.

Скриптовете могат да променят всички стойности намиращи се в документа, а също така и да променят подредбата и структурата на документа. Самото променяне на документа може да бъде важна част от създаването на един успешен интерактивен SVG елемент, защото подредбата на елементите контролира реда, в който те се показват върху екрана. Например, ако елемент линия се постави след елемент кръг, той ще се показва над кръга.

SVG напредва

Разработката на SVG спецификацията продължава. SVG 1.1 е със статус на предварителна работна чернова. SVG Basic и SVG Tiny също се развиват, давайки на мобилните устройства, като клетъчните телефони и PDA, възможността да показват SVG съдържание. Това непрекъснато развитие ще увеличи поддръжката и употребата на SVG графики също както продължителното развитие на HTML тласна тази технология напред.

Скоро SVG ще бъде широкоразпространен, а неговата натура ще му помогне да се развива още повече. Flash ще продължи да бъде доминиращия стандарт за доста време, заради огромната си база от потребители. SVG, обаче, расте бързо. Разпространението на SVG viewer-те чрез производителите на браузъри бързо разшири обхвата му сред потребителите - също както стана с Flash. Бъдещите версии на различните браузъри стандартно ще включват SVG viewer, а някои вече го правят. (Дистрибуцията на Internet Explorer, включваща Acrobat има и SVG viewer.)

Приложението на SVG е широко, а трансформациите от XML в SVG правят възможностите безбройни. Пример за това многообразие е трансформацията на демографските статистики за определени периоди директно в променяща се с времето карта, показваща броя на населението на всеки район чрез цветова схема. Промяната във времето може да променя цветовете с изменянето на броя на населението. При промяна в XML данните, SVG автоматично се наглася към тях.

SVG може да се използва по подобие на Flash в много случаи - да се създават системи от подменюта, навигация на сайт и дори цели уебсайтове. Adobe има отличен ресурс, показващ някои от възможностите: трансформирането на химически формули в 3D молекули, създаване на схеми и графики, купуване на билети за театър и дори приложение за рисуване чрез вектори, което създава SVG съдържание.

Инсталацията на SVG viewer-a на Adobe е лесна. Посетете download сайта на Adobe и свалете правилния viewer в зависимост от операционната си система, а после стартирайте програмата. Преди да видите първия SVG, ще се появи предупреждение за съгласие с лиценза за употреба. Толкова е просто.

Опитайте SVG за себе си. Може би ще ви хареса възможността да редактирате кода на ръка и да трансформирате XML данните си директно в графична форма без да губите контрол.

Ресурси

Сайтове на няколко SVG разработчици:
http://www.pinkjuice.com/
http://www.kevlindev.com/
http://www.svgnotebook.com/
SVG Wiki

Други SVG сайтове:
Adobe SVG Zone
Adobe SVG Viewer
Adobe SVG Examples
W3C SVG Specification