Can I render animated SVG to Canvas?

Question

I want to create an SVG animation, yet render it to Canvas. I know about CanVG, but I'm not certain it does what I need: Displaying SVG elements animated using javascript within a Canvas div, rather than a 'native' SVG window. When I look at CanVG example code, it seems to point to an SVG file, rather than utilizing SVG code that is part of the same file, & being manipulated in realtime by javascript. Any help?

Answer 1

I faced this issue me too some time ago and tried every possibilities mentioned above, unfortunately without results. After some research I found a method to inject SVG into Canvas, with a little pain and extra work it's possible. So the solution is to define svg elements then push it to an array then render that SVG as an image.

Here is a short code snippet:

SVG part:

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
                "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
             "</div>" +
            "</foreignObject>" +
    "</svg>";
characters.push(data);

and JS part:

var letters = [...] // a pool of characters 
var images = new Array(letters.length);

for (var i=0; i< letters.length; i++) {
    var textPosition = WIDTH/2 - (letters.length * CHAR_DISTANCE)/2;
    var txt = new Text(letters[i], textPosition + (i*CHAR_DISTANCE), HEIGHT/2,
    (Math.random() * 3) + 5 , (-Math.random() * 10) + 5);
    images[i] = new Image();
    images[i].src = characters[i];
    textArray.push(txt);
}

You may check the whole source code here: https://esimov.com/experiments/javascript/404/

Answer 2

There are several libraries (like CanVG) that merely turn SVG into Canvas drawing commands. They won't help you much with animation.

For animation you're going to have to do it on your own. You could attempt to use CanVG to draw the SVG onto the canvas as it is being animated, using a timer to update the canvas, but this is supremely messy and cannot be done unless the browser also supports SVG (and if it does, why would you want to do it?)

If you want to manipulate the SVG in real time you're going to have to stick with SVG proper. Otherwise you need to roll all your own state and interactivity on the canvas. No shortcuts there[1], sorry.

[1] Well, there are a few libraries for canvas object interaction that allow you to use SVG objects as their objects, such as fabric.js. But depending on what you want this may be nowhere near enough.