The company I work for specializes in selling micro computers that are capable of managing and monitoring various IO devices. Utilizing ajax for the web IO functions, I recently designed a new graphic for a Voltmeter with 41 states ranging from 0 to 20 volts in increments of 0.5. My initial query is whether this would be considered a sprite due to the multitude of images?
The code I developed for loading the images turned out to be much shorter than the one used by the company because I devised a function to generate image links using a counter.
var i = 1;
function counter()
{
var img = "http://"address"/"+i.toString()+".png";
if (i == 40)
{
i=0;
}
i++;
document.getElementById('picture').src = img;
}
Now, the next task assigned to me was to achieve the same result using an svg.
I could replicate the process using an svg file, but I've come across information regarding animating svgs.
The primary question at hand is: Should I create an svg file containing all 41 images as code or should I opt for a single image and animate the needle by establishing a pivot point?
It's worth noting that the animation states will coincide with a JavaScript code that retrieves hex values via xmlHTTP to define the device's states. For instance, spinning the knob on the device to 3 volts should rotate the needle to reflect the change on the svg. I'm not seeking a complete solution, just some guidance on the feasibility of this approach and any resources I should consult.
Here is the image of the Voltmeter I referred to Voltmeter