Best jQuery SVG Tutorial Plugins & Tutorials with Demo

    Interact.js : Javascript drag and drop, resizing and gestures Library

    December 29, 2013 | Core Java Script, Drag & Drop, SVG Tutorial
    Interact.js : Javascript drag and drop, resizing and gestures Library

    Interact.js is a powerful, flexible, snappable drag and drop, resizing and multi-touch gestures for modern browsers (and also IE8+) javascript library.

    Features:

    • snapping to a grid, custom anchors or paths.
    • cross browser and device, supporting {Chrome,Firefox,Opera}’ ‘{mobile,desktop}’, ‘ and Internet Explorer 8+
    • interaction with SVG elements
    • being standalone (not yet another jQuery plugin)
    • introducing 0 additional DOM elements
    • having(a). fluent ().interface
    • not modifying anything it doesn’t own (except to support IE8 and to change the cursor (but you can disable that))

    Demos : Demo 1 Demo 2 Demo 3 Demo 4

    Read More Demo

    Custom Interactive Map : jQuery Plugin

    December 4, 2013 | Maps, Plugins, Premium, SVG Tutorial
    Custom Interactive Map : jQuery Plugin

    If you would like to turn your photo/vector graphic map into a fancy interactive map application that is supported by every major browser and it’s working even on mobile or other touch devices, you can stop seeking, you’ve come to the right place. In fact, you came to the only place, since it is the only utility available with this unique feature set.The supported map file formats are: JPG, PNG and SVG.

    Features:

    • Unlimited landmarks: Any number of locations with unique pins and various actions
    • Unlimited floors: Multiple floors are supported without any limitation
    • Deeplinking: Every location can be referenced by it’s own URL
    • Browser support: Works great in every major browser, even Internet Explorer 8
    • Responsive design: Provides optimal experience across a wide range of devices
    • Touch optimized: Touchscreen devices, like tablets and smartphones are also supported
    • Well documented: A detailed user guide is included
    Read More Demo

    Panelize : A jquery plugin that Navigates an Image

    November 11, 2013 | Image Effects, Plugins, Slider, SVG Tutorial
    Panelize : A jquery plugin that Navigates an Image

    A jquery plugin that navigates an image by using an HTML image map.jQuery Panelize is a plugin built largely to assist in navigating web comics, although it can additionally be used for presentations, interactive maps, and SVG.

    Read More Demo

    Animated SVG Icons with Snap.svg

    November 9, 2013 | Animation, SVG Tutorial
    Animated SVG Icons with Snap.svg

    Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

     

    Read More Demo

    xCharts : D3-based library for building custom Charts and Graphs

    October 25, 2013 | Chart & Graph, Core Java Script, SVG Tutorial
    xCharts : 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.

    Read More Demo

    SVG.js : A lightweight library for manipulating and animating SVG

    October 24, 2013 | Animation, SVG Tutorial
    SVG.js : A lightweight library for manipulating and animating SVG

    A lightweight library for manipulating and animating SVG.Svg.js has no dependencies and aims to be as small as possible.With svg.js you have all the power of vector graphics at pocket size.

    Read More Demo

    Animated Checkboxes and Radio Buttons with SVG

    October 17, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Forms, SVG Tutorial
    Animated Checkboxes and Radio Buttons with SVG

    By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.

    Read More Demo

    jQuery.Feyn : Drawing Feynman Diagrams with SVG

    September 15, 2013 | Plugins, SVG Tutorial
    jQuery.Feyn : Drawing Feynman Diagrams with SVG

    jQuery.Feyn is a jQuery plugin to facilitate your drawing Feynman diagrams with Scalable Vector Graphics (SVG). The following list gives a quick overview of the most prominent features:

    • Automatic generation of clean SVG source code
    • Easy to use, easy to make fine adjustments
    • Predefined propagator styles, vertex types, and symbols
    • Support for typesetting labels and including external graphics
    • Lightweight, cross-browser, and fully documented
    Read More Demo

    three.js : JavaScript 3D library

    August 10, 2013 | Core Java Script, SVG Tutorial
    three.js : JavaScript 3D library

    The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

    Read More Demo

    Two.js : Two-dimensional Drawing API

    July 16, 2013 | Animation, Core Java Script, SVG Tutorial
    Two.js : Two-dimensional Drawing API

    A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

    Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library.At its core two.js relies on a scenegraph. This means that when you draw or create an object (a Two.Polygon or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, translation, scale, etc..

    Read More Demo