🎨

切り抜き文字のSVGファイルがブラウザで表示されなかった件

2023/01/08に公開

Illustrator

仕事でカタカナ１文字のアイコンを作って社内サイト内に表示させて欲しいと言われました。
その際、初めてIllustratorを用いて、SVGファイルで切り抜き文字を作りました。作成したアイコンをGoogle Chromeで確認したところ、問題なく表示できた！と思っていたのですが、後日Fire foxでは表示されていないということに気づきました。

なんでアイコンが表示されないんだ？と意外と手こずってしまったので、この記事では今回の件で学んだsvgファイルを作る際の注意点について記述していきます。

結論

結論としては、自分が作成した切り抜き文字をpngやjpegのようなピクセルベースのファイルと同様に考えてしまっていたことが問題でした。作成した文字はフォントが決まっているテキストとして表示されており、そのフォントはGoogle Chromeでは用いることができたが、Fire foxでは用いることができなかったというだけの話でした。

SVGファイルとは

adobe|svgファイルについてによると、

Scalable Vector Graphics（SVG）は、webに適したベクターファイル形式です。JPEGなどのピクセルベースのラスターファイルに対し、ベクターファイルは、グリッド上の点と線にもとづいて数式を使用して画像を保存します。つまり、SVGなどのベクターファイルは、品質を損なわずにサイズを大幅に変更できるため、ロゴや複雑なオンライングラフィックに最適です。

とのことです。

要は、絵の作り方として、ピクセルとベクターの違いは以下のようなイメージになるかと思います。
（図とかないとわかりづらいですね😓）

ピクセル
紙を細かく方眼紙のような線で区切って、色を塗っていく。どこにどんな色が塗られているかがファイルに記述されている。
ベクター
計算式に基づいて紙に絵を描いてくれる。ファイルには計算式が記載される。

ベクターファイルのメリットとしては、拡大縮小しても画像の品質を保てるということだと思います。今回ベクターファイルを用いたのは、作成したアイコンが埋め込まれる場所以外にも社内サイトにアイコンが配置されており、それがベクターファイルだったので統一しようということで使用しました。

svgファイルだとファイルの中身が以下のようなコードで記述され、画像編集ソフトなど使わなくても、コードの値を書き換えれば、画像を変更することができます。

<svg viewBox="0 0 1200 1200" version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 1200 1200;" xml:space="preserve"><style type="text/css">.st0{clip-path:url(#SVGID_00000134244882388884979280000017409165602556999301_);fill:#FFFFFF;}</style><g><g><defs>
	<path id="SVGID_1_" d="M305.4,594.7l148.4,62.5l-152.3,386.7l-171.9-70.3L305.4,594.7z M153.1,391.6h351.6l11.7-195.3l171.9-7.8l-11.7,203.1h171.9c-26-18.2-43-39.1-50.8-62.5c-7.8-20.8-10.4-44.3-7.8-70.3c10.4-49.5,39.1-82,85.9-97.7c13-2.6,26-3.9,39.1-3.9c20.8,0,40.4,5.2,58.6,15.6c28.6,13,48.2,33.9,58.6,62.5c5.2,15.6,7.8,32.6,7.8,50.8c0,20.8-3.9,39.1-11.7,54.7s-26,32.6-54.7,50.8h50.8l3.9,148.4l-355.5-7.8l3.9,535.2l-195.3-3.9L496.8,540l-347.7,31.2L153.1,391.6z M852.3,598.6l171.9,371.1l-168,66.4L703.9,649.4L852.3,598.6z M903.1,364.2c31.2,5.2,57.3-6.5,78.1-35.2c15.6-23.4,18.2-48.2,7.8-74.2c-10.4-23.4-27.3-37.8-50.8-43c-31.2-7.8-57.3-2.6-78.1,15.6c-20.8,20.8-27.3,48.2-19.5,82C851,340.8,871.8,359,903.1,364.2z"/></defs>
	<clipPath id="SVGID_00000095318299104032877110000015831382144206533780_"><use xlink:href="#SVGID_1_"  style="overflow:visible;"/></clipPath>
	<rect style="clip-path:url(#SVGID_00000095318299104032877110000015831382144206533780_);fill:#FFFFFF;" width="1200" height="1200"/></g></g>
</svg>

IllusratorでSVGファイル作成

正直私は実務でもあまりIllustratorを使用することがないため、Illustratorの使い方は未だによくわかっていません。操作方法はこれから紹介するリンクのまんまとなるので細かくは説明しません🙇‍♂️。

切り抜き文字の作成

以下リンクのクリッピングマスクを利用した方法で切り抜き文字を作成できます。
Illustratorで文字の形で切り抜いたり型抜きする3つの方法
ただこのままでは、切り抜き文字がフォントを持ったテキストとして出力されるようなベクターファイルになります。アイコンが表示されないで悩んでいた私は、ここまでしか実施していませんでした。

アウトライン化

異なるブラウザで同じ見た目の文字を表示させるためにはこれが必要でした。
以下リンクを参考に切り抜き文字に対してアウトライン化を実行しました。
アウトライン化とは？イラレ必見の技３選

アウトライン化とはつまり、文字情報から図形情報に変換するということですね。少しややこしいのですが、図形情報にはなるけど、ピクセルベースのデータになるわけではなく、あくまでsvgのベクターファイルであるということは勘違いしないでいただきたいです。アウトライン化の実施により、ブラウザによってフォントが違う状態で表示されたり、表示されなくなることを防ぐことができます。

おまけ (svgファイルの圧縮)

実行しなくても問題はないですが、svgファイルのコードは圧縮した方が、アプリの負担を少しでも削減できるかなと思って以下リンクで圧縮しました。
svgファイルの圧縮

最後に

私は、Illustratorの扱いなどは素人ですが、とりあえず文字のベクターファイルがブラウザによって表示が違ったり、表示されないということに悩んでいる方がいれば、参考にしていただければ幸いです。