Checkboxes with Raphael, svg or html inputs?

So I would like to use some customised checkboxes for my application. I'm not very experienced so I don't really know which way would be the best, but what I've done right now seems somewhat inefficient to me (mainly because I don't know how to copy this button around so each button would require the same amount of code). The button in this jsFiddle is just a simple example, the final might be a bit more elaborate but regardless the point comes through.

The questions are:

1) Which method is best for these type of buttons, Raphael SVG or PNG images with HTML inputs(?)?

2) If Raphael, what would be the best method of producing around 6 of these buttons with different click functions (possibly hover colours would be different too)? I know that creating multiple sets开发者_如何学Python which use same basic variables didn't work.

jsFiddle: http://jsfiddle.net/Wx6vh/2/