A lightweight library for manipulating and animating SVG.

      
        // create svg drawing paper
        var draw = SVG('canvas')

        // create image
        var image = draw.image('images/shade.jpg')
        image.size(600, 600).y(-150)

        // create text
        var text = draw.text('SVG.JS')
        text.move(300, 40).fill('#fff')
        text.font({
          family: 'Source Sans Pro'
        , size: 180
        , anchor: 'middle'
        , leading: 1
        })

        // clip image with text
        image.clipWith(text)
      
    

Not convinced yet? Here are a few highlights:

• easy readable uncluttered syntax
• very small, about 7k gzipped
• animations on size, position, transformations, color, ...
• painless extension thanks to the modular structure
• various useful plugins available
• unified api between shape types with move, size, center, ...
• binding events to elements, including touch events
• full support for opacity masks and clipping paths
• element groups
• dynamic gradients
• fill patterns
• fully documented

Downloads