Figmaで書き出したSVGの形が崩れるときの対処法

#Figma#HowTo#Inkscape#Windows
投稿日:

どういう状況か

FigmaでエクスポートしたSVGは、ときどき形が崩れてしまっていることがあります。

たとえば、この画像。上がFigmaで作った元のデザインで、下がSVGにエクスポートしたものです。濁点のオレンジの部分が繋がってしまっていたり、「ろ」や「ぼ」の線の角が丸まってしまったりしています。

Figmaの元データとエクスポートしたSVGの比較画像

Figmaで作成したデザインをSVGにエクスポートすると、たびたびこういった問題が起こります。

対策

FigmaのデザインデータをSVGにエクスポートすると形が崩れてしまう問題は、PDFを経由することで回避できます。

FigmaからPDFにエクスポート→PDFをSVGに変換、という流れです。

ここからは、詳細な手順を説明します。

1. PDFにエクスポート

まず、Figmaで作成したデザインをPDFにエクスポートします。通常のエクスポートの設定で、ファイル形式としてSVGの代わりにPDFを指定します。

エクスポートの形式としてPDFを指定したようすのスクリーンショット

2. PDFからSVGに変換

エクスポートしたPDFをSVGに変換します。変換に使うソフトは何でもいいのですが、ここでは例としてInkscapeを使います。

WindowsでPDFをInkscapeを使って開く方法は2つあります。1つ目は、右クリックから[プログラムから開く]を使う方法です。[別のプログラムを選択]からInkscapeを選択します。

[常に表示する]を選択すると、今後PDFを開くときは自動的にInkscapeが開くようになります。たいていの場合はPDFビューワーで開いた方がいいと思うので、[一度だけ]を選択します。

エクスプローラーでPDFファイルを右クリックしたようす
PDFを開くアプリを選択する画面

InkscapeでPDFを開くもう1つの方法は、Inkscapeを起動してメニューの[ファイル]から[開く]をクリックし、PDFファイルを選択する方法です。この2つのどちらの方法を使っても構いません。

どちらの方法を使った場合でも、[PDFインポート設定]という画面が出てきます。この設定画面では、[Poppler/Cairoをインポート]を選択してください。

[PDFインポート設定]のスクリーンショット

[Poppler/Cairoをインポート]の代わりに[内部インポート]を選択すると、画像のように文字が2重になる場合があります。そのため、必ず前者を選択してください。

ロゴの文字が2重になってしまっている画像

InkscapeでPDFを開けたら、あとは[名前を付けて保存]から[Inkscape SVG]か[プレーンSVG]を選択して保存するだけです。

[名前を付けて保存]の画面
保存先の設定画面

プレーンSVGを選択した場合、変換後にInkscapeを閉じようとすると、「データの破損を起こす可能性があるためInkscape SVGで保存しますか」みたいなことを聞かれます。今回は変換に使っただけなので、Inkscape SVGにせずにそのまま閉じてしまって大丈夫です。

完成

画像のとおり、元のデザインに忠実なままSVGへ変換できました。

元のデザインと変換後のデータの比較

注意点

Figmaをアウトライン表示にすると分かりやすいのですが、この記事で紹介した方法を使って変換したSVGのデータは、とても汚いです。上が元のデザインデータ、下が変換後のSVGをFigmaにインポートしたものです。

見た目に支障はありませんが、パスがぐちゃぐちゃしているということは頭の片隅に入れておいた方がいいかもしれません。

変換前と変換後のアウトラインの比較
Xに共有する LINEに共有する Threadsに共有する Misskeyに共有する Blueskyに共有する
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。