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

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

[Egg Bramhill]

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.

[handrawn]

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

[Egg Bramhill]

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

[pauland]

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

The flags animation is very effective.

[handrawn]

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

[siran]

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.

[Acorn]

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

CSS - Flags.xar - 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>

[Egg Bramhill]

Okay, this is turning into an informative thread

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

[handrawn]

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

that... is a black bottom

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