When Brave renders animated SVG elements, it consumes lots of CPU. Even quite small animated SVG’s do this as far as I can see. I tried in Opera too and it’s the same there, so I suspect it’s a Chromium issue. Should animated SVG elements use hardware acceleration, or is it all done in software?
I’m running on Brave Dev, Version 1.33.91 Chromium: 96.0.4664.45, and I have hardware acceleration enabled.
@jek6094,
Have you tested w/HWA disabled? Worth a shot. Can you give me an example website where you see the uptick in resource usage so I can test myself?
It’s roughly the same without hardware acceleration. The browser task manager shows some GPU activity when hardware acceleration is enabled, but not much.
Here is an example page to look at.
@jek6094,
Are you on macOS or Windows system? On my end, the site seems to be running within normal ranges, even while I have several additional tabs open and other GPU heavy processes (Hulu, Youtube) using macOS.
Windows, sorry, should have stated that earlier. Here is a screenshot of the browser task manager:
I only have two CPU cores btw, I guess that is why it’s quite noticeable.
I see the animations in that sample page cause high CPU on all chromium browser as well as Firefox and Safari. Looking in to the SVG it looks like controlling the animation is performed in Javascript. So that could be at least partly responsible for why it’s consuming the CPU and not GPU resources. That’s also why the SVGs need to be put in to an <object tag.
@petemill Thanks for a good explanation! This is the animated SVG that originally caught my attention. It’s a tiny animated “parcel figure”, but in this case it looks like the animation is done with SVG CSS transformations:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
<defs>
<clipPath id="__lottie_element_2"><rect width="800" height="800" x="0" y="0"></rect></clipPath>
<clipPath id="__lottie_element_4"><path d="M0,0 L50,0 L50,50 L0,50z"></path></clipPath>
</defs>
<g clip-path="url(#__lottie_element_2)">
<g clip-path="url(#__lottie_element_4)" transform="matrix(16,0,0,16,0,0)" opacity="1" style="display: block;">
<g transform="matrix(1,0,0,1,12.300000190734863,14.772000312805176)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,12.682000160217285,12.682999610900879)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M7.252999782562256,-12.432000160217285 C7.252999782562256,-12.432000160217285 1.7300000190734863,-12.432000160217285 1.7300000190734863,-12.432000160217285 C1.7289999723434448,-12.432000160217285 1.7280000448226929,-12.432999610900879 1.7269999980926514,-12.432999610900879 C1.7269999980926514,-12.432999610900879 -1.7259999513626099,-12.432999610900879 -1.7259999513626099,-12.432999610900879 C-1.7269999980926514,-12.432999610900879 -1.7280000448226929,-12.432000160217285 -1.7289999723434448,-12.432000160217285 C-1.7289999723434448,-12.432000160217285 -7.251999855041504,-12.432000160217285 -7.251999855041504,-12.432000160217285 C-10.107999801635742,-12.432000160217285 -12.432000160217285,-10.107999801635742 -12.432000160217285,-7.251999855041504 C-12.432000160217285,-7.251999855041504 -12.432000160217285,7.251999855041504 -12.432000160217285,7.251999855041504 C-12.432000160217285,10.107999801635742 -10.107999801635742,12.432999610900879 -7.251999855041504,12.432999610900879 C-7.251999855041504,12.432999610900879 7.252999782562256,12.432999610900879 7.252999782562256,12.432999610900879 C10.109000205993652,12.432999610900879 12.432000160217285,10.107999801635742 12.432000160217285,7.251999855041504 C12.432000160217285,7.251999855041504 12.432000160217285,-7.251999855041504 12.432000160217285,-7.251999855041504 C12.432000160217285,-10.107999801635742 10.109000205993652,-12.432000160217285 7.252999782562256,-12.432000160217285z M9.324999809265137,7.251999855041504 C9.324999809265137,8.397000312805176 8.395999908447266,9.324000358581543 7.252999782562256,9.324000358581543 C7.252999782562256,9.324000358581543 -7.251999855041504,9.324000358581543 -7.251999855041504,9.324000358581543 C-8.395000457763672,9.324000358581543 -9.322999954223633,8.397000312805176 -9.322999954223633,7.251999855041504 C-9.322999954223633,7.251999855041504 -9.322999954223633,-7.251999855041504 -9.322999954223633,-7.251999855041504 C-9.322999954223633,-8.395000457763672 -8.395000457763672,-9.324000358581543 -7.251999855041504,-9.324000358581543 C-7.251999855041504,-9.324000358581543 -2.5899999141693115,-9.324000358581543 -2.5899999141693115,-9.324000358581543 C-2.5899999141693115,-9.324000358581543 -2.5899999141693115,-6.236000061035156 -2.5899999141693115,-6.236000061035156 C-2.5899999141693115,-5.921999931335449 -2.4619998931884766,-5.63700008392334 -2.253999948501587,-5.423999786376953 C-1.899999976158142,-5.060999870300293 -1.2760000228881836,-5.11299991607666 -0.9580000042915344,-5.504000186920166 C-0.9580000042915344,-5.504000186920166 -0.6819999814033508,-5.8429999351501465 -0.6819999814033508,-5.8429999351501465 C-0.3370000123977661,-6.269000053405762 0.33799999952316284,-6.269000053405762 0.6830000281333923,-5.8429999351501465 C0.6830000281333923,-5.8429999351501465 0.9599999785423279,-5.504000186920166 0.9599999785423279,-5.504000186920166 C1.277999997138977,-5.11299991607666 1.9010000228881836,-5.060999870300293 2.25600004196167,-5.423999786376953 C2.4630000591278076,-5.63700008392334 2.5910000801086426,-5.921999931335449 2.5910000801086426,-6.236000061035156 C2.5910000801086426,-6.236000061035156 2.5910000801086426,-9.324000358581543 2.5910000801086426,-9.324000358581543 C2.5910000801086426,-9.324000358581543 7.252999782562256,-9.324000358581543 7.252999782562256,-9.324000358581543 C8.395999908447266,-9.324000358581543 9.324999809265137,-8.395000457763672 9.324999809265137,-7.251999855041504 C9.324999809265137,-7.251999855041504 9.324999809265137,7.251999855041504 9.324999809265137,7.251999855041504z"
></path>
</g>
</g>
<g transform="matrix(1,0,0,1,11.91200065612793,22.739002227783203)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,12.984999656677246,9.758000373840332)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M-4.631999969482422,-2.371000051498413 C-5.276000022888184,-2.371000051498413 -5.75,-1.7489999532699585 -5.552999973297119,-1.1410000324249268 C-4.895999908447266,0.8809999823570251 -2.6589999198913574,2.371000051498413 0,2.371000051498413 C2.6600000858306885,2.371000051498413 4.895999908447266,0.8809999823570251 5.553999900817871,-1.1410000324249268 C5.75,-1.7489999532699585 5.2769999504089355,-2.371000051498413 4.630000114440918,-2.371000051498413 C4.630000114440918,-2.371000051498413 -4.631999969482422,-2.371000051498413 -4.631999969482422,-2.371000051498413z"
></path>
</g>
</g>
<g transform="matrix(1,0,0,1,17.156999588012695,23.010000228881836)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,3.638000011444092,2.2860000133514404)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M2.2990000247955322,2.0360000133514404 C1.6970000267028809,2.0360000133514404 1.2100000381469727,1.5499999523162842 1.2100000381469727,0.9490000009536743 C1.2100000381469727,0.5669999718666077 0.7149999737739563,0.14100000262260437 0.0010000000474974513,0.14100000262260437 C-0.7120000123977661,0.14100000262260437 -1.2100000381469727,0.5669999718666077 -1.2100000381469727,0.9490000009536743 C-1.2100000381469727,1.5499999523162842 -1.6970000267028809,2.0360000133514404 -2.2990000247955322,2.0360000133514404 C-2.9000000953674316,2.0360000133514404 -3.38700008392334,1.5499999523162842 -3.38700008392334,0.9490000009536743 C-3.38700008392334,-0.6970000267028809 -1.8669999837875366,-2.0360000133514404 0.0010000000474974513,-2.0360000133514404 C1.86899995803833,-2.0360000133514404 3.38700008392334,-0.6970000267028809 3.38700008392334,0.9490000009536743 C3.38700008392334,1.5499999523162842 2.9000000953674316,2.0360000133514404 2.2990000247955322,2.0360000133514404z"
></path>
</g>
</g>
<g transform="matrix(1,0,0,1,25.530000686645508,23.010000228881836)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,3.6389999389648438,2.2860000133514404)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M2.2990000247955322,2.0360000133514404 C1.6970000267028809,2.0360000133514404 1.2100000381469727,1.5499999523162842 1.2100000381469727,0.9490000009536743 C1.2100000381469727,0.5669999718666077 0.7149999737739563,0.14100000262260437 0.0010000000474974513,0.14100000262260437 C-0.7139999866485596,0.14100000262260437 -1.2120000123977661,0.5669999718666077 -1.2120000123977661,0.9490000009536743 C-1.2120000123977661,1.5499999523162842 -1.6979999542236328,2.0360000133514404 -2.299999952316284,2.0360000133514404 C-2.9010000228881836,2.0360000133514404 -3.3889999389648438,1.5499999523162842 -3.3889999389648438,0.9490000009536743 C-3.3889999389648438,-0.6970000267028809 -1.8669999837875366,-2.0360000133514404 0.0010000000474974513,-2.0360000133514404 C1.8680000305175781,-2.0360000133514404 3.3889999389648438,-0.6970000267028809 3.3889999389648438,0.9490000009536743 C3.3889999389648438,1.5499999523162842 2.9010000228881836,2.0360000133514404 2.2990000247955322,2.0360000133514404z"
></path>
</g>
</g>
<g transform="matrix(0.9765672087669373,0.2152126133441925,-0.2152126133441925,0.9765672087669373,4.277886867523193,19.342851638793945)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,6.203999996185303,4.443999767303467)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M4.4629998207092285,4.195000171661377 C4.22599983215332,4.195000171661377 3.9860000610351562,4.130000114440918 3.7699999809265137,3.994999885559082 C3.7699999809265137,3.994999885559082 -5.1579999923706055,-1.5980000495910645 -5.1579999923706055,-1.5980000495910645 C-5.76800012588501,-1.9809999465942383 -5.953999996185303,-2.7880001068115234 -5.571000099182129,-3.4000000953674316 C-5.186999797821045,-4.01200008392334 -4.38100004196167,-4.193999767303467 -3.7690000534057617,-3.812000036239624 C-3.7690000534057617,-3.812000036239624 5.1579999923706055,1.781000018119812 5.1579999923706055,1.781000018119812 C5.76800012588501,2.1640000343322754 5.953999996185303,2.9709999561309814 5.571000099182129,3.5829999446868896 C5.322999954223633,3.9779999256134033 4.8979997634887695,4.195000171661377 4.4629998207092285,4.195000171661377z"
></path>
</g>
</g>
<g transform="matrix(0.9789604544639587,-0.20405006408691406,0.20405006408691406,0.9789604544639587,33.64060592651367,21.279010772705078)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,6.203999996185303,4.443999767303467)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M-4.461999893188477,4.195000171661377 C-4.896999835968018,4.195000171661377 -5.322000026702881,3.9779999256134033 -5.570000171661377,3.5829999446868896 C-5.953000068664551,2.9709999561309814 -5.769000053405762,2.1640000343322754 -5.1579999923706055,1.781000018119812 C-5.1579999923706055,1.781000018119812 3.7699999809265137,-3.812000036239624 3.7699999809265137,-3.812000036239624 C4.381999969482422,-4.193999767303467 5.185999870300293,-4.01200008392334 5.570000171661377,-3.4000000953674316 C5.953000068664551,-2.7880001068115234 5.76800012588501,-1.9809999465942383 5.1579999923706055,-1.5980000495910645 C5.1579999923706055,-1.5980000495910645 -3.7709999084472656,3.994999885559082 -3.7709999084472656,3.994999885559082 C-3.9860000610351562,4.130000114440918 -4.224999904632568,4.195000171661377 -4.461999893188477,4.195000171661377z"
></path>
</g>
</g>
<g transform="matrix(1,0,0,1,28.222000122070312,37.986000061035156)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,1.5950000286102295,6.131999969482422)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.0010000000474974513,5.90500020980835 C-0.7419999837875366,5.90500020980835 -1.3459999561309814,5.320000171661377 -1.3459999561309814,4.5980000495910645 C-1.3459999561309814,4.5980000495910645 -1.3459999561309814,-4.576000213623047 -1.3459999561309814,-4.576000213623047 C-1.3459999561309814,-5.296999931335449 -0.7419999837875366,-5.881999969482422 0.0010000000474974513,-5.881999969482422 C0.7429999709129333,-5.881999969482422 1.3459999561309814,-5.296999931335449 1.3459999561309814,-4.576000213623047 C1.3459999561309814,-4.576000213623047 1.3459999561309814,4.5980000495910645 1.3459999561309814,4.5980000495910645 C1.3459999561309814,5.320000171661377 0.7429999709129333,5.90500020980835 0.0010000000474974513,5.90500020980835z"
></path>
</g>
</g>
<g transform="matrix(1,0,0,1,18.552000045776367,37.986000061035156)" opacity="1" style="display: block;">
<g opacity="1" transform="matrix(1,0,0,1,1.5950000286102295,6.131999969482422)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.0010000000474974513,5.90500020980835 C-0.7419999837875366,5.90500020980835 -1.3459999561309814,5.320000171661377 -1.3459999561309814,4.5980000495910645 C-1.3459999561309814,4.5980000495910645 -1.3459999561309814,-4.576000213623047 -1.3459999561309814,-4.576000213623047 C-1.3459999561309814,-5.296999931335449 -0.7419999837875366,-5.881999969482422 0.0010000000474974513,-5.881999969482422 C0.7440000176429749,-5.881999969482422 1.3459999561309814,-5.296999931335449 1.3459999561309814,-4.576000213623047 C1.3459999561309814,-4.576000213623047 1.3459999561309814,4.5980000495910645 1.3459999561309814,4.5980000495910645 C1.3459999561309814,5.320000171661377 0.7440000176429749,5.90500020980835 0.0010000000474974513,5.90500020980835z"
></path>
</g>
</g>
<g style="display: block;" transform="matrix(0.4726015031337738,0,0,0.4726015031337738,29.222999572753906,12.919045448303223)" opacity="0.4726015236510294">
<g opacity="1" transform="matrix(1,0,0,1,4.908999919891357,3.0350000858306885)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M-0.04699999839067459,2.7699999809265137 C-0.04699999839067459,2.7699999809265137 -0.07100000232458115,2.7850000858306885 -0.07100000232458115,2.7850000858306885 C-0.07100000232458115,2.7850000858306885 -0.08500000089406967,2.7750000953674316 -0.08500000089406967,2.7750000953674316 C-4.658999919891357,0.03099999949336052 -3.0899999141693115,-2.617000102996826 -1.3919999599456787,-2.5850000381469727 C-1.3380000591278076,-2.5850000381469727 -1.2829999923706055,-2.5789999961853027 -1.2289999723434448,-2.572999954223633 C-0.5450000166893005,-2.490000009536743 -0.2240000069141388,-2.111999988555908 -0.07100000232458115,-1.7860000133514404 C0.08100000023841858,-2.1110000610351562 0.40299999713897705,-2.489000082015991 1.0870000123977661,-2.568000078201294 C2.8369998931884766,-2.7839999198913574 4.658999919891357,-0.05999999865889549 -0.04699999839067459,2.7699999809265137z"
></path>
</g>
</g>
<g style="display: none;" transform="matrix(0.028546487912535667,0,0,0.028546487912535667,31.402864456176758,3.245093822479248)" opacity="0.02854648813478917">
<g opacity="1" transform="matrix(1,0,0,1,4.908999919891357,3.0350000858306885)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M-0.04699999839067459,2.7699999809265137 C-0.04699999839067459,2.7699999809265137 -0.07100000232458115,2.7850000858306885 -0.07100000232458115,2.7850000858306885 C-0.07100000232458115,2.7850000858306885 -0.08500000089406967,2.7750000953674316 -0.08500000089406967,2.7750000953674316 C-4.658999919891357,0.03099999949336052 -3.0899999141693115,-2.617000102996826 -1.3919999599456787,-2.5850000381469727 C-1.3380000591278076,-2.5850000381469727 -1.2829999923706055,-2.5789999961853027 -1.2289999723434448,-2.572999954223633 C-0.5450000166893005,-2.490000009536743 -0.2240000069141388,-2.111999988555908 -0.07100000232458115,-1.7860000133514404 C0.08100000023841858,-2.1110000610351562 0.40299999713897705,-2.489000082015991 1.0870000123977661,-2.568000078201294 C2.8369998931884766,-2.7839999198913574 4.658999919891357,-0.05999999865889549 -0.04699999839067459,2.7699999809265137z"
></path>
</g>
</g>
<g style="display: none;" transform="matrix(0.033547673374414444,0,0,0.033547673374414444,19.089628219604492,2.3418939113616943)" opacity="0.03354767310550628">
<g opacity="1" transform="matrix(1,0,0,1,6.241000175476074,3.8299999237060547)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.061000000685453415,3.561000108718872 C0.061000000685453415,3.561000108718872 0.09200000017881393,3.5799999237060547 0.09200000017881393,3.5799999237060547 C0.09200000017881393,3.5799999237060547 0.10999999940395355,3.568000078201294 0.10999999940395355,3.568000078201294 C5.991000175476074,0.04100000113248825 3.9730000495910645,-3.36299991607666 1.7899999618530273,-3.322000026702881 C1.7200000286102295,-3.322000026702881 1.649999976158142,-3.315000057220459 1.5800000429153442,-3.306999921798706 C0.7009999752044678,-3.2009999752044678 0.2879999876022339,-2.7139999866485596 0.09200000017881393,-2.2960000038146973 C-0.10300000011920929,-2.7139999866485596 -0.5180000066757202,-3.2009999752044678 -1.3969999551773071,-3.302999973297119 C-3.6470000743865967,-3.5799999237060547 -5.991000175476074,-0.07800000160932541 0.061000000685453415,3.561000108718872z"
></path>
</g>
</g>
<g style="display: block;" transform="matrix(0.5068482756614685,0,0,0.5068482756614685,16.135759353637695,11.219680786132812)" opacity="0.5068483135949654">
<g opacity="1" transform="matrix(1,0,0,1,6.241000175476074,3.8299999237060547)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.061000000685453415,3.561000108718872 C0.061000000685453415,3.561000108718872 0.09200000017881393,3.5799999237060547 0.09200000017881393,3.5799999237060547 C0.09200000017881393,3.5799999237060547 0.10999999940395355,3.568000078201294 0.10999999940395355,3.568000078201294 C5.991000175476074,0.04100000113248825 3.9730000495910645,-3.36299991607666 1.7899999618530273,-3.322000026702881 C1.7200000286102295,-3.322000026702881 1.649999976158142,-3.315000057220459 1.5800000429153442,-3.306999921798706 C0.7009999752044678,-3.2009999752044678 0.2879999876022339,-2.7139999866485596 0.09200000017881393,-2.2960000038146973 C-0.10300000011920929,-2.7139999866485596 -0.5180000066757202,-3.2009999752044678 -1.3969999551773071,-3.302999973297119 C-3.6470000743865967,-3.5799999237060547 -5.991000175476074,-0.07800000160932541 0.061000000685453415,3.561000108718872z"
></path>
</g>
</g>
<g style="display: none;" transform="matrix(0.028386496007442474,0,0,0.028386496007442474,26.36815071105957,4.3981852531433105)" opacity="0.028386494519708236">
<g opacity="1" transform="matrix(1,0,0,1,8.23799991607666,5.360000133514404)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.08100000023841858,4.708000183105469 C0.08100000023841858,4.708000183105469 0.12200000137090683,4.732999801635742 0.12200000137090683,4.732999801635742 C0.12200000137090683,4.732999801635742 0.1459999978542328,4.7179999351501465 0.1459999978542328,4.7179999351501465 C7.986999988555908,-0.13199999928474426 5.297999858856201,-4.813000202178955 2.38700008392334,-4.756999969482422 C2.2939999103546143,-4.756999969482422 2.1989998817443848,-4.747000217437744 2.1050000190734863,-4.736000061035156 C0.9340000152587891,-4.589000225067139 0.382999986410141,-3.9210000038146973 0.12200000137090683,-3.3450000286102295 C-0.1379999965429306,-3.9200000762939453 -0.6909999847412109,-4.590000152587891 -1.8630000352859497,-4.730000019073486 C-4.86299991607666,-5.110000133514404 -7.986999988555908,-0.29499998688697815 0.08100000023841858,4.708000183105469z"
></path>
</g>
</g>
<g style="display: block;" transform="matrix(0.7583158016204834,0,0,0.7583158016204834,20.35499382019043,3.5232012271881104)" opacity="0.7583158093653151">
<g opacity="1" transform="matrix(1,0,0,1,8.23799991607666,5.360000133514404)">
<path
fill="rgb(88,80,80)"
fill-opacity="1"
d=" M0.08100000023841858,4.708000183105469 C0.08100000023841858,4.708000183105469 0.12200000137090683,4.732999801635742 0.12200000137090683,4.732999801635742 C0.12200000137090683,4.732999801635742 0.1459999978542328,4.7179999351501465 0.1459999978542328,4.7179999351501465 C7.986999988555908,-0.13199999928474426 5.297999858856201,-4.813000202178955 2.38700008392334,-4.756999969482422 C2.2939999103546143,-4.756999969482422 2.1989998817443848,-4.747000217437744 2.1050000190734863,-4.736000061035156 C0.9340000152587891,-4.589000225067139 0.382999986410141,-3.9210000038146973 0.12200000137090683,-3.3450000286102295 C-0.1379999965429306,-3.9200000762939453 -0.6909999847412109,-4.590000152587891 -1.8630000352859497,-4.730000019073486 C-4.86299991607666,-5.110000133514404 -7.986999988555908,-0.29499998688697815 0.08100000023841858,4.708000183105469z"
></path>
</g>
</g>
</g>
</g>
</svg>
I guess these types of CSS transformation animations will use lots of CPU too?