Best jQuery SVG Tutorial Plugins & Tutorials with Demo

    fabric.js : JavaScript Html5 Canvas Library

    fabric.js : JavaScript Html5 Canvas Library

    Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

    Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

    jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

    jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

    jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).

    JustGage : Animated Gauges in SVG & Raphaël library

    JustGage : Animated Gauges in SVG & Raphaël library

    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 independant and self-adjusting.

    Oh yes, since it’s pure SVG, it works in almost any browser – IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Seurat makes it extremely easy to alter what primitives are generated (how they look and where they appear) and how they animate.

    SeuratJS uses the HTML5 canvas to parse color data and, because of this, the library operates entirely on the client side.

    D3.js : Data-Driven Documents

    D3.js : Data-Driven Documents

    D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

    JavaScript Mindmap

    JavaScript Mindmap

    Requires jQuery for basic shortcuts ($) and stuff.Requires Raphael for drawing.jQuery UI may be used to allow draggable nodes.The basic principles of a force directed layout controlling nodes are as free as the birds in the trees.It’s relatively easy to build a mindmap. Take a collection of HTML nodes, and position them absolutely. Use a Force Directed Layout to link them together and yet keep them apart.
    Once you’ve got that, you need to add some filters, to define which nodes are properly connected. All nodes should repel, to prevent overlap, but connected nodes should have a string between them. This is where you use a springy force (hooke’s law) to pull them together.

    Drawing lines in HTML is not an easy feat. IE has/had VML, all browsers (except Android) support SVG (albeit slowly), and all except IE support Canvas. I tried using a diagonal line in a JPG, stretching it to fit. It looks daft. I then switched to Canvas, and now I’m on SVG (using Raphael to support IE VML too). So it works everywhere except Android.

    Custom HTML5 video player with jQuery and CSS3

    Custom HTML5 video player with jQuery and CSS3

    We want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch.

    All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

    jCS Media Library in jQuery

    jCS Media Library in jQuery

    Imagine for a moment you could create animated media, and without changing anything, it worked the same on IE7, Android, and even your iPad2. Let’s take the dream further and imagine that it does not use Flash, SilverLight, SVG, HTML5, or quirky CSS3 Animations. To start, we need a copy of the jQuery library. You should also add the jQuery easing library.

    JQVMap : jQuery Vector Maps

    JQVMap : jQuery Vector Maps

    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.

    This project is a heavily modified version of jVectorMap. I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications.

    Cubism.js : Time Series Visualization Chart

    Cubism.js : Time Series Visualization Chart

    Cubism.js is a plugin for D3.js, a JavaScript visualization library for HTML and SVG, to display time series in real-time. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources. It requests the data incrementally by polling only the most recent values and reduces the load on the server. Charts are rendered incrementally as well by shifting charts one pixel each time to the left.