+ 12.12.2000> Новый стандарт для дизайнеров / 14.03.2000
 
Чтобы жизнь медом не казалась

Вы как раз освоили все новые технологии, которые придумали для дизайнеров в прошлом году, наконец, разобрались с новыми версиями своих рабочих программ, и теперь можете просто спокойно творить? Не радуйтесь слишком рано. На горизонте появился новый графический формат для Интернета, с которым вам предстоит разбираться!
Новая забота называется SVG, является векторным форматом для Интернета и должна облегчить нам жизнь. Правда, дизайнеры еще не совсем понимают, радоваться им или плакать по поводу этого нововведения.

Вы знаете, как устроена картинка формата EPS? По большому счету это текстовой файл, который содержит какое-то "описание картинки", и который имеет расширение *.eps. Похоже, устроен новый формат SVG - это кусок текста, который содержит описание. Только в отличие от EPS это описание настолько логично, что его способен понять любой дизайнер, почитавший документацию к формату SVG. Если пойти еще дальше, можно даже научиться самостоятельно писать такие "исходники" в любой текстовой программе.

Результат - векторная картинка, которая - при наличии очередного "плагина" - может отображаться браузером. Преимущество векторных картинок перед пиксельными объяснять не нужно - они занимают мало места, у них "гладкие" контуры, и их качество не страдает, когда изменяются размеры картинки.

- Но ведь векторную графику уже можно использовать в Интернете! С помощью технологии Flash! - скажете вы. Правильно. Но к этой технологии уже все привыкли, дизайнеры научились с ней работать, а пользователи перестали ее бояться. Самое время для введения нового графического формата, в котором никто ничего не понимает!

SVG расшифровывается как Scalable Vector Graphics, и является совершенно новым форматом. Язык, на котором пишется этот формат, базирован на языке XML, и похож на HTML - он работает с "тэгами", которые можно, в крайнем случае, писать в обычном текстовом редакторе.

Конечно, у формата SVG есть много преимуществ


SVG-картинки (или тот самый кусок текста, который содержит описание картинки) можно свободно вставлять в HTML-документы. Они совместимы со всеми элементами HTML, DHTML, JavaScript и XML. Самое большое преимущество этого нового формата - такие картинки (и их отдельные части), включенные в HTML код, можно изменять динамически. И все чудеса, которые можно сотворить с помощью Javascript, применимы к любым элементам картинки.

Например, если сейчас мы хотим, чтобы картинка изменяла свой цвет, когда ее касается курсор, мы должны "подменить" целый файл - и подгрузить картинку, где все раскрашено другим цветом. В случае с SVG было бы достаточно изменить только один параметр картинки, которая уже загружена. Еще одно интересное преимущество - возможность загружать картинку динамично.

Например, картинка могла бы загружаться в разном виде, в зависимости от того, чем смотрят страничку. Если страницу пытаются посмотреть мобильным телефоном, картинку можно изображать в черно-белом виде, если используется "электронная записная книжка", можно использовать 256 ступеней серого цвета, а при наличии обычного браузера можно "красить" картинку во все цвета радуги.

Правда первые эксперименты уже показали, что иногда подобное "описание" занимает столько места, что загрузить заранее 3 картинки величиной в 2 килобайта было бы быстрее. Выходит, что все это интересно только в том случае, если используются очень большие изображения. Но это не самое большое преимущество нового формата. В первую очередь он должен пригодиться для изображений, которые выстраиваются динамично на основе информации, взятой из базы данных.

С помощью SVG можно сделать персонализированную страничку, где каждый пользователь видит свой персональный вариант изображения. При этом не нужно для каждого варианта рисовать десятки картинок, и держать на сервере - картинка для всех одна, изменяются только определенные параметры.
  

Все это очень интересно, только как эти картинки делать?

Или, правильнее было бы спросить: "чем?" Мало кто из дизайнеров возьмется описывать в текстовом редакторе хоть немного сложную фигуру. Это должны делать специальные программы, или приложения к уже существующим векторным программам. И тут начинаются проблемы. Пока существуют только бесплатные приложения к программам CorelDraw 9.0 и Illustrator 8.01. Дизайнеры, которые используют более старые версии этих программ, или другие векторные программы, остаются не у дел.

