Не так давно я писала о новом стандарте для дизайнеров - SVG. С тех пор разные фирмы разрабатывают поддержки и программки для этого стандарта, чтобы дизайнерам было проще к нему привыкать, а дизайнеры пишут письма, и спрашивают друг друга: "Кто уже решился? Кто уже попробовал? И когда можно начинать это дело хором ругать?" Мы решились, и мы попробовали. И вот результат...
Сначала я решила попробовать посмотреть на то, что уже сделали другие. Уже готовых примеров в Интернете нашлось достаточно, осталось сделать свой браузер пригодным для просмотра новомодных файлов.
По первым трем ссылкам с "Альтависты" я попала на странички трех совершенно неизвестных фирм, которые предлагали свой "просмотрщик" для SVG. От первого я сбежала сразу, как только увидела "инструкции по установке". Мне предлагали какой-то страшный пакет из трех программ, которые надо было устанавливать - одну за другой. В описаниях мелькали какие-то подозрительные фразы про специальные java-машины, и я решила не рисковать здоровьем своего компьютера. На второй странице мне предлагали тоже что-то со словом java в названии. На этот раз в виде одного файла. Весом в 6 мегабайт. На третьей странице давали файл в два мегабайта, который загрузить не удалось, потому что связь с сервером была безобразная. Через 5 минут мой загрузочный статус все еще показывал 1%, и я сдалась.
После этого мне посоветовали посмотреть, что по этому поводу говорит Adobe. Ведь именно компания Adobe взялась активно поддерживать этот стандарт, и способствовать его развитию. И в самом деле - надо же было до такого не додуматься! Ссылка была более чем простая: www.adobe.com/svg Тут я моментально нашла подробное описание технологии, и инструкции - как посмотреть, чем сделать, и как оно вообще устроено. Там же предлагали загрузить "плагин", который нужно было установить на своем компьютере для просмотра SVG-файлов. Вес - 2,5 мегабайта. Даже с моей довольно быстрой связью мне пришлось подождать некоторое время, пока загрузка закончилась.
Пока оно "грузилось", я смотрела на монитор, и вздыхала. Будь я пользователем - я бы наверняка на это не согласилась. Загрузка "штепселя" такого калибра, только ради просмотра какой-то красивой картинки - это не серьезно! Между делом я успела понажимать на кнопки с надписью "посмотреть пример". Естественно я могла получить в ответ только пустое окно, в котором красовалась надпись: "Этот формат не поддерживается..." Как только файл загрузился, я запустила инсталляцию - на экране на секунду мелькнуло какое-то окно с текстом, после чего программа поздравила меня - поддержка SVG якобы успешно "проставилась" на моем компьютере.
Я решила не закрывая ничего сразу перегрузить пустое окно, в котором минуту назад не загрузилась картинка , и - о чудо - картинка моментально появилась в окне. По крайней мере одна приятная новость - поддержка SVG в самом деле установилась "молча", и начала работать сразу, не требуя даже закрыть и снова открыть браузер. Теперь я пересматривала готовые работы, и посмотреть на это было очень приятно. Я думаю, что уже не нужно рассказывать, как красиво и "гладко" выглядит векторная графика (посмотрите на любой флэш-ролик). Так же красиво выглядели картинки SVG, и так же весело крутились и двигались анимации. Только ко всему этому прибавлялось сознание, что каждую отдельную часть картинки можно изменить динамично, не перерисовывая всю картинку.
Однако среди готовых примеров я не увидела ничего, что нельзя было бы сделать в технологии флэш. Зато описание от Adobe сильно вдохновило нашего программиста. Как раз месяц назад мы делали электронный магазин, в котором программа должна была генерировать несколько тысяч комплектов одежды - синяя майка с зеленой юбкой, зеленая майка с оранжевой юбкой... Чтобы программе было из чего генерировать, пришлось сначала все это "нарисовать". Ровно 2700 маек, юбок, и шарфиков всех цветов радуги. И еще это все умножить на три размера и два роста.
Вспоминая эту задачу, мы вздыхали: "Да-а... Конечно было бы приятнее, если бы мы нарисовали каждую майку один раз, а потом пользователь мог бы ее "растягивать" и "сжимать" до любого размера, и красить в любой из предложенных цветов." Построить такую майку для SVG - не меньше работы, чем нарисовать ее в Photoshop. Но чувствуется одно преимущество: в случае с SVG не будет иметь значения, сколько у майки размеров или цветов, если она уже один раз сделана по-человечески.
Кстати, когда зашел разговор о работе такого калибра, как магазин с несколькими тысячами товаров, сразу изменился взгляд на злополучный плагин. Одно дело - развлекательная "заставочка", ради которой никто не будет тянуть из сети 2.5 мегабайта. Другое дело - серьезный магазин. Когда делается такая вещь, серьезный заказчик в крайнем случае не пожалеет денег, чтобы бесплатно послать каждому желающему по компакт-диску, на котором будет удобная программка для установки поддержки SVG. Сказано - сделано.
Мы решили попробовать сделать элемент для электронного магазина. За это время вышла новая версия программы Adobe Illustrator, из которой можно очень легко экспортировать картинки в формате SVG. Там я легко нарисовала две девушки - почти одинаковые, но одна - немного шире другой. Полученный SVG-файл легко открылся в браузере, после чего я отдала его программисту. Программист посмотрел на полученные 25 килобайт текста, и схватился за голову: ему теперь осталось разобраться, что из этого всего означает руку, а что - ногу. Но программист справился с этой задачей быстрее, чем мы думали.
После того, как программист разобрался с картинкой, он выдвинул свой список требований, которых мы должны были придерживаться во время рисования последующих картинок, чтобы для него работа не превращалась в ад. Список был довольно длинный. Стало понятно, что дизайнера для этой задачи еще надо "специально обучать", и что в этом деле абсолютно каждый шаг должен строго согласовываться между программистом и дизайнером.
Правда в результате всех мучений мы получили девушку, которая видоизменялась "в любом направлении". Нужно было только записать в нужные поля рост, обхват груди, талии и бедер, и размер одежды - и девушка принимала нужный вид. После того, как размеры девушки были подсчитаны, все одежки сразу автоматически приобретали нужную длину и ширину - оставалось только выбрать желанную модель и цвет.
Одним словом - мы доказали то, что требовалось доказать - технология SVG в самом деле умеет что-то уникальное. Для такой задачи как электронный магазин, это в самом деле интересный вариант, который стоит обсудить.
Вот весь список умных выводов, которые мы вынесли из нашего эксперимента: Технология SVG - это не полный бред, который никому не нужен. Есть вещи, которые другими средствами пока сделать невозможно. Не нужно сравнивать SVG с Flash. Это совершенно разные вещи, и общего у них только то, что обе технологии работают с векторной графикой. Разговоры о том, что SVG - это потенциальная конкуренция для Flash - абсурдны. Flash хорошо годится для изготовления развлекательных заставок, анимаций и специальных эффектов. Все это вещи, ради которых практически никто не будет загружать из Интернета 2.5 мегабайта и испытывать такую новую технологию.
С другой стороны SVG позволяет сделать в самом деле уникальную вещь: от нарисованной один раз картинки можно изменять динамично любую часть. При этом не надо рисовать картинку заново. И на сервере она имеется только в одном экземпляре. С SVG имеет смысл связываться только, если планируется что-то очень большое. За то в этом случае можно сразу планировать все "по-человечески" с самого начала. Всем, кто будет пользоваться SVG-страничкой, имеет смысл "подарить" сразу всю поддержку на компакт-диске. Еще лучше - подарить пользователю сразу целый браузер с нужной поддержкой, чтобы точно избежать всех возможных катастроф.
Правда многие пользователи не любят такие вещи - ради одной странички устанавливать целую программу. Но, если кто-то в самом деле хочет регулярно пользоваться конкретным магазином - почему бы и не согласиться на такое? Чтобы сделать хорошую SVG-страничку, программист и дизайнер должны буквально каждый шаг делать вместе.
Дизайнер должен следить за многими деталями, на которые он обычно никогда не смотрит: там нельзя лишнюю точку вставить, тут можно раздвигать объекты только строго по горизонтали. Объекты часто нужно группировать в строго предписанном порядке. Пополнение уже начатой "коллекции" объектов для одного проекта может стать очень простым для тех, кто участвовал в проекте с самого начала, если правильно начать. Однако те, кто подключатся к проекту на поздних стадиях, должны будут изучать длинные списки с "можно" и "нельзя", чтобы грамотно продолжать начатое дело.
SVG - это не развлечение для новичков. Умение очень грамотно обращаться с векторной графикой здесь так же нужно, как умение работать в коллективе над очень сложной задачей. Мы пока еще не нашли заказчика, который бы на это все решился...
К сожалению я еще не нашла в Интернете какого-нибудь подробного описания SVG на русском языке, или форума, где кто-нибудь серьезно обсуждал бы эту проблему. Самая подробная и понятная информация на эту тему на английском языке по прежнему находится на www.adobe.com/svg. Там же имеется галерея уже готовых SVG страничек и картинок. Каждый, кто сделает что-то интересное в этой технологии, может быть представлен в этой галерее - фирма Adobe сердечно приглашает всех желающих пробовать свои силы.
Miu Mau, Германия, b.a.(hons) multimedia arts - специалист по компьютерной графике в области скрин-дизайна и мультимедиа, эксперт и консультант проекта Лист.Ру miu@mail.ru http://www.miu-mau.org
