2018/04/05

Webフォントに変換できるアイコンを作成する<第2部>

こんにちは、ドリーム・アーツのプロダクトデザイン本部でビジネスチャット「知話輪®」のPC版アプリを担当している@rettar5です。

第1部ではWebフォント変換環境を構築しましたが、今回は構築した環境で変換できるアイコンの作成についてお話しします。

というのも、実は、前回構築した環境ではうまく変換できないSVGファイルがあります。
最初は「変換できるファイルとできないファイルがあるのは一体なにが違うんだろう?」と、原因がわからず悩んでいました…。
そこで、いろいろ試してみたところ、SVGファイルのパスのアウトライン化と、書き出しの方法にポイントがあることがわかりました。


(1) アウトライン化

まずはこちらの画像をご覧ください。

SVGファイルをブラウザで表示した画像

2つともIllustratorからそれぞれ異なる手順で書き出したSVGファイルです。
ブラウザで表示するとどちらも同じように見えますが、前回作成した環境を使ってフォントに変換すると、下のように表示されます。

フォントに変換した後の画像

画像Aのチェックマークは三角形になり、横線三本は消えてしまい…。
ぱっと見ただけでも変換がうまくいっていないことがわかります。
実はこの2つのSVGファイルには、書き出す前にアウトライン化をしたかしていないかという違いがあります。

Illustratorの画面キャプチャ

左の編集画面では「パスを中心に」線を引いていますが、右の編集画面では「パスの間を塗りつぶす」ように線が引かれています。
パンフレットやフライヤーなどを印刷されている方にとって「アウトライン化」は馴染みのある作業のようですが、プログラムを書いていただけの自分には初めての単語でした。
Illustratorでは、アプリ上部の「オブジェクト」 > 「パス」 > 「パスのアウトライン」から選択することで、パスをアウトライン化できます。

Illustratorのアウトライン化手順

(2) SVGファイルへの書き出し

IllustratorでSVGファイルを書き出すには、「別名で保存」や「スクリプトから書き出し」などによる方法がありますが、ブラウザで表示すると同じように見えても、「スクリーン用に書き出し」を使うと、左の画像のようにうまく変換できないケースがあります。

フォントに変換した後の画像

先程の「アウトライン化」しないものと比べればマシになったように見えますが、なぜか線の両端や角が内側に丸まっています。
この問題は、アプリ上部の「ファイル」 > 「別名で保存」からSVGファイルを書き出すことで解決できます。

Illustratorの別名で保存1

Illustratorの別名で保存2

Illustratorの別名で保存3

「スクリーン用に書き出し」でもSVGファイルを書き出す際のオプションを指定することができるため、設定次第では「スクリーン用に書き出し」でもうまくいくケースがあるかもしれません。
(自分は見つけることができませんでした…)

Illustratorの別名で保存3


ということで、全2回に渡り「Webページ上にベクターのアイコンを表示する」というチャレンジをご紹介しました。
一度作ってしまえば、今後は手順通り書き出してコマンドを実行するだけで済むので、アイコンを追加する際も非常に楽になります。
ぜひお試しください!

ベクターのアイコンをWebフォントに変換する環境をつくる<第1部>はこちら