I'm working on a Raphael project that draws vector graphics with repeating PNG fill elements. To minimise file requests and maintainence, I'm storing these PNGs as base 64 strings in the JS. IE8 needs to be supported, sadly.
On SVG, this works fine. In VML on IE8, it doesn't work, despite the fact that a) VML supports image fills and b) IE8 supports base 64 images.
Is there any way I can get my PNG data into my VML without needing to upload actual PNG files?
Here's an example of how the string that is passed to Raphael's .attr('fill'); is being defined:
"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeNpi/P//PwMMnDp1whRI8bMwoAIxIHZgPHnyOLKgBBD/BqkEawHiPUD8AiTDBNXijqwcIMAANW4Lseujok0AAAAASUVORK5CYII=)"
Same problem with single quotes inside the url():
"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADpJREFUeNpi/P//PwMMnDp1whRI8bMwoAIxIHZgPHnyOLKgBBD/BqkEawHiPUD8AiTDBNXijqwcIMAANW4Lseujok0AAAAASUVORK5CYII=')"
Debugging VML is always a nightmare, but using the trick here and hacking my way to the VML shape's outerHTML property, I can see that the above is being applied to the fill element's src property:
<rvml:fill class=rvml firebug-1432221487827="1566" rotate = "t" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEJJREFUeNpiPHnyOAMUZANxPRA/ZGFAAFkgFgVhkGAcEPMDMRsQ7wTiHyDBhVCVE4DYA8RgAuLXQPwNiF/CzAEIMABgqgriagn8AQAAAABJRU5ErkJggg==" type = "tile" position = "13861519f,3859415f"></rvml:fill>
