Заміна 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-дані, ви можете перетворювати їх у графічне зображення, яким можна повністю управляти.