Всем привет. Я Андрей Осипов, фронтендер из Контура. Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass).

Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.

Дело в том, что при глассморфизме какой-либо элемент иллюстрации делается прозрачным, а часть изображения за этим элементом размывается. И вот что происходит при экспорте в SVG:

Эффект просто напросто пропадает. Согласитесь, без него уже как-то что-то не то.

При этом экспорт в растровые форматы (PNG, JPEG) работает корректно. Не буду здесь расписывать все плюсы использования SVG перед растровыми форматами, могу лишь сказать, что этих плюсов на мой взгляд достаточно много, чтобы заморочиться и постараться разобраться в проблеме.

Ищем больное место

Я был уверен, что эффект размытия в SVG есть и работает, так как встречал изображения с этим эффектом. Давайте разбираться. Для примера я взял изображение из старого брендбука с женщиной, держащей стеклянное программное окошко.

В фигме этот эффект делается просто применением эффекта Background blur.

Однако после экспорта в SVG оно выглядит примерно так.

SVG удобен тем, что это текстовый формат на основе XML, а значит увлеченному фронтендеру не так сложно с ним разобраться. Давайте попробуем заглянуть внутрь и посмотрим что там случилось. (см ill-01-people-prize.svg)

Внутри находится множество команд, описывающих форму и отображение элементов иллюстрации. В данном изображении используется множество тегов <path>, которые позволяют нарисовать произвольную форму различными методами, как правило кривыми Безье. А также могут встречаться отдельный команды, описывающие примитивные формы. В данном примере в самом начале используется <rect>, чтобы задать прямоугольный фон с серой подложкой. Формы могут объединятся в группы тегом <g>.

Однако нас больше интересует специальная секция <defs>, где записаны команды, которые не отображают конкретные элементы, однако служат для описания фильтров, масок и черт знает чего ещё. Они могут быть применены через атрибуты к элементам форм и групп.

Давайте попробуем отыскать нужный нам эффект. Найти нужный элемент нам помогут dev tools браузера:

Элемент со стекляшкой обернут в группу, к которой применен фильтр filter1_bd_4171_33259.

Команды фильтров применяются последовательно и могут принимать на вход с помощью атрибута in различные варианты изображения элемента благодаря ключевым словам. Промежуточный результат может сохранятся с помощью атрибута result и также может быть передан в атрибут in следующих фильтров. Если у команды явно не указан in, она берет на вход результат предыдущего фильтра. Давайте теперь разберем этот фильтр.

<filter id="filter1_bd_4171_33259" x="213" y="390" width="461" height="325" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <desc>
        feFlood заливает область фильтра цветом, 
        но в данном случае он заливает прозрачным
        Я так и не понял для чего нужно это преобразование. 
    </desc>
    <feFlood flood-opacity="0" result="BackgroundImageFix" />
 
    <desc>
        Берем фоновое изображение, блюрим и потом используем альфаканал элемента в качестве маски,
        чтобы обрезать заблюренный фон по форме элемента. Потом сохраняем результат в переменную
        "effect1_backgroundBlur_4171_33259"
    </desc>
    <feGaussianBlur in="BackgroundImage" stdDeviation="12" />   
    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4171_33259" />
 
    <desc>
        Далее ещё несколько хитрых манипуляция, чтобы сделать тень
    </desc>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
    <feOffset dy="16" />
    <feGaussianBlur stdDeviation="24" />
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
 
    <desc>
        Накладываем размытый фон на тень
    </desc>
    <feBlend mode="normal" in2="effect1_backgroundBlur_4171_33259" result="effect2_dropShadow_4171_33259" />
 
    <desc>
        Накладываем получившийся результат на оригинальный элемент
    </desc>
    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4171_33259" result="shape" />
</filter>

Вроде всё чётко и должно работать. Но после танцев с бубнов вокруг этих фильтров можно заметить, что не работает атрибут in="BackgroundImage", при этом он описан в спецификации. Также там написано, что надо навешивать атрибут enable-background на элемент для работы этого фильтра. Однако даже в примерах из спецификации оно не работает. Я попробовав всяко разно, тоже результата не добился. Получается, браузеры по какой-то причине не поддерживают эту фичу, а значит мы не можем использовать фон в фильтрах.

По сути in="BackgroundImage" берет копию фоновой части изображения. И мы ведь можем сделать тоже самое, просто скопировав все элементы, находящиеся под стеклом. Объединить их в группу, применить к ним размытие и обрезать по форме стекла. Однако копировать столько элементов вручную выглядит как-то не рационально.

Режем стеклом

Каюсь, дальнейшее решение мне помог найти stack overflow.

Тег <use href="#target"> позволяет нам копировать элементы по ссылке, в том числе и группы. Если мы объединим в группу все находящиеся под стеклом элементы, то сможем скопировать фон. Группируем всё, что находилось до стекла, в слой backlayer, копируем и применяем к нему простой фильтр с размытием.

<g id="backlayer">...</g>
<use href="#backlayer" filter="url(#blur)" />
<path d="..." fill="url(#paint0_linear_4171_33259)" filter="url(#filter1_bd_4171_33259)"/>
...
<defs>
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blurred" />
    </filter>
    ...
