lagudal

может, пригодится, есть расширение для хрома.
плюс - можно работать с dev tools как обычно.
Минус - много каких разрешений девайсов доступны в про версии.

похожий вопрос
Поищите, еще раньше были еще такие вопросы.
Суть в 2 словах - если нужен плавный градиент по hover - то либо js, либо - слой поверх и по hover менять прозрачность. (opacity) + transition.

Один path может быть только или f букву оставить, без закругленного квадрата, или вырезать эту f в квадрате.
Если нужно второе - то цвет можно будет задавать только квадрату, буква будет иметь цвет фона.
Как то так, все просто.

Если цвета нужно задавать/менять и букве и квадрату, то одним path тут не обойтись ))

Капец какая боль. У нас где то год-полтора назад еще было до 27% посетителей веб шопа с ие11. При всем при этом только у меня был рабочий комп под виндовс 7, у всех остальных разработчиков - макбуки. Понимаете, вот это все - сыпалось только на меня... и зарплата моя на 3 не умножалась ))
В общем, по css - префиксы, ну лучше всего конечно автопрефиксер с поддержкой, чтобы на этом не заморачиваться. Если с css grid - задавать для каждого элемента -ms-grid-row, -ms-grid-column, все будет работать. Проверять и тестировать, если хочется или надо применить свойства, которые в ие ну никак, то я их применяю не колеблясь, а для ие задаю специально и только для ие - обычно так -

_:-ms-fullscreen, :root .ie11up { property: value; }

иногда может быть оправданным написать файл стилей только для ие и обозначить его в head -

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Отдельно с js - тут только полифилы, конверт в es5(babel)
Ну или разные файлы скриптов для ие и для не ие -
<!--[if !IE]>-->
тут подключать скрипты для остальных браузеров
<!--[if IE]>-->
а тут для ие.
Слава богу, с началом пандемии меня перевели на home office и дали макбук, так что теперь пусть у кого то еще голова болит за это все. )))
пс. Сколько посетителей осталось у нас на ие сегодня - без понятия, даже не спрашиваю ))

еще можно открыть для себя viewbox - который и уберет отступы сверху, снизу, и слева, если надо то можно и добавить.
В вашем случае картинка как раз чуть обрезана слева.
Добавьте к своему svg viewbox. Например, так -

<svg width="770" height="588" viewbox="-40 135 770 588"

Как вариант - svgshare

вот реализация с ненавязчивой анимацией, на флексах
https://codepen.io/dantilse/pen/oLvVeZ
Картинки некоторые недоступны, ну да заменить не проблема.

У вас в самом коде svg контуров - stroke - вообще нет, как бы они должны быть, чтобы было чего обводить )

нюансов может быть очень много разных - но все же сейчас главное не в верстке, а в совокупности уникальности контента, его качества, количества и скорости загрузки.
По верстке - ну прогоните например свою верстку через google PageSpeed Insights, и увидите, что порекомендует гугл - сможете что то из этого осуществить, хорошо, нет - тоже не беда, если в целом все более менее нормально.
Я например стараюсь - где это возможно - применять lazy loading, использовать тег picture для изображений, осчастливливаю гугл оптимированными картинками и webp форматом.
Однако, это все не везде и не всегда возможно - верстка же чаще всего не живет в продакшене сама по себе, все же в основном это основа для различных cms например. Но если фронтендеров под все это дело уговорить можно, то попробуйте передать такую супер-пупер верстку со всеми потрохами бакендщикам, и услышите много хорошего о себе.
Хотите причесать структуру, прогоните валидатором, уберите явные ошибки, используйте еще как инструмент outliner - как уже писали, один h1 на странице, остальные заголовки от h2 например, в общем посмотрите, как будет выглядеть.
А теперь главное: посмотрите на верстку главного конкурента, кто на самой первой позиции. Прогоните теми же инструментами. Убедитесь, что ему нас....ть на все то, чего вы так долго добиваетесь.