SVG.js - A Lightweight JavaScript Library For Manipulating & Animating SVG

SVG.js is a lightweight JavaScript library which allows you to easily manipulate and animate SVG. SVG.js comes with a whole plethora of methods such as create, move, center, clone and more.

There are also lots of animation methods such as animate move, size, rotate, skew, easing, etc. You can check out the test suite for a demo on all the animations.

The library itself is very small, 5KB gzipped, with support for extensibility and plugins.

Browser Compatibility

• 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+

Requirements: None
Demo: http://svgjs.com/test/
License: MIT License

Lazy Line Painter - A jQuery Plugin For SVG Path Animation

Lazy Line Painter is a jQuery plugin which allows you to do SVG path animation. It works by converting your SVG line graphic to JavaScript code, then you import jQuery, Raphaël and the Lazy Line Painter jQuery plugin and voila – done.

The Lazy Line Painter plugin allows you to perform path animations.  This means that if you’ve got an image, which consists of lines only (with a start & end, with no fills), then this plugin will allow you to perform an animation which will trace the line to draw the picture – as an animation.

Requirements: jQuery, Raphaël
Demo: http://lazylinepainter.info/
License: WTFPL

Game Icons - 950+ Free SVG & PNG Icons Easily Customizable For Games Or Apps

Game Icons is a massive icon pack containing a mighty 950+ icons which can be used for games or applications.  The icons are categorized in various categories such as Animal, Weapon, Fire , Food, Action, Liquid, Symbol, Skull, Plant, Body, Heart, Tool, Arrow, Sea, Stone, Eye, Machine, Sword, Face, Chemical and more.

Dozens of new icons are added weekly and if you need a specific icon, you can even send a request by email. The icons are available in SVG and PNG formats, which can all be downloaded at once from the website.

Requirements: None
Demo:  http://game-icons.net/
License: CC 3.0 License

xCharts - A D3-Based Library For Building Custom Charts And Graphs

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

xCharts uses its input data to instruct it on how the dataset should be drawn. By providing the following data, an xChart will be instructed to draw an ordinal bar chart with a linear scale, containing two ordinal ticks on the x-axis for "Pepperoni" and "Cheese". There will also be a secondary dotted-line component overlaid on top of the bars.

Requirements: D3.js
Demo: http://tenxer.github.com/xcharts/examples/
License: MIT License

dc.js - A Dimensional Charting JavaScript Library

dc.js is a JavaScript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo).  It leverages d3 engine to render charts in CSS friendly SVG format.

Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction.  The main objective of this project is to provide an easy yet powerful JavaScript library which can be utilized to perform data visualization and analysis in browser as well as on mobile device.  It can also be used as a Node.js module.

Requirements: d3.js, crossfilter.js
Demo: http://nickqizhu.github.com/dc.js/
License: Apache License v2.0

Batch - An Icon Set Of 300 Icons For Web And User Interface Design

Batch is a lovingly designed and crafted suite of 300 icons for web and user interface design.  Each icon is a single Photoshop shape layer, meaning they can be scaled up—and down—without loss of quality. Adding layer styles and blend modes is also a breeze.

The download includes the Batch PSD, SVGs (128x128) and PNGs (16x16, 32x32, 64x64).

Requirements: None
Demo: http://adamwhitcroft.com/batch/
License: Custom License, Free

Jim Knopf - A Small JavaScript Library To Create Knobs Using SVG

Jim Knopf is a small JavaScript library to create knobs using SVG..  Knobs can changed by moving mouse, keyboard (← ↑ → ↓ ),  mousewheel and  touchpad. Navigate trough knobs by tab key.

Supported Browser

Tested in latest Chrome, Firefox, Opera, Safari and Mobile Safari.

Requirements: None
Demo: http://eskimoblood.github.com/jim-knopf/
License: MIT License

Cedvel - An Online Tool For Designing Grid Systems

Cedvel is an application for designing grid systems.  Cedvel aims to ease the grid design process and help you explore more alternatives.  Rectangles are building blocks of grids in Cedvel. Use the rectangle tool draw an arbitrary rectangle on the canvas and then modify its exact dimensions and margins from the properties panel.  Once you are satisfied with the size and position of your container rectangle, divide it into rows and columns and set gutter widths and heights.

Margins define width, height and position of a rectangle within a page. Modifying the width of a rectangle simultaneously affects it's right margin value. Modifying the left margin of a rectangle will affect it's width also changing it's position in the page.  Rows, columns and gutters are automatically updated when the width or height of a rectangle changes.

