Best jQuery SVG Tutorial Plugins & Tutorials with Demo

    LivIcons : 303 Truly Animated Vector Icons with jQuery

    LivIcons : 303 Truly Animated Vector Icons with jQuery

    So what is LivIcons? They are a cross browser vector icons, built with JavaScript, with individual mini animation for every icon. They based on SVG (scalable vector graphic) in modern browsers and VML (vector markup language) in IE6 – IE8 for clean and perfect look at any devices (Yes. Retina too).

    Features:

    • 303 live icons – one script.
    • New step in interactivity and brand New – such animation methods for interface elements were never created before.
    • Animated and can be static of course
    • Any color, any size
    • Retina perfect
    • 16 pixel perfect
    • Flexible settings of behaviour and appearence
    • Bootstrap compatible
    • Easy integration – just one string of code for an icon.
    • IE6+ support
    • All browsers

    Metro Style Side Menu with jQuery

    Metro Style Side Menu with jQuery

    Metro Style Side Menu with jQuery.

    Features:

    • Crossbrowser
    • Simple/Clean
    • Metro Style
    • 900+ SVG Icons
    • Hight Resolution (100% vector)
    • Valid HTML5

    Interactive Infographic with SVG and CSS Animations

    Interactive Infographic with SVG and CSS Animations

    Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.One of the less talked about features of newer browsers is increasing support for the SVG file format. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics. Unlike raster image formats like PNG, JPG or GIF, the vector graphics contained within SVG files are completely scalable to any size and will display at any resolution or screen density without quality loss. In many cases, SVG files will also be much smaller in filesize and download quicker.

    With the right techniques and modern browser support, developers can now produce some pretty impressive animations, effects and interactions using SVG. Today we will explore the possibilities of SVG and test the capabilities of modern browsers by creating an interactive vector infographic for the web.

    Rickshaw.Graph : JavaScript toolkit for real-time Graphs

    Rickshaw.Graph : JavaScript toolkit for real-time Graphs

    JavaScript toolkit for creating interactive real-time 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.

    A few extensions require jQuery, but here all we need is d3 and the Rickshaw library itself. Instantiate a graph, and then render it. For more along this path, check out the tutorial and also see our examples listing.

    spoiler-alert : jQuery plugin to hide spoilers on your site

    spoiler-alert : jQuery plugin to hide spoilers on your site

    Don’t spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click.

    Do you publish spoilers? Do you wish you could have them on your page in a way that wasn’t fucking rude? With Spoiler Alert! you can! Hide spoilers with a bit of blur.

    Lazy Line Painter : jQuery plugin for SVG path animation

    Lazy Line Painter : jQuery plugin for SVG path animation

    A Jquery plugin for path animation using the Raphaël Library. Implementing this plugin is broken into two parts.Preparing your web-friendly data & Configuring lazy-line-painter.js

    Vague.js : jQuery Blur any kind of Html Element

    Vague.js : jQuery Blur any kind of Html Element

    Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:

    • Firefox 10 +
    • Chrome 18 +
    • Safari 6.0 +
    • IE 7 +

    Jim Knopf : JavaScript library for creating SVG-powered knobs

    Jim Knopf : JavaScript library for creating SVG-powered knobs

    Jim Knopf is a JavaScript library for creating SVG-powered knobs. The library doesn’t require any JS frameworks and it comes with various built-in knob types. Knobs created can be scaled completely (thanks to SVG) and their designs can be customized with CSS. Also, they can be controlled with mouse, mousewheel, keyboard or touchpad and options exist for setting the min/max values, starting points and the angles allowed.

    Method-Draw : A web based SVG editor

    Method-Draw : A web based SVG editor

    Method Draw is a fork of SVG Edit, a web based SVG editor.The purpose of Method Draw is to improve the usability and user experience of SVG Edit. It removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience.

    jsDraw2DX : SVG Graphics Library for JavaScript Html5

    jsDraw2DX : SVG Graphics Library for JavaScript Html5

    jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers). Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.