Главная

SVG.js — достойный конкурент Raphaël

2013-09-25 в 12:24, admin, рубрики: javascript, svg, Веб-разработка, метки: javascript, svg

Доброго времени суток уважаемые читатели. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становиться популярнее, более нужным чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël ~~и что можно пожертвовать для дизайна и эффектов~~. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

Удобный синтаксис:

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.animate().move(150, 150);
rect.animate({ ease: '<', delay: 1500 }).attr({ fill: '#f03' });

Функционал:

Анимация размеров, позиции, трансформации (translation, rotation, skew, scale, matrix), цвета
Masking и Clipping элементов (про подобные свойства на CSS я писал в этой статье)

Модульная структура, простота написания расширений

SVG.extend(SVG.Shape, {
  paintRed: function() {
    return this.fill({ color: 'red' })
  }
})

SVG.extend(SVG.Ellipse, {
  paintRed: function() {
    return this.fill({ color: 'orangered' })
  }
})

Text paths (с поддержкой анимации)
Группировка элементов
Динамичные градиенты
События
Понятная документация

Существующие плагины

svg.filter.js — набор SVG фильтров (gaussian blur, horizontal blur, desaturate, saturate и др.)
svg.draggable.js — позволяет перетаскивать элементы
svg.easing.js — easing методы для анимации
svg.path.js — очень удобный плагин для создания кривых (демо)
svg.math.js — набор математических функций
svg.foreignobject.js — реализация foreignObject (элемент SVG, внутрь которого вставляется произвольный HTML)
svg.export.js и svg.import.js плагины импорта и экспорта целого SVG Canvas или отдельного элемента