Иногда появляется необходимость сохранить svg в png средствами браузера. К сожалению, браузер не имеет волшебного api, который позволил бы это сделать без различных хаков. Что же делать, если все таки хочется добиться желаемого?
Читать полностью »
Рубрика «svg» - 10
Конвертируем svg to png
2015-04-05 в 19:02, admin, рубрики: canvas, javascript, svg, svg to canvas, Веб-разработка, метки: svg to canvasЗнакомимся с Fabric.js. Часть 3-я
2015-04-02 в 14:39, admin, рубрики: canvas, fabricjs, html, html5, javascript, svgЭто перевод третьей части серии статей об открытой Javascript canvas библиотеке Fabric.js.
Мы затронули основную часть базового материала о Fabric в первой и второй частях этой серии. В этой статье будет представлен более углубленный материал.
Читать полностью »
Используем SVG (часть первая)
2015-02-09 в 11:26, admin, рубрики: html, javascript, svg, веб-дизайн, Веб-разработка, изображения, обработка изображенийЯ люблю использовать SVG везде, где это только возможно.
При создании front-end я разделяю всю графику на две категории:
- “контент” — изображения, которые меняются в зависимости от содежимого
- “UI” — всё, что интегрировано в сайт
Названия не сильно важны, а вот распознавать эти две категории важно. Мы можем объединять все иконки в один спрайт (что будет рассмотрено во второй части), но никогда такого не сделаешь для изображений, используемых в статье.
Читать полностью »
Evil Icons: как мы изобретали SVG-иконки
2014-12-11 в 9:41, admin, рубрики: svg, веб-дизайн, веб-разработа, Веб-разработка, векторная графика, векторные иконки, иконки, Иконосказ, Работа с иконками
Мы почти полностью перевели проекты на векторную графику, хотя еще полгода назад были адептами символьных шрифтов (шучу, не такими уж и адептами). В статье я расскажу с какими сложностями мы столкнулись в процессе, что из этого получилось, и почему вам стоит переходить на SVG уже в следующем проекте.
Читать полностью »
Чтение SVG в C++
2014-12-10 в 15:27, admin, рубрики: c++, mpl, open source, svg, templates, векторная графикаПри выборе формата хранения или обмена векторными 2D изображениями, SVG один из главных претендентов, благодаря открытости и распространенности. При всех его достоинствах, авторы, на мой взгляд, чрезмерно увлеклись удобством и гибкостью при создании документов, что привело к большой вариативности и избыточности, а, следовательно, и сложностью чтения. Кроме того, ради компактности были изобретены разные грамматики, встроенные внутрь XML, что тоже добавило головной боли программистам.
Сейчас есть несколько C/C++ библиотек, которые могут загрузить SVG и отрисовать его в растр, но это только малая часть возможных применений SVG в приложениях.
Я разработал C++ библиотеку, которая должна взять на себя реализацию большинства нюансов спецификации, предоставляя данные SVG в удобном виде. Читать полностью »
Как изобрести велосипед и познакомиться с FRP
2014-12-08 в 15:48, admin, рубрики: FRP, javascript, svg, Веб-разработка, велосипедостроение, ПрограммированиеНедавно мне выпал шанс заняться веб-приложением для взаимодействия с интерактивной доской (!) для мобильных устройств (!!) на любом стеке технологий, как серверных, так и клиентских (!!!). На этапе прототипа задача представляла собой простейший графический редактор. Заказчик изъявил желание уметь рисовать ломаные каким-нибудь способом, круги, отрезки, произвольные кривые и добавлять текст. Все вроде бы просто, однако, наученный горьким опытом GoF, Фаулера и прочих апологетов всяческих паттернов, я сразу понял, что заказчик лукавит, и что уже через неделю-месяц после прототипа ему понадобится рисовать эллипсы, прямоугольники и кучи прочих ништяков. И все это точно надо будет делать разными способами. По крайней мере, для десктопа и мобил.
Собственно, можно все сделать в лоб (для прототипа-то), но выпали выходные, пауза в задачах текущего проекта, и я решил сделать все по-хорошему. И в первый же вечер — callback hell.
А потом…
Выразительный JavaScript: Рисование на холсте
2014-11-29 в 20:41, admin, рубрики: canvas, html, javascript, svg, Программирование, рисование, холст
SVG, Iconfonts vs PNG
2014-08-15 в 13:28, admin, рубрики: iconfonts, svg, хабр начинает и проигрывает пари 
Статья по мотивам Изображения в верстке. Хватит это терпеть. Скорее даже по мотивам комментариев к этой статье и в общем реакции хабра на призыв использования векторной графики везде, где можно и действительно нужно.
Признаться, я был немного удивлен реакцией на такие мысли в 2014-м то году. По этому случаю рассмотрим более детально существующие техники работы с иконками.
На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.
Читать полностью »
Последнее время SVG всё чаще используется в front-end, тут и там известные разработчики пишут хорошие статьи в своих блогах. В общем SVG, кажется, наконец-то начинает занимать заслуженные позиции в стеке технологий современного веб разработчика. Так что сегодня предлагаю поговорить о том, как можно использовать SVG в веб картографии. Мы рассмотрим как можно использовать возможности SVG и перекочевавшие из него в CSS свойства для достижения различных визуальных эффектов. Использовать будем Leaflet и иногда D3, но ни что не мешает использовать и другие библиотеки. Фильтры, паттерны и другие эффекты ждут вас под катом.
Изображения в верстке. Хватит это терпеть
2014-07-28 в 8:06, admin, рубрики: css, highdpi, retina display, svg, web-разработка, веб-дизайн, Веб-разработка, верстка, ретина 
Надеюсь этот пост послужит ликбезом всем веб-дизайнерам, верстальщикам, и проджект-менеджерам. Если вы хороший верстальщик, вас однозначно раздражают растровые изображения. Вы ненавидите растр, и всё, что имеет заметные глазу пиксели. Если это не так, добро пожаловать под кат.
Читать полностью »