Как стать автором
Обновить
0.39

Работа с векторной графикой *

SVG и компания

Сначала показывать
Порог рейтинга
Уровень сложности

Анимированный PNG в Firefox, Opera и WebKit? Легко!

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

Проблемы использования SVG-кнопок в браузерах

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

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

Инструмент для рисования снежинок в браузере

Время на прочтение5 мин
Количество просмотров5K
Снежинка своими руками. Хабрахабр
Тема оформления «Хабрахабр».

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

О разработке, планах, предложения о сотрудничестве

Рисуем кнопку в SVG

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

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

Истории

SVG с прозрачным фоном в Chrome и Safari

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

Выпущен Inkscape 0.48

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

К вопросу о кроссбраузерном использовании SVG

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

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

Читать дальше →

Объём и перспектива в Inkscape

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

В этот раз мы будем рисовать аптечку.
Аптечка. Нарисовано в Inkscape. Автор — Юрий Апостол.
Статья опубликована на Linuxgraphics.ru. Читайте, пожалуйста, там.

SVG-Edit — рисуем в онлайн, рисуем в офлайн

Время на прочтение1 мин
Количество просмотров66K


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

SVG-Edit

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

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

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

Фишки под катом

Использование SVG для гибких, расширяемых и занятных фонов. Часть первая

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

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

Читать дальше →

Рисуем объёмные изображения в Inkscape

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

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

Снеговик. Нарисовано в Inkscape. Автор — Юрий Апостол.

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

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

Демонстрация «дока» SVG/SMIL

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

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

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

Скриншот:

[SMIL Dock (скриншот)]

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

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

Выпущен Inkscape 0.47

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

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

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

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

Ближайшие события

2 – 18 декабря
Yandex DataLens Festival 2024
МоскваОнлайн
11 – 13 декабря
Международная конференция по AI/ML «AI Journey»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Google требует от Microsoft поддержки SVG и Canvas

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

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

Google примет конференцию SVG Open 2009

Время на прочтение1 мин
Количество просмотров611
Свободный формат векторной графики 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

Время на прочтение2 мин
Количество просмотров3.2K
Здравствуй, хабранарод!

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

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

Читать дальше →

Хостинг для SVG изображений

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

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

Пользовательский интерфейс мобильного приложения

Время на прочтение2 мин
Количество просмотров1.4K

JSR 226: SVG + mobile AJAX


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

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

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



или
читайте

JavaScript библиотека «Raphaël» — SVG расцветает, SVG и iPhone

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

часы
Читать дальше →

Используй SVG при создании интерактивных карт для iPhon'а

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

image
Читать дальше →

Вклад авторов