Webフォントを1からがっつり作る人はそれほど多くないと思いますが、サイトロゴやカテゴリを示すマークなんかをちょこちょこっとドローデータで表示したい要望は多いんじゃないでしょうか。
Illustratorなどのドローツールが使えればSVG出力してWebフォントを作ることはそれほど難しいことではありません。しかし、いざHTMLに埋め込んでみると環境によっては変なゴミが出てびっくりすることがあります。
原因は単純で、単に作業中レイヤーの消し忘れです。中にはIllustratorによって自動挿入されるタグや改行などもあり、これらの付加データ容量が結構バカになりません。
コツが分かると簡単に消せるので、スッキリさせてしまいましょう。
SVGファイルの見えないゴミ
SVG形式の本質はテキストデータです。ドローイングによって作られた座標がそのまま記録されています。
Illustratorなどでパスを作って書き出せばOK…な筈なんですが、ここで注意点が2点ほどあります。
トリムマークの外側にアートワークが残ってないか
試しに手元のSVGファイルを開いてみましょう。
Chromeなどデベロッパ向けの検証ツールがあるブラウザでSVGファイルを開き、記述されてる要素が全て必要なデータかどうかを確認します。
SVGをつくってみよう！[初級編] | Design Report – デザインレポート
すると何でもないように見える画像でも、表示領域をずらすことで領域外に無駄なデータが入っていることがあります。編集途中の画像が残ってて、そのまま書き出されちゃったんですね。
内包する余分なデータは、表示されなければ単に重くなるだけなんですけど、場合によっては領域外のデータを表示するブラウザもあります。思わぬ表示崩れを引き起こすことがありますし、何より恥ずかしい～。(；・`д・´)
書き出し設定は最適化されているか
あとは、書き出し設定の最適化が行われているかどうかです。言ってみれば解像度設定のようなもので、不要レイヤーを消してオプションを見直すだけでもかなり小さくなるでしょう。
高解像度が必要なら多少データサイズが増えても仕方ないし、ワンポイント程度なら一番小さくなるように調整する方針で良いと思います。
SVG画像をテキストエディタで編集する
具体的にSVG画像を縮小する方法について見ていきます。ばっさばっさとデータを削っていくので、作業はバックアップを取ってから始めて下さい。
SVG形式の本質はテキストデータなので目視による編集が可能です。ブラウザのコンソールなどで使われてないデータを見極めて消去すればファイルサイズは軽くなるでしょう。
アートワーク単位の大きなブロックを消す
テキストエディタやブラウザの開発用コンソールからデータの中身を確認します。
コードとレンダリング結果を見比べながら、不要となるブロックを見つけたらどんどん消しちゃって下さい。一通り消したら、編集済みのデータを保存して元のファイルと差し替えます。
細かい改行やタグを消す
1バイトでも減らすのが正義という方は、さらに改行コードやグループレイヤーなどのタグを削ることも可能です。
ある程度規則性があるようなら一気に置換しても良いでしょう。一つ一つは小さく見えても、まとまると結構スリムアップになります。CSSやJavaScriptの難読化と発想は同じですね。
最終的にデータが壊れてないかどうかブラウザで表示確認するのを忘れないようにして下さい。
データ構造を把握すれば一ファイルあたりの処理は数分で済みます。ファイル点数が少ないときは手作業でも大したことないんですけど、作業頻度が多い場合はゴミ取りツールを検討するなどしてみて下さい。
SVGデータの出力設定
前章では「既にあるデータから要らないコードを消す方法」でしたが、今度は作成時に無駄なコードを出さない設定について考えます。
SVG画像を作るときの基本
SVGファイルの作成とは言っても、Illustratorによる一般的なドローイングによるアートワークと変わりません。必要なパスを作成し、出力の際にSVGとして書き出すだけです。
しかしこれまで書いてきた通り、通常なら出力されないはずの「トリムゾーン外側のデータ」や「非表示レイヤー」が曲者です。こっそり紛れ込んでデータを重くしたり、サイズ調整などの際に悪さをすることがあります。完パケに必要ないデータは全部消してから出力しましょう。
あと、入り組んだ部分は複合パスでまとめておくと記述が簡潔になります。この辺は好みの問題もあるのでいろいろ試してみて下さい。
IllustratorでのSVG出力設定例
以下にIllustratorでSVGを出力するときに選べるオプションを書き出してみました。
| プロファイル | SVG1.1 |
|---|---|
| 文字 | SVG ※再現性は劣る |
| サブセット | なし（システムフォントを使用） |
| 画像 | リンク |
| Illustratorの編集機能 | 保持しない |
| CSSプロパティ | スタイル要素 or スタイル属性 ※画風による |
| 小数点以下の桁数 | 3 ※用途によっては1でも |
| エンコーディング | Unicode |
| チェックボックス | <tspan>の出力を制御 |
簡易設定になってるときは詳細設定を参照して下さい。オプションの主なポイントは、ベクターの描画点をどこまで細かく取るかです。
一番のポイントは最初からぶれの少ないベジエを引くことですが、それはまたいずれ。
CSSプロパティ
各要素はCSSによる装飾が可能です。
一方、「スタイル属性」は色などの要素があらかじめインラインで書き込んであります。後で色々いじるときは上書きする形です。
その点「スタイル要素」はクラスだけ割り振ってあるので、後でまとめて指定出来ます。容量としても小さくまとまって良い感じ。特にWebフォントなどの小さな図案はスタイル要素が向いてるでしょう。
…とは言え画風や用途に応じて多少使い勝手が違うので、ケースバイケースで使い分けます。
小数点以下の桁数
ポインタの基準座標をどこまで細かく取るかという指定です。桁数が大きくなる（最大で小数点以下7桁まで）とそれだけテキスト容量もレンダラーの計算量も増えますから、こちらもお好みで。
こちらも張りのあるベジエを引くと、桁数が少ないときでも変なねじれが発生しなくなる気がします。
おわりに
SVGに紛れ込んだゴミレイヤーは、環境によって表示されたりされなかったりでレイアウト崩れの原因になります。いずれにせよ不要なデータが残ってて得することは何もないので、気付いたらどんどん消してしまいましょう。
これまで要らないデータはIllustratorに戻らないと消せないと思ってたんですけど、テキストエディタで消せることを知ったので古いデータの修正が楽になりました。
例えば、おち研のロゴに使ってるSVGファイルは標準保存形式の12KBから4KB台まで減りました。ほぼ見た目を損なうことなく6割ほど削ったことになります。
一つ一つの容量変化は大したことがないかも知れませんが、サイトのコアデザインに使われることが多いSVGは一日の転送データ総量で考えるとバカにならない数字になります。全体のパフォーマンスにも影響しますし、地味に容量を圧迫する要因にもなりますよね。
割と誰得情報な気がしないでもないのですが、参考になったらリアクション頂けると喜びます。_(:3 」∠)_
コメントをどうぞ(´ω｀*)