Идея:
исправить условие в модуле, судя по гитхабу там нет проверки по типу файла, думаю там где проверяется вообще url в модуле сразу и проверить тип файла
У вас просто блок div (который с зелёным фоном) перекрывает из за z-index: 5 саму SVG и по сути не срабатывает hover именно SVG.
Поместите SVG внутри div например
"но по требованиям Speed Insight это необходимое условие для хороших скоростных показателей сайта" - это на показали итоговые вообще никак не влияет.
Вы поддержку браузерами .webp видели? https://caniuse.com/#feat=webp
Хотя к моему удивлению на сегодня и больше зеленых блоков стало раза в 2 по сравнению с пол года назад, этого еще мало чтобы использовать на сайтах.
35+(53-35)*(ui.value/100)
Но стоит отметить что у вас слайдер начинается с 1 и в минимальном положении он будет не ровно 35, а ~35,3px
Просто вставьте эту формулу везде вместо ui.value для ширины и высоты
Информации вагон и маленькая тележка.
Так как у вас знаний 0 - начните все изучать постепенно. Что такое SVG для начала.
Нельзя просто выстрелить статьей в вас чтобы вы все поняли.
Как на референсе - на чистом css не реализовать!
js, svg, css3, html5 минимум который здесь необходим. Все фигурки должны быть в SVG, их анимация на js, а стилизация на css.