Видимо вскоре появятся фильтры для других программ, например для Macromedia Freehand. Но выпуск приложений к старым версиям этих программ по-прежнему не планируется. И как объяснить пользователям, что им опять нужен новый "штепсель"? Технологию Flash годами отвергали только потому, что Флэш-программы нельзя было посмотреть любым стандартным браузером. Факт, что пользователь должен что-то сделать, для того, чтобы посмотреть картинки, всегда сильно отпугивал заказчиков и дизайнеров. И страсти улеглись не потому, что пользователи привыкли к необходимости загружать себе plugin и устанавливать его на своем компьютере - средний пользователь сегодня такой же ленивый и недоверчивый, как раньше. Просто Flash-plugin стал стандартной частью современных браузеров, и большой процент пользователей получили его "нечаянно", не приложив к этому никаких усилий.

Теперь вся дискуссия начинается снова, потому что стандартной частью браузеров Netscape и Internet Explorer SVG-Plugin станет только начиная с версии 6.0, да и это еще не на 100% точно... Тем не менее, нам кажется не увильнуть от этого новшества, так что вы уже можете начинать сочинять успокоительные тексты для ваших пользователей, с уговорами завести себе новый plugin для новой красоты.

Первый эксперимент с SVG уже почти готов - правда, к сожалению, его еще нельзя увидеть в Интернете. Это - виртуальная карта Москвы, которая загружается только один раз. После этого нажатием разных кнопок можно приблизить изображение, сделать видимыми/невидимыми линии метро или названия магазинов на домах, и многое другое. "Шевелится" все это не намного быстрее, чем если бы все картинки загружались каждый раз заново. Зато вся карта содержится в одном файле "весом" в 200 килобайт. На изготовление файла (с подробной сортировкой всех элементов) ушло очень много времени, и трудно сказать, было ли это проще (быстрее), чем какой-либо альтернативный вариант. Специалисты, которые серьезно работают с технологией Флэш, утверждают, что они могли бы "впихнуть" все то же самое и во флэш-ролик такого размера.
Кто возьмется это проверить?

Все детали в одном списке

SVG = Scalable Vector Graphics Векторный формат. Текстовая основа - на базе XML. SVG-элементами можно управлять с помощью JavaScript и любых других скриптовых языков. Совместим с CSS (Cascading Style Sheets). Поддерживает следующие векторные формы: Прямоугольники (возможны закругленные углы), овалы, полигоны (неправильные формы). Позволяет создание новых векторов. Возможно заполнение закрытых форм цветом, с некоторыми исключениями возможно создание прозрачных участков. Возможно "отрезание" частей картинок с помощью векторов.

Возможно создание маскировочных слоев (вырезание "дырок" в картинках). Закрытые объекты можно заполнять цветовыми переходами. Цвета могут иметь разную степень наполнения в процентах. Возможны трансформации объектов - например, ротации, изменение размеров, искажение, передвижение. Возможно вставление в картинки пиксельных картинок в формате GIF и JPG. Возможно создание "альтернативных тэгов" для GIF- картинок. (Для старых браузеров.) Все модификации применимы к текстам, которые являются частью изображения.

Информация по теме:

Что пишет по этому поводу сообщество w3.
Plugins для Illustrator 8.01, Netscape Navigator и Internet Explorer от Adobe.
Приложение к CorelDraw.

 

 Miu Mau, Германия, b.a.(hons) multimedia arts - специалист по компьютерной графике в области скрин-дизайна и мультимедиа, эксперт и консультант проекта Лист.Ру miu@mail.ru
http://www.miu-mau.org
 
 > next
 
 previousПодарки для дизайнеров от фирмы Mauritius
 

next

Дизайнерам надоел Интернет
 
 на ту же темуЕще раз про SVG
 
  
 
© Listovka.ru, 2000