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

Здравствуйте!
Эта статья, прежде всего для новичков, тех, кто только решил заняться демосценой, если статья будет положительно принята сообществом, то я сделаю цикл из нескольких статей о создании демок. Каждая статья будет короткой, но в конце каждой статьи будет вполне рабочий пример.
Сразу предупрежу, эта статья не о том как делать Demo с помощью OpenGL, DirectX, и миллионов шейдеров, об этом есть много хороших статей, я буду писать о рисовании в памяти.

Представляю сообществу шпаргалку по фильтрам Inkscape на русском языке. В шпаргалке приведены примеры использования всех векторных фильтров. Использовался Inkscape 0.48.4 с русской локализацией.

Идею создания снежинок использованную в этом посте я позаимствовал из детского сада. Там складывают лист бумаги в несколько раз, вырезают ножницами дырочки и после разворачивания получают снежинку. В данном случае нам потребуется нарисовать одну шестую и потом её копии повернуть на 60 градусов 5 раз.

Такие снежинки можно использовать в новогодних поздравлениях. Для затравки я сделал вот такую открытку.

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



Предыдущие топики о SVG:

• Знакомство с SVG-графикой
• Стилизация SVG-графики
• Текст в SVG

Пора

Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 65% пользователей уже могут увидеть transitions в действии.

CSS

Демо Код на jsfiddle
Так как я люблю CSS, решил сделать интерактивных зверюшек на чистом CSS, без каких-либо скриптов.
Благодаря псевдоклассу :checked, можно реализовать действие по клику, что обычно приписывается на js. А также используя уже привычные псевдоклассы :hover и :active, я оживил зверюшек:

.pavepy .body .hand.left,
.pavepy:hover .body .hand.right,
input:checked + .pavepy .body .hand.right,
input:checked + .pavepy:hover .body .hand.left,
input:checked + .pavepy.fox .head .ear.right {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg); 
	transform: rotate(-30deg);
}

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



Предыдущие статьи: Знакомство с SVG-графикой и Стилизация SVG-графики

Продолжаем изучать SVG-графику, на этот раз коснемся стилизации.
Первая часть: Знакомство с SVG-графикой.



Демонстрация примеров / Скачать исходники

Изменение внешнего вида SVG-элементов аналогично HTML, с некоторыми особенностями. Например фон назначается свойством fill, а не background-color, граница — stroke вместо border. Если вы работали с Adobe Illustrator, подобная терминология будет знакома.

Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Векторное изображение на рассеянных кривых

Долгое время возможности векторной графики были ограничены только линейными и круговыми градиентами, в результате чего можно было создавать лишь «плоские» изображения с определённым набором фигур. Настоящим прорывом стали смешанные градиенты (gradient mesh), которые впервые сделали векторную графику фотореалистичной. Группа французских исследователей под руководством Александрины Орзан (Alexandrina Orzan) из Технологического института в Гренобле в 2008 году сделала следующий шаг на пути развития векторной графики. Они разработали инструменты для генерации векторной графики на рассеянных кривых (diffusion curves), в том числе программу для автоматической конвертации растровых изображений в векторные.

Перевод с английского: How to cook Pizza with SVG?

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

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [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. Так если вам не хочется тратить время на чтение статьи, не приводящей к реально использующемуся результату, вы вполне можете её пропустить. Тех же, кому несмотря на это интересны детали и конкретика, прошу под кат.