SVG Libraries

At CDNify we have a few developers who like working on personal projects and building their own custom libraries. Being time consuming and sometimes a pain to build, they often relent and work with pre-built libraries. Why? Because it’s so much easier to pickup an existing library then it is to build one.

No matter what type of library you’re working with: CSS, JavaScript, or PHP, it’s much simpler to ‘pick up and play’ existing libraries, not just for ease of use, but for the depth and sheer quantity of open source libraries on the market.

Looking for a handful of SVG libraries? Then checkout our top pick below.

SVG.JS

SVG.JS is a lightweight library for manipulating and animating SVG files, so light that the entire library is around 9k gzipped, making it one of the most robust and smallest libraries around.

How does it work? See for yourself, have the library in your source files and use the code below which utilises SVG.JS to produce graphical text, alternatively checkout their test page: svgjs.com/test.

// 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').move(300, 0)
text.font({
family: 'Source Sans Pro'
, size: 180
, anchor: 'middle'
, leading: '1em'
})
// clip image with text
image.clipWith(text)

Bonsai

Bonsai is a JavaScript graphics library that has an amazing API and SVG renderer. Create and manipulate graphics in a cool and fun way with it’s extensive library and easy to follow documentation.

Key features include:

• Assets (Audio, Video, Images, Fonts, SubMovies)
• Path morphing
• Keyframe and time based animations to build fun things like a colourful rainbow
• Separated runner and renderer

Checkout Bonsai or just play about with their online editor: Orbit

Snap.svg

Snap.svg is an open source JavaScript library built on the popular Raphaël, the de facto standard for working with vector graphics. Sleek and intuitive, Snap is designed to work with modern browsers: IE9+, Chrome, Firefox, Safari and Opera, making it an asset when creating browser friendly graphics that look great on any size screen.

Snap offers:

• Full gradients
• Clipping
• Patterns
• Masking
• Groups

Get started with Snap by learning how to use it’s library, finding cool tools in it’s docs, or just playing about with some demos.

D3.js

D3.js is a JavaScript library for dynamically creating SVG elements, then manipulating those elements based on data. The library is great for building interactive line graphs and charts that are free from resolution constraints, for example checkout the Voronoi diagram.

Easily pickup and start using the library with the following code:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Find examples of some of the amazing things you can do with the library at D3.js’ gallery, fork them on GitHub, and dive into their documentation for an in depth look.