lagudal

вообще то там открыто абсолютно owl-carousel используется

Как я недавно выяснял, качество кода в плане сео сейчас уже где то очень уж далеко. Т.е. я не знаю алгоритмов поисковиков, но если этот фактор присутствует и влияет на выдачу, то уж точно не находится по важности в первой десятке факторов.
Как пример, немецкоязычный вч запрос "Etiketten" - в органической выдаче гугла на первом месте с большим отрывом идет вот эта страница. На втором месте - другая страница этого же сайта.
Если посмотреть на код в валидаторе, то увидите 693 эррора и 293 варнинга. И ничего, так как другие факторы намного важнее.

картинка не видна, но если вы сами выделили нужное вам в span - то почему бы просто не задать этому селектору opacity: 0.5; или сколько вам нужно?

я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset, напрямую воздействуя на эти сегменты.
В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.

Вот тоже вариант с png спрайтом - простенькая анимация, но для понимания вашего примера подойдет, я думаю )

Потому что в IE 11 необходимо явно прописывать поведение, причем каждому элемену сетки, задавая этим элементам уникальные классы.
Например, в вашем случае сработает, если добавить следующее.

<style>
 -ms-grid-rows: auto auto;
.table-kpi__number-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:1;
  }
.table-kpi__number-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:1;
  }
.table-kpi__property {
  color: #262626;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
}
.table-kpi__property-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:2;
}
.table-kpi__property-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:2;
}
.table-kpi__edit-row-1 {
  -ms-grid-row:1;
  -ms-grid-column:3;
}
.table-kpi__edit-row-2 {
  -ms-grid-row:2;
  -ms-grid-column:3;
}
</style>

	<div class="table-kpi">
    <div class="table-kpi__number table-kpi__number-row-1">320 052</div>
    <div class="table-kpi__property table-kpi__property-row-1">Количество обработанных заявок</div>
    <div class="table-kpi__edit table-kpi__edit-row-1">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

    <div class="table-kpi__number table-kpi__number-row-2">92</div>
    <div class="table-kpi__property table-kpi__property-row-2">Процент успешно закрытых заявок, %</div>
    <div class="table-kpi__edit table-kpi__edit-row-2">
        <button class="btn btn--middle btn--blue-bordered">
            <img src="img/icon-edit.svg" alt="">
            <span>Редактировать</span>
        </button>
    </div>

	</div>

Думаю, смысл понятен

У меня была подобная ситуация, проходил тестовую неделю на фирме. Дали макет в pdf, сетки нет, размеры непонятны вообще, на компе фотошопа и вообще ни одной графической программы нет и сказали "ты верстальщик тебе не нужен" - ps только для дизайнеров. Спросил - вы хотите на глазок? Да без проблем, кривые вы мои...
В общем, взял скачал портабельный гимп, несколько сеток бутстраповских, подогнал дизайн - благо подошел под одну сетку.
Макет выверстал, но в принципе знал, что работать у них не буду. Сказал, если у вас так все выстроено, то сорри, ищите других, а мне мои нервы дороги...

Т.е. вы хотите что называется рипнуть сайт? Если вы уверены что сайт чисто html css js то есть несколько вариантов. Самый простой - окрыть сайт после авторизации в devtools и постягивать все что надо.
Вроде еще можно настроить телепорт или подобные программы для скачивания структуры сайта целиком - но я давно не имел с ними дел и не знаю честно говоря, как там с капчами сейчас. Может и есть нужное решение.
Но вообще подобное чаще всего для того и применяют, чтобы труднее было стянуть.
А может быть ведь еще одностраничник на php, или на фреймворках, типа angular react vue, там вообще мало что сделать можно.

смотрите что в консоли, может что пишет почему не видит файл.
ps. вижу, что вы index.html загружаете локально и без всякого веб сервера - пропишите пути до svg полные - file:///С:/Users...file.svg

Не обязательно дублировать пути - по дефолту fill:url(#img), по hover fill: #FFA234 - какой у вас там цвет.
Плюсы тоже можно реализовать, обернуть классом или ид, по дефолту opacity: 0, hover по предыдущему элементы - opacity:1
Пример:
https://codepen.io/lagudal/pen/VqaowJ
фигуры и картинки естественно свои нарисуете.

проще всего svg наверное.

смотртя что конкретно и для каких целей: если это будут графики, которые должны "крутиться" чисто условно, по сути заполняться до какого - то уровня, то нужен будет немного другой подход.
Если реально просто крутиться - то transform:rotate как в предыдущем ответе.
Хотя не очень понимаю смысл, для чего нужно такое вращение.
Если для wow-эффекта, то можно еще посмотреть в сторону анимации stroke - тут и тут - вращение колес выглядит очень даже...

А еще можно читабельность кода сразу в любимом редакторе улучшить - для notepad++ -плагин indent by fold, для sublime text вроде бы из коробки line - reindent.

1. Если речь только об одном лого - то зачем шрифт? Из-за одной картинки однозначно не стОит огород городить со шрифтом.
Другое дело, если планируется в проекте использовать достаточно много нестандартных иконок, которых нет в других шрифтах типа awesome, то возможно и шрифт, почему нет.
Я сейчас как раз для фирмы разрабатываю иконочный шрифт, на данный момент там порядка 100 глифов, все довольно специфичные, ну и лого тоже включил в шрифт, где то возможно тоже пригодится )))
2. Если сравнивать размеры png и svg - скажем так, если выводимый размер небольшой, и в лого присутствует текст, или тексты, с переведенными в кривые шрифтами, то скорее всего меньший размер, а значит и предпочтительнее, будет png.
Из последнего опыта: лого без подзаголовка снизу в svg весит чуть больше 1кб, с заголовком - уже около 15 кб. То же лого с заголовком в png в размере примерно 130х70 - тот размер, что выводится на сайте - весит около 9 кб. Поэтому выбор пал на png.

насколько я могу видеть, в лицензии четко написано, что можно и что нельзя
https://fontawesome.com/license

Совсем недавно столкнулся с подобной проблемой, решал ее в том числе и тут на тостере. Только не wp, а magento2, точнее, тема, используемая в шопе, была тому причиной.
Как решали.
1. Тесты, много тестов на разных серверах и условиях, помогли точно убедиться, что причина именно в теме.
2. Профайлер, логирование запросов помогли определить несколько наиболее требовательных модулей, поставляемых с темой.
3. Отключение этих модулей никак не повлияло на ttfb, а вот полное удаление всего лишь одного из них - в моем случае - mega menu от разработчика темы - существенно.

В случае с wp - я бы поначалу отследил, где проблема точно - в теме, в плагинах, может быть в хостинге(сервере).
Полагаю, сделать это не сложно...