Записи в разделе: SVG



SVG: Используем pattern для заполнения объектов

2012.05.03

Сегодня мне удалось попробовать элемент pattern для создания необычной заливки SVG-объекта. Этот опыт нужно записать! Для начала нужно создать сам паттерн в секции defs. Например так: <pattern id=”bricks” patternUnits=”userSpaceOnUse” x=”0″ y=”0″ width=”10″ height=”10″> <rect width=”10″ height=”10″ style=”fill:#DB531D”/> <path d=”M1,0 L9,0″ … подробнее →

Опубликовано в: SVG, Все записи | Помечено | Оставить комментарий

SVG: Особенности оформления фигур с помощью CSS

2012.05.02

Сегодня я столкнулся с весьма интересными особенностями работы браузеров при отображении SVG-фигур оформленных через CSS. Для начала возьмем и создадим тестовый SVG-объект: <rect id=”testRect” x=”100″ y=”100″ width=”300″ height=”100″/> Первая часть эксперимента Через инлайн стили зададим ему офромление. Для этого добавим … подробнее →

Опубликовано в: Chrome, CSS, Firefox, Opera, SVG, Все записи | Помечено , | Оставить комментарий

Автомобили ручной работы в SVG

2012.04.27

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

Опубликовано в: Chrome, Firefox, Opera, Presto, SVG, WebKit, Браузеры, Все записи | Оставить комментарий

SVG: Кто и как поддерживает анимацию через spline?

2012.04.25

Оказывается в SVG можно делать не только равномерные анимации, но и анимации с переменной скоростью. Для этого нужно добавить к элементу анимации свойство calcMode, которое по умолчанию выставлено в paced (равномерная анимация). В данном случае меня интересует значение spline, которое … подробнее →

Опубликовано в: Chrome, Firefox, Opera, SVG, WebKit, Браузеры, Все записи | Помечено , , , | Оставить комментарий

SVG: Использование подключенных ресурсов

2012.04.24

Сегодня я столкнулся с еще одним странным поведением браузеров при интерпретации SVG. Допустим, нужно подключить SVG-изображение которое находится во внешнем файле. В секцию defs помещаю элемент image: <image id=”rect” xlink:href=”rect.svg” width=”100″ height=”50″/> После этого использую его пару раз: <use xlink:href=”#rect” … подробнее →

Опубликовано в: Opera, SVG, Браузеры, Все записи | Помечено , | 1 Комментарий

SVG: Такой странный animateMotion

2012.04.23

Прошлым летом я уже писал про SVG-элемент animateMotion и приводил пример его работы. Вчера он преподнес мне неожиданный сюрприз. Оказывается браузеры разделились в интерпретации параметра transform анимируемого объекта. В Firefox и Chrome\Chromium трансформации применяются только к объекту и его визуально … подробнее →

Опубликовано в: Chrome, Firefox, Opera, Presto, SVG, WebKit, Браузеры, Все записи | Помечено , | Оставить комментарий

SVG: Кто чего поддерживает?

2012.04.22

В последнее время я обнаруживаю все больше деталей из спецификации SVG, которые тот или иной браузер не поддерживает. Например, Chrome не ловит мышейсобытия начала и конца анимации. Для быстрой проверки кто неправ — я или браузер удобно использовать специальные таблицы. … подробнее →

Опубликовано в: Chrome, Firefox, Opera, Presto, SVG, WebKit, Браузеры, Все записи | 2 Комментариев

svgweb: Нормализация поддержки векторной графики

2012.04.16

Старые и допотопные браузеры все больше отходят на задний план, но поддержка пользователей этих браузеров все еще актуальна. Для таких случаев предназначена библиотека svgweb. Её основная цель корректное подключение SVG в HTML-страницы при отображении в разных браузерах. Особенно это касается … подробнее →

Опубликовано в: Internet Explorer, JavaScript, JS-библиотека, SVG, Все записи | Помечено | Оставить комментарий

PottisJS: Еще один фреймворк для работы с SVG

2012.04.16

Кроме RaphaelJS для работы с SVG есть еще интересные библиотеки. Одной из таких библиотек является PottisJS. Её преимуществами является отсутствие полного закрытия собой элемента SVG. После нее можно спокойно подправить получившееся DOM-SVG-дерево средствами нативного JavaScript. Впрочем, недостатки у нее тоже … подробнее →

Опубликовано в: JavaScript, JS-библиотека, SVG, Все записи | Помечено , | Оставить комментарий

SVG: Добавляем растровые изображения

2012.04.16

Для использования растровых изображений в SVG предусмотрен специальный элемент image. Впрочем, изображение может быть и векторным. Особенно нового тут ничего нет: <image x=”0″ y=”20″ width=”100″ height=”100″ xlink:href=”myImage.png”/> Любопытным атрибутом будет externalResourcesRequired, который может принимать true или false. Он определяет, нужно … подробнее →

Опубликовано в: SVG, Все записи | Помечено | Оставить комментарий