はじめに

僕は普段Androidアプリのアイコンを作成するときは、Affinity Designerを使用します。

しかし、Affinity DesignerでエクスポートしたSVGをAndroid Studioでインポートしたときに度々デザインが崩れてしまう現象が発生していました。

今回は、次のアイコンを作成したときに発生した問題について解決方法が見つかったのでまとめていきたいと思います。

Affinity Designerの問題

まずは、エクスポートした上記のSVGファイルをAndroid Studioで読み込んだときの画面をご覧ください。

お分かりの通り、カーブしている部分の丸みがなくなっていて、白い部分が重なってしまい表示が崩れていることがわかります。

実は、Affinity Designer以外のデザインツールとしてCanvaも普段使用しています。

このCanvaでアイコンと同じサイズでファイルを作成して、作成したsvgをインポートして配置します。

それを、再度SVGとしてエクスポートします。

そして、CanvaでエクスポートしたSVGファイルをAndroid Studioでインポートします。

じゃじゃーん！！！

なんと、先ほどの表示の崩れが修正されました！

もし、僕と同じようにAffinity DesignerとCanvaを利用している開発者の方で、やっぱりAdobe Illustratorを買わないといけないのか・・・という悩みを抱えている方は、一度上記の方法を試してみることをおすすめします！