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

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

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

But would it harm the computer if it remains?

@ 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.

Quote:

---

Greensock or Snap.svg with velocity.js

---

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

Quote:

---

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.

Quote:

---

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.

Quote:

---

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:

Quote:

---

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.

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

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

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.

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 ;)

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.

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.

I agree with that Paul. The only problem is you can't morph between images and as you stated earlier bitmaps aren't scaleable without image loss.
I'll see if I can create an animated gif. My software hasn't got this option but I can do it in Xara.
I'll also do it without the morphing.

with the right software you can do all the morphing etc in vector and then composite out in non-vector format; subject to resolution you would be hard pressed to tell the difference

but if the final animation has a wide range of playback sizes then that can be an issue obviously

more important things to worry about in a browser, yes; firefox is a resource heavy beast, for a start the way it sandboxes tabs as I recall

Here's a screen gab MP4. it's 10 seconds long & 2Mb in size.

The trick is to loop very short sequences and you can get by with low frame rates too.

The flags animation is very effective.

speed it up a bit and set to ragtime.. I love a foxtrot... :D

That was very interesting, and just the case you are interested in this information:
My CPU is much more up to date than my GPU.
For your first link (containig 4 rows of flags) my CPU, GPU and power usage (according to the task manager) in Firfox was:
- in an akitve TAB about 1.9% CPU (1.8 to 2.0) and 13.6% GPU (13.4 to 13.8) and power consumption medium to high
- in an inactive TAB 0.1% CPU (0.0 to 0.2) and 0.2% GPU (0.0 to 0.4) and power consumption very low
when hardware acceleration was enabled.

And:
- in an akitve TAB about 1% CPU (0.9 to 1.1) and 0% GPU and power consumption low to medium
- in aninactive TAB 0% CPU (rarely at 0.1%) and 0% GPU and power consumption very low
when hardware acceleration was disabled.
In both cases (hardware acceleration on or off) the animation was absolutely smooth.

I had a go at converting some SVG traingle shapes to CSS clip-path.

Currently clip-path: path() is not implemented on all browsers and I had to revert to using changing the SVGs themselves to holding the clip-path.
This works but you lose the morphing aspect that clip-path: path() would allow.

The way to fix this is to use more frames in the keyframes definition.

Please do not compare Egg's fine flags to mine.
I was only doing this to test for CPU /GPU consumption.

What is interesting on my PC, Egg's flags GPU use is 3.3MB @30fps.
My test is almost double both values: (6.6MB @59.4fps).
I had 25 flags (Egg 16) but only three frames (Egg 5) and two speeds (Egg 3), which were twice as fast as Egg's.

Average CPU usage for the browser is a lowly 0.27%.

Attachment 129687 - each Placeholder (flag) has a Name of htmlclass="svg-triangle" or "svg-trianglealt".
The CSS animation for each classname does the rest.

Acorn

---

HTML code (head):

<svg width="0" height="0">
<defs>
<clipPath id="tri01">
<path d="M 0 0.393 L 160.173 0 L 72.806 225.108 L 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>


<svg width="0" height="0">
<defs>
<clipPath id="tri02">
<path d="M 0 0.393 L 160.13 0 C 150.974 -1.056 113.946 234.842 140.948 237.958 C 134.651 272.306 -9.671 53.145 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>


<svg width="0" height="0">
<defs>
<clipPath id="tri03">
<path d="M 0 0.393 L 160.13 0 C 150.974 -1.056 123.053 70.33 47.51 197.285 C 31.208 28.818 -11.188 50.112 0 0.393 Z"></path>
</clipPath>
</defs>
</svg>




<style>
.svg-triangle {
animation: wave 2.3s ease-in-out infinite;
clip-path: url(#tri01);
}


@keyframes wave {
0% { clip-path: url(#tri01); }
50% { clip-path: url(#tri02); }
75% { clip-path: url(#tri01); }
100% { clip-path: url(#tri03); }
}


.svg-trianglealt {
animation: wavealt 1.9s ease-out infinite;
animation-delay: 0.3s;
clip-path: url(#tri02);
}


@keyframes wavealt {
0% { clip-path: url(#tri03); }
25% { clip-path: url(#tri01); }
50% { clip-path: url(#tri02); }
100% { clip-path: url(#tri01); }
}
</style>

Okay, this is turning into an informative thread :D

Just for HD I've set it to as fast a ragtime as I can. Link below.

Strangely this doesn't seem to greatly increase the CPU GPU usage. EDIT: The speed-up doesn't change the cpu/gpu usage a great deal. Changing the view to' Scale to Fit' does increase cpu/gpu usage but this would be expected.

@ Paul: Yes I can see your point. I'm not into videos in any big way so I wouldn't know how to set up a looping MP4. I'd also need to work out the total length of the 3 svg files to determine the length to have a smooth looping video. This is Gary's expertise.

@ Siran: Cheers. I don't know about hardware acceleration so I'll look that up.

@ Acorn: You're the master of CSS! As you know I'm a visual person and you're the coder. An interesting alternative.

LINK

Quote:

---

Just for HD I've set it to as fast a ragtime as I can

---

that... is a black bottom :eek:

[https://www.youtube.com/watch?v=i_iA57YoEoI

Egg,

Here's your animation as an MP4 that loops - it's about 30 secs for each loop to accommodate the added sound track. https://initiostar.co.uk/demo/flags/. I just did the same screen capture as you with output format as MP4, added the sound track thereafter. Autoplay with audio without muted does not work for most browsers, but you could build a starting sequence that has the visitor initiate autoplay.

You could covert animated SVGs to MP4s and you can combine the MP4s into a single MP4; synching it all would take some effort though.

Don't think practically you would have loop with audio, but it could be used as an intro that stops and remains in the background, or flies away to reveal something else.

Gary

Thanks for this Gary. What size is the MP4?

Quote:

---

Originally Posted by Egg Bramhill

What size is the MP4?

---

24.6 MB!

The original screen capture https://initiostar.co.uk/demo/Bunting.mp4 is 8.55 MB, 29.76 fps, duration 21 secs - you loop a 5 second sequence and reduce the size still further, but not sure adding a 5 sec audio track would make sense. Separating the video and audio is an option, but not really worth the hassle of trying to then sync them both.

The edited video with audio, HD H264 output is 24.5MB, 30 fps. However, if I change the output to WebM the file size can be reduced to 3.14 MB, I'd need to crop it to the desired height and width, but here's the full screen output https://initiostar.co.uk/demo/Flags.webm - some loss of quality though.

Lots of options, but it's more about the end objective.

3.14 MB is an impressive reduction in size. Interesting to know, thanks.