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

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

Перевод с английского: Inkscape: optimization tips for web developers.

В этой короткой статье я поделюсь с вами несколькими полезными приемами работы с редактором векторной графики Inkscape, которые помогают ускорить процесс подготовки SVG-кода.

После появления сетчаточных дисплеев люди ищут такие альтернативы PNG-значкам, которые не зависят от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

Вы в Интернет кафе и вам срочно надо нарисовать что-то в MS Visio? Не волнуйтесь, зайдите на Diagram.ly.

Бывает такое, что надо быстро отвекторить лого или другое изображение потому что НГ и надо быстро-быстро отдать в типографию штамп на тиснение, а растр не принимают. А может надо печатать огромный постер из логотипа, который вы только что сосканировали с единственной визитки. Такие изображения не всегда бывают достаточно простыми чтобы отрисовать их по оригиналу. Кроме того, у нас поджимает время – шампанское налито, студень остывает…

Продолжение вот этого поста, автором которого является viklequick.

Шаг пятый, или Применяем стиль «пьяный мастер за работой»
Теперь, раз у нас уже есть примитивы, давайте применим цвета, альфа-канал и стили у линий.

Приветствую всех хабражителей!
Сначала небольшое лирическое отступление. Этот пост был написан не мной, а пока еще незахабренным upd: уже захабренным viklequick, и, на мой взгляд, заслуживает вашего внимания со всеми вытекающими. Итак…

Зачин

Однажды в студеную зимнюю пору надоело автору добру молодцу бороться с векторными картинками в формате EPS. И решил он идти в ногу с прогрессом и встраивать графики и диаграммы в документы Adobe InDesign в виде SVG. И тут постигло его разочарование великое, ибо фирма Adobe Systems предпочитает свой Adobe Flash, а в Adobe InDesign поддержка SVG отсутствует на корню. Однако ж у добра молодца накопился знатный опыт создания плагинов под InDesign и решил он применить свою силушку богатырскую и забороть гидру трехглавую. Богатырь сказал – богатырь сделал, а именно — заборол.
О деталях этой борьбы и поведем наш сказ.

Компания Wolfram Research продемонстрировала новый формат электронных документов под названием CDF.

Основная «фишка»: интерактивность; пользователь может взаимодействовать с графиком (ввести новые данные) и тут же увидеть результат и т.д.

Однажды, от скуки, мне захотелось создать красивую полноцветную анимацию с 8-битной прозрачностью. Понятно, что GIF для этой цели никак не подходил и я стал искать альтернативы. Flash в этом качестве даже не рассматривался – слишком нагружает процессор, плохо встраивается в страницу поверх других элементов, да и стоит не у всех.

Данная статья является продолжением статьи Рисуем кнопку в SVG, в которой рассматривались проблемы создания SVG-изображений, предназначенных для использования в качестве кнопок на веб-страницах. Здесь я перейду непосредственно к внедрению полученных картинок в HTML-код и расскажу, с какими проблемами столкнётся при этом разработчик, как эти проблемы можно решать и что делать с проблемами, которые решить не удаётся.

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

Тема оформления «Хабрахабр».

Ещё 2 дня назад я закончил разработку инструмента для рисования снежинок, отладил его в тепличных локальных условиях и готов был отправить в дальнее плавание. Но запуск «проекта» в открытый интернет пришлось 2 раза откладывать. Сначала при интеграции со сторонним сайтом отказались работать кроссдоменные AJAX-запросы методом POST (а GET'а мне не для всех запросов было достаточно), потом на медленном канале проявила себя в виде глюков асинхронная загрузка данных и представления. Сейчас всё вроде бы пофикшено, выложено и ожидает по отношению к себе проявлений внимания.

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