Testing the SVG load feature of the Snap SVG library. An SVG made with Inkscape or Adobe Illustrator can be easily imported, styled and animated.
In this example, a pair of gears is drawn with Inkscape. IDs are given to key elements of the drawing by using the source view, then the file is saved as SVG.
Snap is used to load the external SVG file into an SVG context defined inline in the HTML, then animated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snap SVG</title>
<script src="snap.svg-min.js"></script>
<style>
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var s = Snap('svg');
Snap.load('gears.svg', function (f) {
// extract the group of gears from the SVG, and append it into our context
var gears = f.select('#gears');
s.append(gears);
// translate and scale gears to fit bl.ocks.org's frame
gears.attr({transform: 'translate(200,60) scale(2)'});
// animate the gears
gears.select('#small_gear').animate({transform: 'rotate(-360,60,90)'}, 6000, mina.easeinout);
gears.select('#big_gear').animate({transform: 'rotate(180,180,100)'}, 6000, mina.easeinout);
});
</script>
</body>
</html><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="280"
height="200"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="gears.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview12"
showgrid="false"
inkscape:zoom="2.2571429"
inkscape:cx="179.18984"
inkscape:cy="79.728999"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="gears">
<path
inkscape:connector-curvature="0"
style="fill:#e3dbdb;stroke:none"
id="small_gear"
d="m 91.493,85.375 4.02,-0.59 2.357,0.229 6.65,3.01 0,3.952 -6.65,3.01 -2.357,0.229 -4.02,-0.59 -1.907,7.117 3.776,1.498 1.928,1.377 4.253,5.932 -1.976,3.422 -7.263,-0.718 -2.157,-0.98 -3.185,-2.521 -5.21,5.21 2.521,3.185 0.98,2.157 0.718,7.263 -3.422,1.976 -5.932,-4.253 -1.377,-1.928 -1.498,-3.776 -7.117,1.907 0.59,4.02 -0.229,2.357 -3.01,6.65 -3.952,0 -3.01,-6.65 -0.229,-2.357 0.59,-4.02 -7.117,-1.907 -1.498,3.776 -1.377,1.928 -5.932,4.253 -3.422,-1.976 0.718,-7.263 0.98,-2.157 2.521,-3.185 -5.21,-5.21 -3.185,2.521 -2.157,0.98 -7.263,0.718 -1.976,-3.422 4.253,-5.932 1.928,-1.377 3.776,-1.498 -1.907,-7.117 -4.02,0.59 -2.357,-0.229 -6.65,-3.01 0,-3.952 6.65,-3.01 2.357,-0.229 4.02,0.59 1.907,-7.117 -3.776,-1.498 -1.928,-1.377 -4.253,-5.932 1.976,-3.422 7.263,0.718 2.157,0.98 3.185,2.521 5.21,-5.21 -2.521,-3.185 -0.98,-2.157 -0.718,-7.263 3.422,-1.976 5.932,4.253 1.377,1.928 1.498,3.776 7.117,-1.907 -0.59,-4.02 0.229,-2.357 3.01,-6.65 3.952,0 3.01,6.65 0.229,2.357 -0.59,4.02 7.117,1.907 1.498,-3.776 1.377,-1.928 5.932,-4.253 3.422,1.976 -0.718,7.263 -0.98,2.157 -2.521,3.185 5.21,5.21 3.185,-2.521 2.157,-0.98 7.263,-0.718 1.976,3.422 -4.253,5.932 -1.928,1.377 -3.776,1.498 z" />
<path
inkscape:connector-curvature="0"
style="fill:#e3dbdb;stroke:none"
id="big_gear"
d="m 249.802,94.379 1.754,-0.141 4.675,0.766 6.498,2.719 0,4.554 -6.498,2.719 -4.675,0.766 -1.754,-0.141 -0.923,7.016 1.73,0.317 4.317,1.95 5.574,4.308 -1.179,4.4 -6.981,0.944 -4.714,-0.47 -1.657,-0.59 -2.708,6.537 1.589,0.755 3.666,3 4.268,5.604 -2.277,3.945 -6.987,-0.895 -4.432,-1.674 -1.448,-0.999 -4.308,5.614 1.34,1.14 2.764,3.847 2.673,6.518 -3.221,3.221 -6.518,-2.673 -3.847,-2.764 -1.14,-1.34 -5.614,4.308 0.999,1.448 1.674,4.432 0.895,6.987 -3.945,2.277 -5.604,-4.268 -3,-3.666 -0.755,-1.589 -6.537,2.708 0.59,1.657 0.47,4.714 -0.944,6.981 -4.4,1.179 -4.308,-5.574 -1.95,-4.317 -0.317,-1.73 -7.016,0.923 0.141,1.754 -0.766,4.675 -2.719,6.498 -4.554,0 -2.719,-6.498 -0.766,-4.675 0.141,-1.754 -7.016,-0.923 -0.317,1.73 -1.95,4.317 -4.308,5.574 -4.4,-1.179 -0.944,-6.981 0.47,-4.714 0.59,-1.657 -6.537,-2.708 -0.755,1.589 -3,3.666 -5.604,4.268 -3.945,-2.277 0.895,-6.987 1.674,-4.432 0.999,-1.448 -5.614,-4.308 -1.14,1.34 -3.847,2.764 -6.518,2.673 -3.221,-3.221 2.673,-6.518 2.764,-3.847 1.34,-1.14 -4.308,-5.614 -1.448,0.999 -4.432,1.674 -6.987,0.895 -2.277,-3.945 4.268,-5.604 3.666,-3 1.589,-0.755 -2.708,-6.537 -1.657,0.59 -4.714,0.47 -6.981,-0.944 -1.179,-4.4 5.574,-4.308 4.317,-1.95 1.73,-0.317 -0.923,-7.016 -1.754,0.141 -4.675,-0.766 -6.498,-2.719 0,-4.554 6.498,-2.719 4.675,-0.766 1.754,0.141 0.923,-7.016 -1.73,-0.317 -4.317,-1.95 -5.574,-4.308 1.179,-4.4 6.981,-0.944 4.714,0.47 1.657,0.59 2.708,-6.537 -1.589,-0.755 -3.666,-3 -4.268,-5.604 2.277,-3.945 6.987,0.895 4.432,1.674 1.448,0.999 4.308,-5.614 -1.34,-1.14 -2.764,-3.847 -2.673,-6.518 3.221,-3.221 6.518,2.673 3.847,2.764 1.14,1.34 5.614,-4.308 -0.999,-1.448 -1.674,-4.432 -0.895,-6.987 3.945,-2.277 5.604,4.268 3,3.666 0.755,1.589 6.537,-2.708 -0.59,-1.657 -0.47,-4.714 0.944,-6.981 4.4,-1.179 4.308,5.574 1.95,4.317 0.317,1.73 7.016,-0.923 -0.141,-1.754 0.766,-4.675 2.719,-6.498 4.554,0 2.719,6.498 0.766,4.675 -0.141,1.754 7.016,0.923 0.317,-1.73 1.95,-4.317 4.308,-5.574 4.4,1.179 0.944,6.981 -0.47,4.714 -0.59,1.657 6.537,2.708 0.755,-1.589 3,-3.666 5.604,-4.268 3.945,2.277 -0.895,6.987 -1.674,4.432 -0.999,1.448 5.614,4.308 1.14,-1.34 3.847,-2.764 6.518,-2.673 3.221,3.221 -2.673,6.518 -2.764,3.847 -1.34,1.14 4.308,5.614 1.448,-0.999 4.432,-1.674 6.987,-0.895 2.277,3.945 -4.268,5.604 -3.666,3 -1.589,0.755 2.708,6.537 1.657,-0.59 4.714,-0.47 6.981,0.944 1.179,4.4 -5.574,4.308 -4.317,1.95 -1.73,0.317 z" />
<path
d="m 66.428571,90.000001 a 6.4285715,6.4285715 0 0 1 -12.857143,0 6.4285715,6.4285715 0 1 1 12.857143,0 z"
id="path3053"
style="fill:#666666;fill-opacity:0.41489366;stroke:none"
inkscape:connector-curvature="0" />
<path
d="m 190,100 a 10,10 0 0 1 -20,0 10,10 0 1 1 20,0 z"
id="path3055"
style="fill:#666666;fill-opacity:0.41489366;stroke:none"
inkscape:connector-curvature="0" />
</g>
</svg>