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

Доброго времени суток уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на 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 или отдельного элемента

Поддержка браузерами:

Десктопные:

• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 9+
• IE9 +

Мобильные

• iOS Safari 3.2+
• Android Browser 3+
• Opera Mobile 10+
• Chrome for Android 18+
• Firefox for Android 15+

Большое спасибо всем за внимание.