Петр

Так по вашей ссылке в комментарии есть еще ссылка

<svg style='height: 190px; width: 380px; transform: scale(0.421875);'>
...

Кодировка задается для правильного определения кодировки символов всей страницы.
И делать ее для блоков смысла нет.
Если вы генерите блок информера на сервере и получаете данные от стороннего сервbcf, то сами преобразуйте к нужному формату при генерации страницы

Совсем не работает или всеже работает в тех местах, где нет прозрачности.
Есть такая особенность, делаешь кнопки с svg картинкой, а hover только на сами линии реагирует.
Лечиться добавлением прямоугольника у которого прозрачность 99%.
Глазом не видно, но работает как нужно

Для начала хотябы уберите двойные запросы по селектору.

if($('.bot').hasClass('hide')){
   $('.bot').removeClass('hide');
}

Достаточно
$('.bot').removeClass('hide');

Это

if($('#main__background .phone').val() != '' && $('#main__background .phone').val().search('_') == -1)

Замените на

var phvl = $('#main__background .phone').val();
if (phvl != '' && phvl.search('_') == -1)

Это

var w = $(window);
if(w.scrollTop() != 60)

Можно. Для этого есть Шаблонизаторы, их полно для каждого языка программирования, что используются для web разработки.

var text = $('html').prop('outerHTML');

А вы уверены, что есть этот код, может он через javascript добавляется в страницу

Так укажите 2 элемента path и поместите их в один элемент g
В css добавьте стили.

g:hover .path1, g:not(:hover) .path2{ display: none; }

Если вы применяете use и хотите чтобы наследовался цвет заданный в css,
то ваш элемент symbol должен иметь атрибут fill="currentColor"

Отобразите поверх div с черной заливкой и сделайте его полупрозрачным.

Так не вносите эту часть в input элемент, а отображайте в другом элементе.
Если нужно, то можете в input type='hidden' ее сохранить, а на сервере соединять значения из инпутов.