</defs>

Далее надо обрезать фон по форме стекла. В этом поможет атрибут clip-path. Ему нужно передать ссылку на элемент <clipPath>, который должен содержать нужную форму. Создадим такой элемент, а внутрь скопируем форму стекла, используя тот же <use href="#target">.

<svg width="780" height="680" viewBox="0 0 780 680" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="backlayer">...</g>
    <use href="#backlayer" filter="url(#blur)" clip-path="url(#glassmask)" />
    <path id="glass" d="..." fill="url(#paint0_linear_4171_33259)" filter="url(#filter1_bd_4171_33259)"/>
    ...
    <defs>
        <path id="glass" d="..." fill="url(#paint0_linear_4171_33259)" filter="url(#filter1_bd_4171_33259)"/>
        <clipPath id="glassmask">
            <use href="#glass"/>
        </clipPath>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blurred" />
        </filter>
        ...
    </defs>
</svg>

Итоговый SVG получился такой (см ill-01-people-prize-result1.svg)

Перфекционизм

Отлично, но есть ещё проблемка. У этой картинки был непрозрачный серый фон. И вот что будет, если его удалить и поместить иллюстрацию в место с произвольным фоном.

В большинстве случаев на этом можно остановится и забить на этот кейс, так как чаще всего у иллюстраций предсказуемый статичный фон, который можно захардкодить в сам SVG и всё будет работать. Однако я ради интереса пошел дальше.

Сразу предупрежу, что если вы помещаете иллюстрацию в место с произвольным неоднородным фоном, добиться того, чтобы этот фон размывался под стеклом невозможно, и это будет работать аналогично как и с PNG.

В приведенной выше иллюстрации на зеленом фоне проблема заключается в том, что сквозь размытую копию фона просвечивает оригинальный фон, и они накладываются друг на друга. Решением тут является вырезать из оригинального фона прямоугольник по форме стекла.

Использовать clipPath в этом случае уже не получится, ведь он позволяет только обрезать изображение по заданной форме. А нам надо наоборот вырезать. Поэтому в данном случае нам может помочь другая фича - маски. Маска также как и clipPath задается в секции <defs>и должна содержать монохромное изображение, где чем темнее тон, тем прозрачнее будет часть изображение, к которому применяется маска. Маска для нашего случая будет содержать белый фон и черную форму стекла.

<defs>
        ...
        <mask id="bkgMask">            
            <rect width="780" height="680" fill="#fff" />            
            <use href="#glass" fill="#000"/>
        </mask>
        ...
</defs>

В таком виде маска не заработает, так как у нашего стеклышка #glass уже есть заливка и переопределить её в <use> не получится. Решить это можно тем, что перенести оригинальную форму стелышка в секцию <defs> и оттуда уже использовать в нужном месте через <use>, применяя заливку и фильтр. В таком случае заливка применяется корректно.

...
<use href="#backlayer" filter="url(#blur)" clip-path="url(#glassmask)" />
<use href="#glass" filter="url(#filter1_bd_4171_33259)"  fill="url(#paint0_linear_4171_33259)" />
...
<defs>
        <path id="glass" d="..." />
        <mask id="bkgMask">            
            <rect width="780" height="680" fill="#fff" />            
            <use href="#glass" fill="#000"/>
        </mask>

Далее нам надо применить маску к фону. Если тупо применить её к группе #backlayer, то вырежется дырка. А в месте, где мы используем размытый фон, этого не надо. Поэтому можно обернуть #backlayer в ещё одну группу и применить маску к ней.

<g mask="url(#bkgMask)">
        <g id="backlayer">
            ...
        </g>
 </g>

Отлично, теперь этот SVG работает не хуже экспортированного PNG. (см. ill-01-people-prize-result2.svg)

К сожалению, такой подход работает не очень стабильно. И если всячески масштабировать изображение или если форма стекла имеет какую-то сложную форму, через его границы может начать просвечивать фон страницы. Может, и у этого есть какое-то решение, но я на тот момент устал бороться и ничего не придумал.

Дополнение

Тег <use href="#target" /> вроде как полноценно может работать не везде, так как относится к спецификации SVG 2. В моем случае, я столкнулся c тем, что такие SVG с аргументом href не может открыть WebStorm. Чтобы это починить, нужен фоллбэк к старой спецификации <use href="#target" xlink:href="#target" />. И чтобы он заработал, нужно добавить ссылку на спецификацию в корневой элемент <svg ... xmlns:xlink="http://www.w3.org/1999/xlink">

Выводы

Починить глассморфизм в иллюстрациях после экспорта фигмы возможно, и я рекомендую попробовать это делать там, где хотелось бы сохранить плюшки SVG. Если наловчиться, это делается достаточно быстро. Однако если хочется сохранить прозрачность в иллюстрациях, это может по-прежнему работать косячно в местах с этим эффектом. В идеале хотелось бы чтобы или в фигме починили экспорт или автоматизировать с помощью какого-нибудь плагина.