vectron by RoomandBoard

jQuery plugin to load external SVG files into Raphael JS through declarative markup.

Examples

Rendering assets/hippo.svg and assets/zebra.svg through RaphaelJS

Rendering assets/zebra.svg through RaphaelJS and scaling by 0.5

Rendering assets/zebra.svg through RaphaelJS and scaling by 2

HTML

	<div class="svg" data-svg="path_to_file.svg">

JavaScript

	$(document).ready(function(){
	    $('.svg').vectron();
	});

Scale SVG

	$(document).ready(function(){
	    $('.svg').vectron({ scale: 1.25 });
	});

Grab the RaphaelJS paper

	var paper = $(...).data('vectron').paper;

This simple jQuery plugin uses ajax to retrieve the SVG, parse with rappar.js and render the results through RaphaelJS.

RaphaelJS does to VML and SVG what jQuery did to the DOM -- it provides a clean API to work with for vector graphics.
RaphaelJS itself doesn't parse SVG, so RaphaelJS Dmitry Baranovskiy (creator of RaphaelJS) created rappar.js
rappar.js doesn't work in the browser, this does.

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/RoomandBoard/vectron

Marc Grabanski