SVG (Scalable Vector Graphics) is an image (vector) made of coordinates and written in XML (its content is plain text with coordinates). Each piece of the SVG image is an element in the XML structure, and that makes it possible to add animation and also events like click, mouseover, etc to a specific piece/element of the image.
A very simple SVG image could be like this:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onclick="alert('a circle')"/>
<path d="M150 0 L75 200 L225 200 Z" onclick="alert('a path element')"/>
<g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
</g>
</svg>
If you save that code and name the file with svg extension (“test.svg”) and open it with Firefox/Chrome, you’ll see an image, and if you click on the elements the alert will be shown. It’s also possible to dynamically change and add events to the elements using JavaScript. You can see a demo here: http://snapsvg.io/demos/#coffee
There are several softwares to visually create SVG (vector) images, e.g., Adobe Illustrator, Adobe Edge, Inkscape, SVGMagic, and usually they also convert png/jpg to SVG. Besides that, you can find many websites which provide free SVG images for download, and the one I like the most is Freepik ( http://www.freepik.com/free-photos-vectors/svg ).
Depending on the kind of image you are working with, I really think that it could work.
