SVG : Заміна Flash - у

Eric Vitiello Jr.

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

Більшість з вас, читачі, пам'ятають, що на початку 90-х років Macromedia розробила продукт під назвою Shockwave. Shockwave дозволяв розробникам мультимедійних програм створювати анімації і навіть програмувати їх, що відкривало небачені селі можливості в інтерактивної анімації.

Агенти тих часів стали підтримувати Shockwave за допомогою plug-in-ів, і незабаром Macromedia усвідомила, що необхідно створити полегшену версію Shockwave, яка буде призначена виключно для браузерів. У 1996 році Macromedia придбала компанію FutureWave software, чий продукт - FutureSplash - став тим, що ми знаємо як Flash 1.0.

Приблизно в середині 90-их на небосхилі стала сходити зірка мови XML, завдяки його простому методу організації даних. Мовою XML було створено безліч схем даних (data schemas). Схеми даних описували, наприклад, як зберігати і виводити математичну інформацію (MathML), як описувати ресурси загального характеру (RDF), і навіть як зберігати і виводити хімічну інформацію (CML). Цей метод організації даних був покладений в основу SVG.

Настав 1999 рік. Цей рік - рік народження нової XML схеми даних - SVG. SVG схема визначає, як в XML записується структура даних, описують векторну або растрову картинку. У специфікації мови SVG також описано, як створювати SVG-анімації, SVG-програми та документи. Все це робить SVG сильним конкурентом Flash-у.

Докладніше про SVG

З першого погляду зрозуміло, що специфікація мови SVG пропонує альтернативу багатьох функцій, наявних в наявності у Flash, а також додає багато інших. Ядром SVG є метод створення векторних графічних елементів точно так само, як Flash будує всю анімацію на основних геометричні фігури. Також як і Flash, SVG дозволяє створювати анімацію для кожного елемента, дозволяє управляти елементами за допомогою скриптів через DOM, JavaScript, ECMAScript або за допомогою будь-якого іншого скриптової мови, що підтримується SVG-програмою. У SVG розробнику доступні багато основні елементи, включаючи кола, прямокутники, еліпси, багатокутники, криві і текст. Так само як і в HTML, відображенням елементів можна управляти за допомогою стилів (CSS2), або безпосередньо за допомогою атрибутів.

В даний час існує безліч SVG-броузерів і редакторів, які дозволяють створювати і переглядати SVG-документи. Компанія Adobe створила plug-in, що дозволяє переглядати SVG-файли у броузері, а також включив підтримку роботи з SVG-файл в Illustrator 10. Інші компанії, такі як JASC, Corel, Sun і IBM також включили в свої продукти певну підтримку SVG. Так як схема SVG досить проста, ви можете легко створити SVG-файл навіть у простому текстовому редакторі.

Простий SVG-файл, який малює чорний коло, буде виглядати наступним чином:

1:

2:

4:

5: A Circle

6:

7:

Зверніть увагу: перший рядок - стандартний заголовок XML-документа, у другому і третьому рядку розташований заголовок SVG DOCTYPE. У 4-ої рядку розташовується кореневий елемент SVG-документа із зазначенням простору імен (name space) SVG. Усередині цього елемента розташовується елемент і елемент для малювання кола. В елементі ми задаємо координати центру кола (атрибути cx і cy), радіус (атрибут r). Решта атрибути визначають, який інструмент використовується для малювання краю кола, який у краю буде колір, і яким кольором буде залитий сам коло (цей атрибут має значення "none" - Тобто у кола заливання не буде).

В SVG документ можна вставляти та інші елементи. Наприклад, можна вставити PNG, GIF або JPG зображення за допомогою елемента . За допомогою SVG-схеми можна визначити свої власні шрифти, і навіть написати текст вздовж кривої. За допомогою скриптів можна міняти всі атрибути всіх цих елементів, а також створювати анімації, про що мова піде нижче.

Працюємо з SVG

Створити SVG файл вкрай просто, і в відміну від Flash, для цього вам не знадобиться користуватися будь-яким графічним редактором або набувати будь-яке ПЗ - plug-in від Adobe розповсюджується безкоштовно. Ця простота дає SVG ще одне перевагу перед Flash: завдяки текстової природі XML, SVG-файли можуть індексуватися пошуковими серверами. Таким чином вам не потрібно створювати додаткові метафайли для пошукових серверів, як це робиться у випадку з Flash. SVG-документ можна з легкістю вставити в HTML-документ.

Так як SVG-формат базується на XML, розробники отримують можливість будувати SVG-зображення грунтуючись на даних, які також можуть зберігатися в XML-форматі. Перетворюючи XML-дані в SVG за допомогою простого XSL, можна легко отримати графічне представлення будь-яких даних. Більш того, можна наприклад в SVG-графіку відобразити, як розташовуються столи в офісі, на основі даних, записаних у форматі XML.

XML дані:

1:

2:

3:

4:

5:

XSL перетворення XML в SVG:

1:

2:

3:

4:

5: Our Cubicles

6:

7:

8:

9:

10:

11:

12:

Кінцевий SVG документ:

1:

3:

4: A Circle

5:

5:

8:

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

Анімація в SVG

Анімація, як було вже сказано вище, здійснюється в SVG за допомогою мови SMIL (Synchronized Multimedia Integration Language), який також є технологією, розробленою консорціумом W3C. З метою демонстрації можливостей SVG у сфері анімації, ми можемо взяти наш попередній приклад з колом і анімувати його, додавши елемент:

1:

2:

4:

5: A Circle

6:

7:

8:

9:

Анімація може формуватися за певної події, наприклад за подією "onmouseover", "onclick", або за допомогою скрипта, що дозволяє створювати інтерактивну графіку. У кожного елемента до всього іншого є ще й свої власні події, до яких також можна прив'язувати скрипти. Коротше, існує безліч способів зробити SVG-документ інтерактивним, і робиться це дуже просто. Створення складних анімацій та складних наборів графічних зображень також не викликає жодних труднощів у SVG. Будь-який об'єкт в SVG-документі є XML-елементом, і до будь-якого цього елементу можна отримати доступ через DOM. Завдяки цьому ви можете визначити, як і куди кожен з елементів повинен рухатися, як і на які події реагувати.

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

SVG в процесі

Розробка специфікації SVG як і раніше триває. В даний час специфікація SVG 1.1 набула статусу Last Call Working Draft (Остаточний робочий чернетка проекту). Також у розробці знаходяться специфікації SVG Basic і SVG Tiny, призначені для мобільних пристроїв, що дозволить у майбутньому мобільних телефонів і наладонним комп'ютерів виводити на екран SVG-файли. Розробка цих специфікацій приведе в кінцевому рахунку до широкого визнання і використанню SVG точно так само, як безперервна розробка HTML призвела до розквіту цієї технології.

Дуже скоро SVG буде використовуватися повсюдно, а так як формат SVG не є власністю будь-якої компанії, його популярність буде стрімко рости. Flash буде ще деякий час домінувати в Web з-за великої кількості встановлених plug-in-ів. Однак, і SVG не відстає. Завдяки поширенню SVG plug-in-ів через броузери, кількість користувачів SVG виросте дуже швидко так само, як це було з Flash. Майбутні версії різних броузерів будуть вже заздалегідь включати в себе SVG-підтримку, а деякі мають її вже зараз.

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

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

Установка Adobe SVG plug-in-а дуже проста. Зайдіть на Adobe's SVG download і завантажте plug-in, що відповідає вашій операційній системі. Перед переглядом перший SVG-документа на екрані з'явиться вікно з ліцензійною угодою. Воно досить просте.

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

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/