Figma から美しい svg アイコンを書き出したいときに遭遇しがちなこと

Figma でデザインにも実装にも便利なアイコンライブラリを作る機会が増えている
そんな中、Figma から書き出したアイコンファイルに <clipPath> や <mask> が混入することがある
アイコンは基本単色で1つのパスさえあればいいため、<clipPath> や <mask> は不要なことがほとんど

混入した場合、以下の影響がある

• インラインで svg を配置した際に、id 属性が他の要素に影響することがある
• 単純にファイルサイズが大きくなる

<clipPath> や <mask> が混入していない美しい svg アイコンを書き出すため、遭遇しがちなケースごとに解決方法を書く

はみ出てないのに clipPath が入る (パスが回転している)

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_3)">
<path d="M32.4853 15.5147L28.2426 19.7573H39.5564V8.44364L35.3137 12.6863C29.0629 6.43545 18.9371 6.43545 12.6863 12.6863C10.466 14.9066 9.05177 17.6219 8.41537 20.4645H12.5449C13.0823 18.6543 14.0864 16.9431 15.5147 15.5147C20.1958 10.8337 27.8042 10.8337 32.4853 15.5147ZM39.5846 27.5355L35.4551 27.5355C34.8894 29.3457 33.9136 31.0569 32.4853 32.4853C27.8042 37.1663 20.1958 37.1663 15.5147 32.4853L19.7574 28.2426H8.44366V39.5563L12.6863 35.3137C18.9371 41.5645 29.0629 41.5645 35.3137 35.3137C37.534 33.0934 38.9482 30.3781 39.5846 27.5355V27.5355Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_0_3">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>

(Material Icons の Autorenew を拝借し、45度回転)

パスがはみ出てないはずなのに clipPath でクリッピングされてた svg が出力された場合、パスが回転していることがある
今回の場合、中のパスをクリックしてみると、45度に回転している
「アートボード外にはみ出ている部分があるからクリッピングしないと」と Figma は考えたのである

解決方法

真上からパスを覆う新しいパスを配置し、Intersect Selection でパスを処理する

回転がリセットされ、アンカーポイントが再計算されたパスができあがる

mask が入る

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_0_3" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
<rect width="48" height="48" fill="#F88C8C"/>
</mask>
<g mask="url(#mask0_0_3)">
<path d="M22 36H26V32H22V36ZM24 4C12.96 4 4 12.96 4 24C4 35.04 12.96 44 24 44C35.04 44 44 35.04 44 24C44 12.96 35.04 4 24 4ZM24 40C15.18 40 8 32.82 8 24C8 15.18 15.18 8 24 8C32.82 8 40 15.18 40 24C40 32.82 32.82 40 24 40ZM24 12C19.58 12 16 15.58 16 20H20C20 17.8 21.8 16 24 16C26.2 16 28 17.8 28 20C28 24 22 23.5 22 30H26C26 25.5 32 25 32 20C32 15.58 28.42 12 24 12Z" fill="black"/>
</g>
</svg>

(Material Icons の Help Outline を拝借)

解決方法

マスクされている側のレイヤーを削除する