Реальная задача была в том чтобы отобразить модальное окно где есть картинка с одной стороны и текст с предложением купить продукт с другой)
Картинка ничто не перекрывала и с UI никак не смешивалась, поэтому в backdrop-filter необходимости не было.
В целом да можно использовать png, как все с этими картинками из брэндбука и поступали. Я отдаю предпочтение svg т.к. он сильно компактнее чем растр, не надо генерить отдельно изображения для экранов с разным DPI, можно легко подредактировать, поменять цвет какого-то элемента например. Ну и затраты на рендеринг статичного svg тем более такого простого мне кажется минимальные, хотя интересно было бы проверить его вклад в производительность.
При описанном выше подходе в каком-нибудь Inkscape открываются отдельные элементы (девушка или окно), а не всё в сборе.
Ну это несовершенство редактора) Фигма нормально открывает эту картинку, но всирает опять этот фильтр) В моем случае ещё удобно что WebStorm открывает картинку корректно.
Целью статьи было вообще рассказать как исправить корявый экспорт фигмы, а уже применять это или нет, действительно зависит от задачи.
В моем случае речь про браузер, при отображении иллюстраций на странице я иногда предпочитаю использовать <img>, а не инлайнтить svg.
backdrop-filter как и многие css свойства не работает с svg элементами, даже если они заинлайнены в html, у них другие свойства.
описывать сами фигуры и то, как они отображаются, на одном и том же языке так же ужасно
тут я не соглашусь, я воспринимаю svg как самодостаточный формат, и у него есть свои возможности и ограничения, так вот размытие в нем доступно, почему тогда его не использовать? SVG не очень читаемый и удобный для текстового редактирования формат, это да, но с этим можно жить, его зато легко открыть в любом векторном редакторе и подправить, SVG + CSS ты уже так не откроешь, легко открыть в IDE чтобы посмотреть что в нем находится, также как мы работаем с растровыми изображениями.
Я так понял автор преследует исследовательскую цель, попробовать имитировать длительный мыслительный процесс и посмотреть что из этого получится
Кажется уже есть инструмент решающий туже проблему - plop.js
Реальная задача была в том чтобы отобразить модальное окно где есть картинка с одной стороны и текст с предложением купить продукт с другой)
Картинка ничто не перекрывала и с UI никак не смешивалась, поэтому в backdrop-filter необходимости не было.
В целом да можно использовать png, как все с этими картинками из брэндбука и поступали. Я отдаю предпочтение svg т.к. он сильно компактнее чем растр, не надо генерить отдельно изображения для экранов с разным DPI, можно легко подредактировать, поменять цвет какого-то элемента например. Ну и затраты на рендеринг статичного svg тем более такого простого мне кажется минимальные, хотя интересно было бы проверить его вклад в производительность.
Ну это несовершенство редактора) Фигма нормально открывает эту картинку, но всирает опять этот фильтр) В моем случае ещё удобно что WebStorm открывает картинку корректно.
Целью статьи было вообще рассказать как исправить корявый экспорт фигмы, а уже применять это или нет, действительно зависит от задачи.
В моем случае речь про браузер, при отображении иллюстраций на странице я иногда предпочитаю использовать <img>, а не инлайнтить svg.
backdrop-filter как и многие css свойства не работает с svg элементами, даже если они заинлайнены в html, у них другие свойства.
тут я не соглашусь, я воспринимаю svg как самодостаточный формат, и у него есть свои возможности и ограничения, так вот размытие в нем доступно, почему тогда его не использовать? SVG не очень читаемый и удобный для текстового редактирования формат, это да, но с этим можно жить, его зато легко открыть в любом векторном редакторе и подправить, SVG + CSS ты уже так не откроешь, легко открыть в IDE чтобы посмотреть что в нем находится, также как мы работаем с растровыми изображениями.