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 контенту» — присоединяйтесь!

Совершенно нереально поговорить с каждым из почти полусотни человек (из 111 зарегистрированных на SourceForge), поучаствовавших в разработке новой версии Inkscape, и это даже не считая тех, кто просто прислал патч. Мы предлагаем вашему вниманию интервью с несколькими студентами, поучаствовавшими в программе Google Summer of Code 2007, а также несколькими ключевыми разработчиками Inkscape.

Сегодня дебютировал ECMAScript фреймворк, созданный для работы с SVG документами в интернете.
Из их блога:

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

Между тем этот релиз всего-лишь демонстрация функциональности ядра фреймворка, нежели прямого исполнения, он показывает свой потенциал.
Фрэймворк обеспечивает наследование с помощью прототипов (prototype-esque), упрощает перемещение объектов и выполнение других основных задач. Кроме этого он имеет мощный класс анимации, используемый для кроссбраузерной анимации, или формально несуществующих вещей.
Досадно, что не поддерживается IE на данный момент, но поддержка планируется.
http://revecter.googlecode.com/

Три продукта:

• Microsoft Internet Explorer  Plugin

  
  Позволяет просматривать веб-сайты сделаные на SVG. (ну кто-то же должен был это сделать, Могилевский то занят был)

• Windows Thumbnail Plugin

  
  Добавляет возможность предпросмотра svg в качестве thumbnail в Проводник.
  

  Standalone Player

  
  Позволяет запускать svg приложения вне постороннего окружения

Недавние комментарии Стива Джобса о iPhone и Flash запестрили в заголовках новостей. В iPhone не будет добавлена поддержка Flash, как было сказано 'он не достаточно хорош для Apple iPhone.'

Бурно обсуждаются альтернативы для iPhone. И после всех доводов- большинство игр и видео в сети требуют Adobe Flash. Apple просто не может это проигнорировать(или может?)

Robert Scoble написал о слухах, согласно которым Apple работает над поддержкой SVG в iPhone. Это определённо должно стать позитивной и интересной вещью для веба.

SVG, который расшифровывается как Scalable Vector Graphics (Масштабируемая векторная графика)- это открытый стандарт W3C ( в отличии от проприетарного Adobe Flash).

SVG сейчас популярен в программах для мобильных устройств. Вероятно, Apple получит ещё больше возможностей от шикого распространения SVG в сети. SVG уже поддерживают Opera, Firefox и Safari.

iPhone уже дал мобильному вебу много хороших осознанных вещей, может быть тоже будет и с SVG. Будем надеятся.

via operawatch

Chris Double, занимающийся поддержкой HTML5 тэга <video> для Mozilla Firefox, опубликовал великолепное демо используещее Theora video файлы как живые тестуры в SVG файле (на тему HTML5 тэга <video> я уже писал).

Вы можете перемещать, поворачивать и изменять размер этих объектов. Выклядит действительно впечатляюще! Обязательно посмотрите видео, сделайте это прямо сейчас ;). via theora.org

Theora in SVG

Для этого видео Chris Double модифицировал файл от Vladimir Vukićević.