9 Amazing jQuery SVG Plugins

SVG is not new, but it is new to most browsers. SVG is a powerful means of creating vector drawings in the browser. Vector drawings can be scaled to any size without losing any quality. They also have a very small XML format. That makes SVG perfect for creating data visualizations for the Web. Here are jQuery plugins for manipulating and animating svg.

SVG Avatars Generator

The Avatars Generator is based on SVG (Scalable Vector Graphic), which is supported by all modern browsers and does not depend on screen resolutions. As a result your visitors can download their avatars as SVG file or as PNG one (2 size options) which is converted from vector graphic parts. The integration of the SVG Avatars creator is quite simple too.

svgavatar-6

jQuery Mapael

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

jquery-mapael

Lazy Line Painter

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.

lazy-line-painter-2

SVGMagic

SVGMagic is a cross-browser compatible jQuery plugin that searches for SVG images on your site and automatically creates PNG versions if the browser doesn’t support SVG. It’s a simple, single-purpose plugin that requires no configuration.

svgmagic-4

jQuery SVG

jQuery SVG Plugin allows you to easily drive the SVG canvas from your JavaScript code. The main jQuery SVG package provides the basic SVG functionality including drawing primitives (rectangles, ellipses, lines, etc.), structural elements (definitions, groups, etc.), and supporting objects (paths and text). In addition to the core package, extension packages are also available for animation, graphs and plotting.

jquerysvg-5

jqvmap

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.

jvmap-7

Arbor.j

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

arborjs-8

Two.js

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

svg-jq-1

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.