Trying to understand how SVG's use up Power Usage.

[Egg Bramhill]

Here is a link to three small svg files I've used on the linked page.

Each of the svg files are small, 72 ,52 and 51kb.

Now the animation is smooth and the 3 svg files have varying lengths (2.5, 3.0 and 2.7 secs) so that the animation is not a set length (Highest Common Multiple maths here?) but takes a long time to loop back to the start point.

When viewing the animation and looking at the Task Manager I get a Very High usage on the Power Usage column.

I can partly understand that there is a lot of CPU/GPU usage in what is a simple animation, but does anyone know how to reduce this? Not a biggy, just a general question.

LINK

[Acorn]

Egg, it's down to the large computation approach that has been used.

The only optimisations I can think of would be a dedicated engine like Greensock or Snap.svg with velocity.js, removing the top three animations, considering having a static coloured ribbon and overlaying and animating the cream part instead, using SVGOMG to chop down the <paths> sizes.

To maximise your repeat time of three separate animation speed, you make all co-prime. Try 2.3s, 3.1s & 2.9s.
Better too to increase the timings.

Acorn

[behzad]

But would it harm the computer if it remains?

[Egg Bramhill]

@ Acorn: I realise that the svg uses much cpu time due to it's multiple morphing. Each flag morphs over 5 keyframes, so it's not just 4 shapes but the morphing inbetween as well.

Greensock or Snap.svg with velocity.js

That's all new to me, I'll look this up

removing the top three animations

They are only there as an example of how I overlay the 3 svg's creating a multi-timing animation rather than a single looping animation.

using SVGOMG to chop down the <paths> sizes.

Indeed I regularly do this, it's an excellent resource, but not on my example above. I'll attach one that has been SVGOMGed.

To maximise your repeat time of three separate animation speed, you make all co-prime. Try 2.3s, 3.1s & 2.9s.
Better too to increase the timings.

Thanks for this tip. I merely changed the timing randomly to ensure a non linear animation. Perhaps I'm getting to long in the tooth to study this further, but I'll give it a bash.

I've no commercial use for this animation, just testing the overheads of using svg morphing.

@ Behzad:

But would it harm the computer if it remains?

I very much doubt it. Our computers are in the main totally underused compared to their capacity.

I remember signing up for SETI (Search for Extra Teresstial Intelengence ?) at one time and was amazed how that continually used 100% of my PC's CPU all the time.

[Egg Bramhill]

Here's the reduced version using just the 3 overlaid svg's cut down using SVGOMG. It does reduce the Power Usage from Very High to High.

LINK

[handrawn]

fwiw that still takes about 15% GPU very high in firefox, but only 2/3% GPU moderate in chrome and edge on my system

[pauland]

SVG is a vector format that uses CPU power to render an image. This allows a compact form of image description that can be rendered at any scale. For example describing a square involves four co-ordinates and the CPU has to draw the lines to form the image of the square.

With bitmaps all of the rendering is more a matter of copying data and sometimes scaling. It's less CPU intensive than the vector but at the cost of extra storage and optimised for a specific image size.

Your waving flags is redrawing on every frame.

In my Flash days we favoured Vector, except when mobiles were involved because of the reduced CPU load for mobile targets.

So compact vector formats push up CPU usage, larger bitmap formats have reduced CPU usage.

[handrawn]

on my computer it is using gpu as much if not more than cpu, which i would expect with the gtx 1700 - in firefox a lot more 15% gpu 2/3% cpu - in chrome and edge 2/3% gpu/cpu both, which says something about firefox probably...

and as egg has gtx 1660 thats not so far off in spec

nicely put paul

[Egg Bramhill]

Interesting. Here's my figures

FireFox CPU=12% GPU=21%
Chrome CPU=4% GPU=12%
Edge CPU= 5% GPU=15%

It would be interesting to see the results on a in-built GPU.

[pauland]

I doubt I'll be changing my choice of browser on the basis of power consumption.

Been a good thread to dispel the idea that SVG is always the best choice (though it often will be).

If I was making the flag animation for a game I would be using an animated bitmap sequence.

It might be interesting comparing the SVG to an animated gif.

What we are seeing is the performance comparison between rendering in real-time and pre-rendered images/image sequences, the trading of computing power for image size and versatility.