This shows how to fill a shape with an image using Raphaël, but with a hack to make the image scale to the size of the shape. This is natively supported in svg, so it's only a matter of tweaking the attributes. Note that the below works only for the svg backend, no provisions have been made for the VML backend (aka IE8 and below).

Modified version of Raphaël available here, the hack basically is this:

...
case "fillfit":
var isURL = Str(value).match(R._ISURL);
if (isURL) {
	el = $("pattern");
	var ig = $("image");
	el.id = R.createUUID();
	$(el, {x: 0, y: 0, height: 1, width: 1, "patternContentUnits": "objectBoundingBox"});
	$(ig, {x: 0, y: 0, width: 1, height: 1, "preserveAspectRatio": "none", "xlink:href": isURL[1]});
	el.appendChild(ig);

	o.paper.defs.appendChild(el);
	$(node, {fill: "url(#" + el.id + ")"});
	o.pattern = el;
}
break;
...