Figma: как экспортировать в svg angular gradient

Есть в Figma одна проблема: при попытке экспорта элементов c угловым градиентом (Angular gradient) в формате svg мы получаем вместо градиента сплошную заливку. В этом посте расскажу, как быстро и легко решить эту проблему.

При попытке экспорта фигма пытается обернуть Angular gradient в тег radialGradient и мы получим вот это:

Дело в том, что в svg нет углового градиента, вот что внутри svg, который отдает figma:

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20C0 8.9543 8.95431 0 20 0C31.0457 0 40 8.9543 40 20ZM7 20C7 27.1797 12.8203 33 20 33C27.1797 33 33 27.1797 33 20C33 12.8203 27.1797 7 20 7C12.8203 7 7 12.8203 7 20Z" fill="url(#paint0_angular_1_6)"/>
<defs>
<radialGradient id="paint0_angular_1_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20 20) rotate(90) scale(13 13)">
<stop offset="0.998029" stop-color="#9F00BF" stop-opacity="0"/>
<stop offset="0.998129" stop-color="#9F00BF"/>
</radialGradient>
</defs>
</svg>

Гугление figma how to export svg angular gradient выдает одно решение - экспорт в растровом формате.

Однако, есть способ, как можно создать угловой градиент внутри svg без увеличения размера файла:

-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+<clipPath id="clip">
 <path d="M40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20C0 8.9543 8.95431 0 20 0C31.0457 0 40 8.9543 40 20ZM7 20C7 27.1797 12.8203 33 20 33C27.1797 33 33 27.1797 33 20C33 12.8203 27.1797 7 20 7C12.8203 7 7 12.8203 7 20Z" fill="url(#paint0_angular_1_6)"/>
-<defs>
-<radialGradient id="paint0_angular_1_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20 20) rotate(90) scale(13 13)">
-<stop offset="0.998029" stop-color="#9F00BF" stop-opacity="0"/>
-<stop offset="0.998129" stop-color="#9F00BF"/>
-</radialGradient>
-</defs>
+</clipPath>
+<foreignObject id="paint0_angular_263_94" x="0" y="0" width="40" height="40" clip-path="url(#clip)">
+<div style="background-image: conic-gradient(from 180deg, #9F00BF 0%, #9F00BF00 100%);width: 40px;height: 40px;" xmlns="http://www.w3.org/1999/xhtml" />
+</foreignObject>
 </svg>

Что мы сделали?

1. Убрали заливку

2. Обернули path в clipPath

3. Заменили radialGradient на foreignObject и внутри него нарисовали div элемент по размерам viewBox и стилизовали обычным css в котором уже есть conic-gradient - с помощью него можно повторить Angular gradient из figma.

4. enjoy