Если нужно как в Windows 10 или в Mac то вот пример https://codepen.io/AmJustSam/full/ModORY/
Ну либо гуглите css эффект матового стекла или css frosted glass effect
Эффект матового стекла описан и в книге Lea Verou / Леа Веру - CSS Secrets. Better Solutions to Everyday Web Design Problems. / Секреты CSS. Идеальные решения ежедневных задач.
Вот код примера из ее книги dabblet.com/gist/d9f243ddd7dbffa341a4
Чтобы избежать проблем со специфичностью (а у инлайновых стилей специфичность больше), лучше добавляйте и убирайте элементам классы с помощью classList https://developer.mozilla.org/ru/docs/Web/API/Elem...
А для классов в стилях прописывайте нужные css правила. Возьмите это за правило и избавитесь от таких проблем в будущем.
Так чекайте на предмет мобильного устройства с помощью https://github.com/hgoebl/mobile-detect.js
По поводу единичных случаев подмены userAgent, с этим не стоит бороться. Ваш алгоритм то предусматривает какое то разветвление и другое действие для не мобильных устройств. Дополнительная проверка на ширину устройства будет вообще ненадежным методом определения мобильного. Если говорить про исключения, то ведь есть еще планшеты с симками с установленными звонилками. Все не предусмотришь.
В плане seo гугл бот точно видит картинки - можно убедиться в search console в сканирование->Просмотреть как Googlebot. Яндекс нужно протестировать аналогично гуглу в вебмастере.
Откройте файл svg в текстовом редакторе или браузере с просмотром исходного кода и увидите, что внутри находится image data:image/png, т.е. png изображение.