SVG.js is a worthy competitor to Raphaël

Good day, dear habrazhiteli. I want to share with you one great find on GitHub - SVG.js - easy manipulation and animation of SVG . I want to say about three things that have focused my attention on this library. The simplest and most important thing is that with the advent of retina displays, SVG becomes more popular, more needed than before. SVG.min.js weighs 34kb and 9kb in Gzip, which is several times smaller than Raphaël and that can be sacrificed for design and effects . The minified SVG.filter.js with a size of 3kb is an excellent cross-browser analogue for the webkit-filter property.

Convenient syntax:

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' }); 

')

Functional:

• Animation of sizes, positions, transformations (translation, rotation, skew, scale, matrix), colors
• Masking and Clipping elements (I wrote about similar properties on CSS in this article )
• Modular structure, easy to write extensions

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

• Text paths (with animation support)
• Item grouping
• Dynamic gradients
• Developments
• Clear documentation

Existing plugins

• svg.filter.js - a set of SVG filters (gaussian blur, horizontal blur, desaturate, saturate, etc.)
• svg.draggable.js - allows you to drag items
• svg.easing.js - easing methods for animation
• svg.path.js - a very handy plugin for creating curves ( demo )
• svg.math.js - a set of mathematical functions
• svg.foreignobject.js - implementation of foreignObject (SVG element, into which arbitrary HTML is inserted)
• svg.export.js and svg.import.js import and export plugins for an entire SVG Canvas or a single item

Browser Support:

Desktop:

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

Mobile phones

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

Many thanks to all for your attention.