Что меньше нагружает пользовательский процессор

Анимация за счет svg (https://ru.stackoverflow.com/questions/1397041/Перенести-анимацию-c-css-на-svg/1397702#1397702)

 <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 36 36" > 
      <circle cx="18" cy="18" r="15" fill="#4C4C4C" /> 
      <text x="50%" text-anchor="middle" y="24" font-size="4px" fill="white">Текст </text>
     <g id="gr1">
      <path transform="translate(22 13)" opacity="0.3" d="M0,1.75 3.5,0 3.5,3.5z" fill="white"  >
          <animate id="an1" attributeName="opacity" begin="0s;an4.end" dur="0.3s" values="0.3;1;0.3"   />
      </path>  
    <path transform="translate(16 13)" opacity="0.3" d="M0,1.75 3.5,0 3.5,3.5z" fill="white"  >
         <animate id="an2" attributeName="opacity" begin="an1.end" dur="0.3s" values="0.3;1;0.3"  />
      </path>      
     <path transform="translate(10 13)" opacity="0.3" d="M0,1.75 3.5,0 3.5,3.5z" fill="white"  >
        <animate id="an3" attributeName="opacity" begin="an2.end" dur="0.3s" values="0.3;1;0.3" />
      </path> 
    </g>  
      <animate id="an4" xlink:href="#gr1" attributeName="opacity" begin="an3.end+0.1s" dur="0.5s" values="0;1" repeatCount="1"  />  
    </svg>

Анимация за счет css на svg

</style>
    .arrow_b[data-side=left] {
      left: 10%;
      right:unset;
      text-align: right
    }
    .arrow_b circle {fill:#4C4C4C}
    .arrow path {
      fill:white;
      animation-duration: 1.2s;
      animation-iteration-count: infinite
    }
    
    
    [data-side=left] .arrow path:nth-child(3) {animation-name: arrow-1}
    [data-side=left] .arrow path:nth-child(2) {animation-name: arrow-2}
    [data-side=left] .arrow path:nth-child(1) {border-left: 0px; animation-name: arrow-3}
    
    @keyframes arrow-1 {
      0% {opacity: 0}
      17% {opacity: .9}
      33% {opacity: .6}
      50% {opacity: .3}
      67% {opacity: .3}
      83% {opacity: .3}
      to {opacity: 0}
    }
    
    @keyframes arrow-2 {
      0% {opacity: 0}
      17% {opacity: .3}
      33% {opacity: .9}
      50% {opacity: .6}
      67% {opacity: .3}
      83% {opacity: .3}
      to {opacity: 0}
    }
    
    @keyframes arrow-3 {
      0% {opacity: 0}
      17% {opacity: .3}
      33% {opacity: .3}
      50% {opacity: .9}
      67% {opacity: .6}
      83% {opacity: .3}
      to {opacity: 0}
    }
</style>
  

    <svg class="arrow_b" viewBox="0 0 36 36" data-side="right"> 
        <circle cx="18" cy="18" r="15"/></circle>
        <g class="arrow">
          <path transform="translate(22 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path>
          <path transform="translate(16 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path> 
          <path transform="translate(10 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path> 
        </g>
        <text x="50%" text-anchor="middle" y="22" font-size="4px" fill="white">Текwwст</text>
      </svg>

Какая из анимаций, нагружает пользовательский процессор меньше?

Второй вопрос в том, допустим svg имеет ширину 500px. В какой блок обернуть дочерние блоки, чтобы посредством css ограничить максимальную ширину и при этом сохранить выравнивание по центру.

Примерный пример(не рабочий), не силен в svg.

<svg class="arrow_b" viewBox="0 0 36 36" data-side="right"> 
    <circle cx="18" cy="18" r="15"/>
        <g class="arrow">
      <path transform="translate(22 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path>
      <path transform="translate(16 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path> 
      <path transform="translate(10 13)" d="M0,1.75 3.5,0 3.5,3.5z"></path> 
        </g>
    </circle>
    <text x="50%" text-anchor="middle" y="22" font-size="4px" fill="white">Текwwст</text>
  </svg>

Допустим блоку circle(окружность, темный фон), зададим максимальную ширину 200px.

То есть изначально блоку svg задаем ширину в 10%, ширина по факту будет 500px или 800. А блок circle(окружность со стрелками и текстом) не будет превышать ширину 200px. При этом блок circle будет расположен по центру.

Svg нравиться тем, что блок пропорционально увеличивает стороны(как изображение) и не теряет качество.