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

сегодня в 16:24

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

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

Developers, stick with Russians – work in London

Переводы с

карты на карту

Переводы

через QR-Код

Новая функция

«Мой контроль»

Возьми Lumia 925 на тест-драйв сейчас.

Впечатляющие возможности

в стильном тонком корпусе из металла

Boomburum

исследует LTE

Эволюция средств связи

в путешествии по России

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK