Problems with RasterImage and Animations

[manutiedra]

Hello,

I was tinkering with animations and I started using RasterImage with animation.SaveAsAnimatedSVG and it works fine. However, if I use animation.SaveAsAnimatedSVGWithFrames instead, it didn't show the raster images in the resulting animation.

When I use the animation.SaveAsAnimatedSVG I've got image tags like this:

<image x="0" y="0" width="1" height="1" preserveAspectRatio="none" image-rendering="optimizeQuality"
transform="matrix(30,0,0,30,105,105)" d2p1:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAIDx0lEQVR4Aey9WaxuyXUeVrX//9x7+07d9/bI5sxms9nNQRJFkdRsWaM1UmIAI0BeAgQISNuJLQsh4SSWXvNmIA9C8uoAeclLHJF+sDXAiKQkaoqy4bfkMQOSPAgwFQ9p3nNStcZvrar9n/+ce/tcBmdXV/93n71rV61ateYa9v7s7Kwcnb7zne/s9/uvfOUrv/3bv90u2p/Hv7ulLW1pS1t64qnW2sR4E8h//ud/fvfu3dPT02VZjnx3v43Hlra0pS1dz7QpgC1taUtbuqZpUwBb2tKWtnRN06YAtrSlLW3pmqZNAWxpS1va0jVNmwLY0pa2tKVrmjYFsKUtbWlL1zRtCmBLW9rSlq5p2hTAlra0pS1d07QpgC1taUtbuqZpUwBb2tKWtnRN06YAtrSlLW3pm

and keeps going...

but when using animation.SaveAsAnimatedSVGWithFrames I've got this only:

<image x="0" y="0" width="1" height="1" preserveAspectRatio="none" image-rendering="optimizeQuality"
transform="matrix(30,0,0,30,105,105)" d2p1:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOt" xmlns:d2p1="http://www.w3.org/1999/xlink" />

Also, when I was using only vectors, I've got a 7MB file (using animation.SaveAsAnimatedSVG). When I added a 100KB PNG file with RasterImage and the size of the resulting animation changed to 77 MB.

I really don't know anything about the SVG file format, but I could see that after each animate tag the font data and the images where repeated.

Can't the images be defined once in the defs tag and then use them with the use tag instead of using the image tag? Can something similar be done to the fonts? It will reduce the size by a lot.

[arklumpus]

Hi! Thank you for using VectSharp!

For the file size issue, you're correct that images and fonts don't get reused (even in static SVG images); I should be able to fix this.

For the problem with animation.SaveAsAnimatedSVGWithFrames, would you be able to share a (small) code example? I have tried creating an animation with a raster image, and it works fine for me (other than producing a huge file).

[manutiedra]

It will be great if you can reduce the file size.

A small sample worked fine here too. I will see if I can isolate something that is small and reproducible and upload it here.

Also, it is difficult to see in short animations, but if you have a lot of frames you can see that all the frames start to appear very fast and then the animation starts. I don't know if that is normal or it can be avoided somehow. You can check it opening VectSharp_Animation.svg with the browser several times and paying close attention to it.

[arklumpus]

I just pushed to NuGet VectSharp.SVG 1.10.1-a2, which has the fix for the file size issue (both raster images and fonts now get reused across frames).

Are you "manually" editing the raster image (e.g., by accessing the raw pixel data and changing those)? If so, can you try invoking image.ClearPNGCache() after you finish editing the image to see if it makes a difference?

For the other thing you describe (all frames quickly appearing at once before the animation starts), the problem is that the browser renders all frames before "starting" the animation (and hence, hiding frames that should be hidden). For small animations, this is quick enough that it doesn't matter, but for larger animations the delay is noticeable. In the new version I have also made a small change that should hopefully fix this/help, i.e. explicitly setting the starting visibility of each frame; please let me know if this improves the situation.

[manutiedra]

Giorgio, you are the man!

The resulting file size is now only 3.3MB from 77MB before!!! But not only that, the generation time has been reduced a lot, it can be 5 or 6 times faster and the memory consumption went down from 400MB to 86MB!!!

Also, the problem about the frames appearing before the animation starts seems to be gone. I will tell you if I see something as I plan to push the animations quite a bit.

And as a bonus, the RasterImage problem is fixed by this release too!. I was not changing the raw pixel data and I was using a clipping mask, but the problem also appeared without the clipping mask, so I don't know why, but as this fixes it too, so makes the update even more amazing.

Outstanding work. Thank you very much!

BTW, the animation system works great, but the only thing I see, is that to create complex animations is difficult if you want several objects to produce frames and transitions that can overlap and have different durations. The concept of scene, objects, layers, their timeline, keyframes, etc. and an engine that gathers those and produce the final animation would be the ideal thing, but probably that is outside of the scope of your project.

[arklumpus]

Great, glad that I managed to fix all the issues!

I see what you say about complex animations, but yeah, that would be at an abstraction level above VectSharp.