Векторная графика *

В настоящее время я работаю над одним веб-приложением, и вот захотелось мне обновить нынешний, довольно-таки топорный интерфейс на что-то более современное, более красивое. Начать решил с кнопок как с наиболее технически нагруженной части: в них требуется не только заменить внешний вид, но и добавить индикацию нажатия и обработку событий. Сразу же возникла проблема: как обеспечить масштабирование? Обычной растровой картинкой не обойтись, так как у пользователей могут использоваться разные шрифты (как вид, так и размер), и картинка-подложка не будет под них адаптирована. Логично было бы попробовать использовать для этих целей SVG, чем я и занялся.

К сожалению, в конечном итоге я пришёл к выводу, что овчинка не стоит выделки: слишком много проблем вылезло при попытке реализации этой идеи. Тем не менее, я не считаю это время потерянным: я приобрёл новые знания и навыки и теперь хотел бы поделиться ими с сообществом, чтобы облегчить жизнь тем, кто решит повторить мой путь. Описать свои мучения я планирую в двух статьях: в первой — работа над собственно SVG-картинкой, во второй — техника внедрения полученной картинки в качестве кнопок, возникающие при этом проблемы и их решение или обходные пути. Кому интересна первая часть, прошу под кат.

Здравствуйте, дорогие читатели. Те из вас, кто когда-либо работал с форматом svg, знают о противном и, что самое главное, чрезвычайно старом баге, проявляющемся в webkit-браузерах. Суть бага в том, что если вставить svg-картинку с прозрачным фоном через тег object, то safari и хром зальют её белым цветом — пример.

Выпущена новая версия свободного многоплатформенного редактора векторной графики Inkscape. В последние годы основная часть изменений в Inkscape реализуется за счёт участия в программе Google Summer of Code и совместной работы с лионским политехом, и эта версия не стала исключением. Кроме того, в этот раз часть работы по улучшению программы была оплачена самим сообществом пользователей через организацию LinuxFund.

Для векторной графики в Интернете формат SVG — самое то. Во-первых, он поддерживает масштабирование любой степени. Во-вторых, можно обращаться к любым составляющим элементам такой картинки — адресовать их, стилизовать и скриптовать. В-третьих, за исключением совсем маленьких файлов, этот формат выигрывает по компактности перед любыми растровыми представлениями, особенно если применить gzip-сжатие. В-четвёртых, сие есть стандарт W3C.

Но как поместить SVG-картинку в HTML-документ?

В прошлом уроке (обсуждение на Хабре), на примере создания картинки со снеговиком, я рассказывал о рисовании объёмных изображений в Inkscape. Но тогда я раскрыл далеко не все приёмы, которыми хотелось бы поделиться. Без внимания остались и некоторые инструменты программы, имеющие прямое отношение к 3D.

В этот раз мы будем рисовать аптечку.

Статья опубликована на Linuxgraphics.ru. Читайте, пожалуйста, там.

Встречаем новую версию (2.4) открытого векторного редактора SVG-edit.



Это действительно быстрый, основанный на веб-технологиях, векторный редактор, использующий только JS, HTML, CSS и SVG.

Им можно пользоваться прямо онлайн, ничего не устнавливая, не ставя никаких лишних плагинов, и это работает во всех современных браузерах.

К чему слова, пробуем!

Решил сделать вольно-раздолбайский перевод статьи о SVG с ALA. Это перевод первой части, в ближайшее время постараюсь перевести вторую.

Масштабируемая векторная графика (SVG) состоит из кругов, прямоугольников и путей, представленных в XML и объединенных в изображения на веб-страницах. Вы можете применять сплошную заливку,  градиенты и некоторые фильтры  SVG — не все браузеры поддерживают все типы фильтров. Вы можете включать текст, изображения и можете копировать ваши SVG столько, сколько хотите. Чаще всего SVG используется в графических программах, для создания диаграмм, иллюстраций, анимаций.  Однако, ничто не мешает нам использовать SVG для дизайна сайтов —это дает нам удивительно универсальные возможности в веб-дизайне, занятные в использовании. В этой вводной статье я рассмотрю некоторые важные моменты в работе с SVG, включая поддержку в браузерах. Во второй части мы рассмотрим, как найти и адаптировать SVG, которые вы можете найти в Сети, или как создать SVG-изображения самостоятельно и добавить их на вашу страницу.

Inkscape — относительно молодой, но прогрессивный векторный редактор общего плана (как Adobe Illustrator и Corel DRAW). Программа является кроссплатформенной, распространяется бесплатно и с исходным кодом. Основной формат изображений — SVG (масштабируемая векторная графика, стандарт W3C, рекомендованный для публикации векторных рисунков в интернете).

О работе с программой, а заодно и о том, как наполнить объёмом векторное изображение, я хочу рассказать на примере создания своей картинки со снеговиком.



Статья писалась специально для Linuxgraphics.ru. Читайте, пожалуйста там.

UPD: По многочисленным просьбам публикую исходник. Лицензия — CC Attribution Non-commercial Share Alike. Благодарности можно отправить на кошелёк Z161444749304 или R173720801008. Половина уйдёт в фонд развития Inkscape.

Сегодня я решил поглядеть, на что это будет похоже — сделать MacOS-подобный «док» в SVG, используя элементы SMIL <animateTransform> для достижения эффекта увеличения при наведении.

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

Вот результат: SMIL Dock

Скриншот:



(В оригинале есть ещё и скринкаст. — прим. пер.)

Заметьте, что это демо будет работать как следует только в ночной сборке mozilla-central — сиречь Firefox 3.7 / Gecko 1.9.3 — поскольку прежние версии не поддерживают SMIL.