Rectangle lock control panel enables you to lock width, height or margin values.  When the top margin of a rectangle is increased, the height of the rectangle decreases.  With the height of the rectangle locked, changing the top margin does not affect it's height but moves the rectangle down.

Ratios between values can be controlled from the ratio input field either with entering a specific ratio or selecting a preset ratio from the drop-down menu.  The golden ratio and root rectangle ratios are available in the drop-down menu.  The flow-switch controls which value will be affected from the change in ratio.

Each row or column can be individually selected from the layers panel and can be divided into more rows and columns.  Recursively these new rows and columns can also be selected and divided enabling lots of possibilities.

Circles and lines are formed of two points in Cedvel. A circle’s center is its first point and it's second point marks the length and angle of the radius.  Lines are also formed of two points and an angle defining the slope.
Rectangles can have baseline, image and rectangle grids.  Once activated, each of these grids can be individually customized with their own line styles, values and colors.

Grids can be exported as PNG files ideal for screen use or SVG files for printing.  SVG files can be opened with Vector based applications such as Adobe Illustrator.

Requirements: None
Demo: http://cedvel.com/
License: Free

Sosa - A Free Icon Font Which Includes The 120+ Useful Icons

Sosa is a stunning icon font which includes the 120+ most useful icons. The download includes the .ttf .eot .svg & .woff files need to use this icon font via @font-face.  Icon categories include: web; devices; media; media controls; tools; stationery; social; e-commerce; forms, OS / CMS; weather; graphs; vehicles.

Requirements: None
Demo: http://www.tenbytwenty.com/sosa.php
License: Creative Commons 3.0

BonsaiJS - A Lightweight Graphics Library With An Intuitive Graphics API And An SVG Renderer

BonsaiJS is lightweight graphics library with an intuitive graphics API and an SVG renderer.  Bonsai's main features include:

• Architecturally separated runner and renderer
• iFrame, Worker and Node running contexts
• Paths
• Assets (Videos, Images, Fonts, SubMovies)
• Keyframe and time based animations (easing functions too)
• Path morphing
• and much more...

Requirements: None
Demo: http://bonsaijs.org/
License:  MIT License

justGage - A Handy JavaScript Library For Generating & Animating Nice & Clean Gauges

JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.  Oh yes, since it’s pure SVG, it works in almost any browser - IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

Requirements:  Raphaël.js
Demo: http://www.justgage.com/
License:  MIT License

Social Web Icons - 25 Gorgeous SVG Icons With PNG Fallbacks

Social Web Icons is a set of 25 gorgeous SVG Icons with PNG fallbacks.  Each icon is designed to be used as the background of an anchor, and each icon has its own class as well as a couple of global classes. They are all set to be inline, so you can put them up against each other, in line with your text, or in any kind of layout or construct.

When you consider how common ultra-high resolution screens have become and couple that with the ubiquity of low-bandwidth mobile connections it becomes clear that we need to start really exploring and using alternate image methods. Since they are defined by vector shapes and colors rather than bitmaps, SVG files can be much smaller than a comparable PNG or JPG while also supporting any arbitrary size. The designers of the icon set did a great job putting together a series of refined, vibrant icons that rely on modern browser support for SVG (with small PNG fallbacks).

SVG images are still somewhat poorly understood and underutilised — the hope is that playground pieces like this will start to really illustrate their value and lead to greater understanding and adoption (starting with our own understanding).


Requirements: SVG
Demo: http://www.zurb.com/playground/social-webicons
License: CC Attribution 3.0 License

JQVMap - A jQuery Plugin That Renders Vector Maps Using SVG

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

Requirements: jQuery
Demo: http://jqvmap.com/
License: MIT License

Rickshaw - A JavaScript Toolkit For Creating Interactive Time Series Graphs

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.  Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together.  It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.  

Requirements: d3.js
Demo: http://code.shutterstock.com/rickshaw/examples/extensions.html
License: MIT License

D3 - A JAVASCRIPT LIBRARY FOR MANIPULATING HTML DOCUMENTS BASED ON DATA

D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages. You can use D3 as a visualization framework (like Protovis), or you can use it to build dynamic pages (like jQuery).

Requirements: Node.Js, NPM
Demo: https://github.com/mbostock/d3/tree/master/examples
License: Custom License, see: http://goo.gl/ZoigO