Изображения SVG (Scalable Vector Graphics, масштабируемая векторная графика) состоят из окружностей, прямоугольников и контуров, записанных в формате XML. В SVG вы можете использовать сплошные заливки, градиенты и огромное число фильтров — хотя не все браузеры поддерживают все типы фильтров. Вы можете включать текст, а также изображения, кроме того, вы можете копировать и клонировать ваш SVG столько раз, сколько вам нужно. Чаще всего мы используем SVG в графических редакторах для построения графиков, создания иллюстраций или анимации. Однако мы можем использовать SVG и в дизайне сайтов — это удивительно универсальный формат и приятная возможность для создания уникального веб-дизайна. В этой вводной статье я расскажу о некоторых важных моментах при работе с SVG, в том числе о поддержке браузерами и доступности. Читайте II часть, если хотите узнать, как отыскать файлы SVG в Интернете и использовать их в своих целях, а также как создать собственные изображения SVG и добавить их на страницы своего сайта. Читать далее »
Рубрики с меткой ‘SVG’
Опубликовано в рубрике Разное 
Метки: SVG, браузер, векторная графика, изображения, фон 
Комментариев нет »SVG или Canvas? Сложности выбора
Июнь 20th, 2012 
Archi Новые веб-технологии все шире используются браузерами, появляются решения, доступные для многих браузеров, например, Raphaёl для поддержки SVG, и ExCanvas для Canvas. Даже Internet Explorer начал понимать SVG — а какую поддержку мы можем увидеть в будущем! Наличие нескольких похожих технологий создают проблемы выбора подходящего решения.
HTML5 Canvas и SVG — веб-технологии, которые позволяют использовать высококачественную графику в браузерах, но фундаментально они в корне отличаются друг от друга. В этой статье мы рассмотрим эти отличия и вопросы эффективного использования SVG и Canvas.
Scalable Vector Graphics (SVG) Читать далее »
Опубликовано в рубрике Разное Метки: canvas, Scalable Vector Graphics, SVG, контент, элементы Комментариев нет »Урок по CSS маскам – создаем вращающуюся галерею
Июнь 19th, 2012 Archi Я попробовал много вещей, которые вы можете сделать с . С помощью этого свойства вы сможете наложить маску или обрезать любой элемент. В роли маски может выступать как PNG, так и SVG.
Я связывал маски со свойствами transform и transition и добился крутого эффекта для галереи изображений. Я сделал для Chrome и ночных сборок Webkit. Firefox тоже поддерживает свойство mask, но не очень хорошо отображает вращающиеся изображения с масками, поэтому я использовал только префикс -webkit для этого демо.
Опубликовано в рубрике HTML-верстка Метки: CSS маска, SVG, вращающиеся изображения, Галерея, трансформация, Урок Комментариев нет »Маскирование текста по стандарту
Июнь 19th, 2012 Archi Я очень люблю , но недавно они просто вывели меня из себя своей статьей . В ней описывается, как накладывать текстуру на текст с помощью -webkit-mask-image, причем сообщается, что это экспериментальное свойство CSS. И даже предлагается использовать префиксы -moz-, -o- и -ms- для свойства, которое отсутствует в какой-либо спецификации и соответственно вряд ли вообще когда-нибудь будет поддерживаться каким-либо не WebKit браузером. Тем самым они вводят своих читателей в заблуждение. Не так давно () о том, насколько вредными для нашей отрасли могут быть подобные проприетарные вещи.
Опубликовано в рубрике HTML-верстка Метки: -webkit-mask-image, CSS, SVG, баг, Маскирование текста Комментариев нет »Знакомство с Canvas 2D API
Июнь 18th, 2012 Archi Если элемент <video> – это образцовый представитель HTML5, то <canvas> – это уж точно бунтарь. Элемент <canvas> является (до сих пор) , но было выведено в отдельный документ (на случай, если вы ищете его и не можете найти).
Элемент <canvas> обладает массой возможностей, такими как: Читать далее »
Опубликовано в рубрике HTML-верстка Метки: API, Canvas 2D API, HTML5, SVG, спецификации, элемент Комментариев нет »