Выпущена новая версия свободного редактора векторной графики Inkscape. Количество нововведений оправдывает разрыв в год и восемь месяцев между версиями. Вкратце о главном:

• новый инструмент Ластик, стирающий внутри векторных объектов;
• новые режимы в инструменте Корректор, разными способами меняющие положение и размер объектов;
• режимы рисования прямых отрезков при помощи Пера (кривые Безье);
• более двух сотен предустановленных фильтров SVG;
• новые динамические контурные эффекты;
• кривые Спиро (клотоиды), при помощи которых можно быстро получить фигуры с плавными изгибами;
• улучшен экспорт в PS и PDF, добавлен экспорт в JavaFX и импорт DXF.
• сборка для Windows поставляется вместе с UniConvertor (поддержка CDR и смежных форматов Corel).

Подробный иллюстрированный обзор можно прочитать здесь (внимание: он многостраничный). В обзор не включено описание добавленной поддержки шрифтов SVG, поскольку работает эта функция крайне неустойчиво и по всей видимости хочет некую определённую версию библиотеки Cairo.

В следующей версии может появиться два новых инструмента (Геометрические построения и Аэрограф), возможность писать сценарии, использующие инструментарий Inkscape, а не пишущие XML напрямую, одновременное редактирование нескольких контуров и многое другое. Это только то, что уже написано, но недостаточно оттестировано и потому не включено в 0.47.

Как обычно, на сайте обновлена галерея скриншотов.

Как известно, в этом году Google решила принять конференцию SVG Open 2009 прямо в собственном кампусе. Таким образом, Google подчёркивает свою всяческую поддержку открытому стандарту SVG (Scalable Vector Graphics), который они хотят продвигать повсеместно.

От лица компании Google на конференции выступил Брэд Нойберг (Brad Neuber). Он сказал, что SVG — особенный формат, который пользуется любовью разработчиков. В этом смысле его сложно с чем-то сравнить, настолько веб-девелоперы любят SVG. Рынок явно требует реализации этого стандарта, заявил Нойберг. Эти его слова подтверждаются результатами опроса веб-разработчиков, где векторная графика возглавила список из трёх десятков самых востребованных фич.

Свободный формат векторной графики SVG получил неожиданную поддержку от компании Google, которая решила помочь в организации конференции SVG Open 2009, главного мероприятия года для всех SVG-дизайнеров и разработчиков.

Конференция состоится 2-5 октября в кампусе Google в Маунтин-Вью (Калифорния). Среди обсуждаемых тем — тулкиты Ajax с поддержкой SVG (Raphaël, dojo, Ample SDK, SVG Web Project, JSXGraph), реализация SVG в браузере Internet Explorer с точки зрения Google, использование SVG в мобильных приложениях и т.д. (всего более 60 презентаций).

«Мы в компании Google просто восхищены форматом SVG, — написал в корпоративном блоге Google один из разработчиков, комментируя решение компании помочь в организации SVG Open. — Это открытый браузерный стандарт, позволяющий легко создавать интерактивную веб-графику с новыми тегами HTML-вида, такими как Circle. Нам нравится, потому что формат SVG является частью семейства технологий HTML 5 и в то же время дружелюбен по отношению к поисковым ботам, легко может быть использован разработчиками JavaScript и HTML, экспортируется из любых графических редакторов вроде Adobe Illustrator и отлично транслируется с серверной стороны средствами PHP или Google App Engine».

Здравствуй, хабранарод!

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

Поводом к написанию данной статьи послужили несколько событий: Внезапное с моей стороны приобщение к этому графическому редактору, и прочтение этой статьи про сам редактор и этого крика бедной верстальщицы

На http://petaimg.com можно выкладывать свои SVG и SVGZ изображения. Это значит, что есть место, куда можно выложить свои макеты, рисунки и прочие пряники в векторном формате.

Встраиваются куда угодно с помощью <img src="*.svg" alt=""/>, но видны только в Опере и вебкитовых браузерах (проверял только в сафари). Ради безопасности в случае вставки через img браузеры не поддерживают интерактивность в таких изображениях.

Есть один минус у хостинга — картинки порой удаляются.

JSR 226: SVG + mobile AJAX

Сейчас вы можете увидеть как традиционное MIDP приложение, построенное на lcdui.*, может быть переработано с использованием SVG и JSR 226. Исходный код обоих приложений доступен под BSD лицензией.

Используя SVG и JSR 226 можно улучшить процесс разработки, сделать ваши приложения значительно привлекательней и усовершенствовать их юзабилити.

Смотрите скринкаст



или

Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)

Ну чтож, вы не можете сделать интерактивную карту для iPhon'а на технологиях Silverlight, Java или Flash и всё что вам «остаётся» — использовать JavaScript. А может быть и нет. Быть может SVG луч в конце тоннеля для создания картографических сервисов для iPhon'а? Похоже iPhone 2G поддерживает SVG не так уж плохо, жаль только, что многие SVG сайты не оптимизированы под iPhone. Возьмём к примеру заброшенный (!?) просмотрщик SVG компании ESRI:

В новой сборке WebKit'а, включающаего SquirrelFish Extreme, есть поддержка SVG анимации.
Демо:

при отрытии пузырьки должны перемещаться
SVG — формат векторной графики на основе семейства xml, позволяющий создавать масшабируемые изображения ( с градиентами, прозрачностью и эффектами вроде теней и размытия) и анимировать их.

Поддерживается в той или иной степени Оперой, Лисой и Сафари.

Что там насчёт замены флэша на Ифоне?

C помощью js можно быстро и удобно динамически создавать SVG элементы.
Достаточно воспользоваться прилагаемой библиотекой.

У кого есть желание принять участие в переводе статьи «Применение SVG эффектов к HTML контенту» — присоединяйтесь!