Комментарии 5
Скажите, пожалуйста, а зачем вам это надо? В каком юз-кейсе? Вопрос, само собой, не про дизайн с матовыми стёклами (такой я сам использую), а про то, кто, кроме браузера, должен его отображать.
Лично я изначально сильно недолюбливал SVG, в т.ч. из-за его сложности, неочевидности и большого числа разных проблем. Но с тех пор, как я осознал, что это не формат данных, а язык геометрической разметки, жизнь стала гораздо легче. А когда я начал воспринимать его как составную часть HTML, всё стало совсем хорошо.
В HTML'е под такие вещи выделили специальный DSL, чтобы отделить эффекты (backdrop-filter: blur(5px);) от самой разметки. И это очень правильно и здорово, потому что описывать сами фигуры и то, как они отображаются, на одном и том же языке так же ужасно, как задавать цвета и шрифты атрибутами. Тяжёлое наследие XML.
Так вот, для рендеринга браузером ничто не мешает эту картинку включить в документ, а её части (стекло), стилизовать CSS'ом (эффект размытия). А чем ещё, кроме браузера, её рендерить на клиенте? Где она у вас используется? Тем более, я бы просто не доверил такой сложный SVG (так сказать, с блендингом и эффектами) какому-нибудь SvgControl из типичных GUI-библиотек).
В моем случае речь про браузер, при отображении иллюстраций на странице я иногда предпочитаю использовать <img>, а не инлайнтить svg.
backdrop-filter как и многие css свойства не работает с svg элементами, даже если они заинлайнены в html, у них другие свойства.
описывать сами фигуры и то, как они отображаются, на одном и том же языке так же ужасно
тут я не соглашусь, я воспринимаю svg как самодостаточный формат, и у него есть свои возможности и ограничения, так вот размытие в нем доступно, почему тогда его не использовать? SVG не очень читаемый и удобный для текстового редактирования формат, это да, но с этим можно жить, его зато легко открыть в любом векторном редакторе и подправить, SVG + CSS ты уже так не откроешь, легко открыть в IDE чтобы посмотреть что в нем находится, также как мы работаем с растровыми изображениями.
backdrop-filter как и многие css свойства не работает с svg элементами, даже если они заинлайнены в html, у них другие свойства.
Я, собственно, потому и спросил, какая реальная задача решается ))
Если надо просто отобразить девушку с замороженным стеклом в руке, через которое размывается тело, можно же вообще отрендерить в png. Ну, качество при апскейлинге (если не хватит разрешения) слегка просядет, зато сильно снизится нагрузка на клиента, что, например, для мобил может быть даже лучше.
А если мы делаем UI и нам реально нужно что-то снизу отобразить и размывать фон с учётом контекста (допустим, эта скромная девушка скрывает номер счёта и остаток на нём), всегда можно нарезать слои так, чтобы применить нужные свойства к слою целиком. Слои, естественно, при желании можно оставить векторными (SVG).
зато легко открыть в любом векторном редакторе и подправить, SVG + CSS ты уже так не откроешь
При описанном выше подходе в каком-нибудь Inkscape открываются отдельные элементы (девушка или окно), а не всё в сборе. Если, конечно, речь идёт про UI (об этом и был мой вопрос): UI ведь всё равно в одну картинку не упихать никак.
Я вообще делаю целые библиотеки из <defs>'ов, с которыми обращаюсь как с компонентами. Допустим, надо показать поддержку разных групп disabled people, одна — слабовидящие, другая — которым трудно пользоваться мышкой. Первые обозначены векторным изображением уха, вторые — векторным изображением клавиатуры, и оба изображения взяты в сердечко. Итого, у меня три векторных изображения в виде <symbol>, и две пары <use href="">, потому что зачем два раза рисовать сердечко? А если его контур захочется перерисовать? Пример, конечно, упрощённый, но с более сложной графикой это тоже работает и приносит пользу.
Реальная задача была в том чтобы отобразить модальное окно где есть картинка с одной стороны и текст с предложением купить продукт с другой)
Картинка ничто не перекрывала и с UI никак не смешивалась, поэтому в backdrop-filter необходимости не было.
В целом да можно использовать png, как все с этими картинками из брэндбука и поступали. Я отдаю предпочтение svg т.к. он сильно компактнее чем растр, не надо генерить отдельно изображения для экранов с разным DPI, можно легко подредактировать, поменять цвет какого-то элемента например. Ну и затраты на рендеринг статичного svg тем более такого простого мне кажется минимальные, хотя интересно было бы проверить его вклад в производительность.
При описанном выше подходе в каком-нибудь Inkscape открываются отдельные элементы (девушка или окно), а не всё в сборе.
Ну это несовершенство редактора) Фигма нормально открывает эту картинку, но всирает опять этот фильтр) В моем случае ещё удобно что WebStorm открывает картинку корректно.
Целью статьи было вообще рассказать как исправить корявый экспорт фигмы, а уже применять это или нет, действительно зависит от задачи.
Это самый сложный и бесполезный костыль, который я когда либо видел
Глассморфизм и SVG