IllustratorでSVGスプライトをつくってみよう
前回、SVGスプライトの構造と仕組みから編集方法までを書かせていただきました。
今回はIllustratorを使ってオリジナルのSVGスプライトを作成する方法を書いていきます。 SVGスプライトの作成は、Illustratorで作成→SVGファイルをテキストエディタで編集の2工程で行います。
Illustratorでの作業は実のところcssスプライト用の画像をつくるより簡単です。 作成時のポイントは「アートワークを全部重ねて作成する」です。
ドキュメントの設定
- 「Webドキュメント」
- 「カラーモード：RGB」
- 「ドキュメント設定」→「アートボード」→「単位：ピクセル」
以上の設定で作成します。
次に、「トリムエリアツール」で先にキャンバスサイズを決めてしまいましょう。
キャンバスサイズは作成するアートワークすべての中の最大サイズで指定します。
※正方形と長方形のものがあるなら長方形のサイズをキャンバスサイズに指定
サイズの指定はドラッグでやるより、幅/高さを「数値で指定して」決めるのが良いでしょう。
※この時単位をピクセルにしておくことで仕上がりサイズが意図した通りのサイズに仕上がります。
アートワークの作成～書き出し
ここまで設定が完了したら、使いまわしたいアートワークをすべてこのトリムエリア内に作成していきましょう。 このように、アートワークは全部重ねて作成して下さい。一つのアートワークを作成したらそのオブジェクトを非表示にして、次のアートワークを作成…といった流れで製作していきます。
cssスプライトではそれぞれのアートワークを等間隔なりで並べますが SVGスプライトではそれぞれのアートワークの位置関係を考える必要性が皆無です。 また、並べておくとそれぞれのアートワークのviewBoxを自前で計算したうえでの指定が必要になり、二度手間になります。
ここまでできたらいつも通り、SVGへ書き出ししましょう。
書き出し設定は「SVGをつくってみよう！」の『書き出し時の設定』で紹介した設定そのままでOKです。
書き出し後の処理
書きだした状態そのままでは全アートワークが重なっているだけなので、ちょっと一手間加える必要があります。
書き出したファイルをまたテキストエディタで開きましょう。
ハイライトしてある箇所に注目して下さい。
この要素は「複合シェイプ」を書き出した要素です。「複合パス」ではg要素は生成されませんが、パスファインダなどで作成した「複合シェイプ」ではg要素が余分に生成されます。
こちらが各オブジェクトがどの要素なのかを示した図です。
ちょうど順序が逆になると覚えておくと良いでしょう。
※Htmlやxmlでは後に書いた方が重なり順が上になる為
スプライトデータ化の設定
ではこの通常のSVGデータをスプライトデータにする為の編集を行っていきましょう。
「SVGスプライトをつくってみよう1」の『SVGスプライトの構造』箇所でお話ししていた構造に編集していきます。
必要な工程は以下の3つです。
- svg要素以下の全要素をdefs要素で包む
- 各要素（アートワークオブジェクト）ごとにg要素で包む
- 各要素（アートワークオブジェクト）ごとに一意のidを付与
スプライトファイルを非表示に
まずはdefs要素でsvg以下の全要素を包み、各要素ごとにg要素でwrapしていきましょう。
※もしくはsymbol要素に書き変えても良いでしょう。（symbol要素であればdefs要素で包まなくとも表示されません）
symbol要素での作成方法については後述しています。
それぞれのアートワークにidを付与
SVGのuse要素でそれぞれのアートワークを呼び出すためにはxlinkで呼び出したいオブジェクト（アートワーク）のidを指定する必要があります。 一つ一つの要素に対して一意のidを付与していきましょう。
こんな感じでwrapした各要素へidを付与していきます。
id名はお好みで大丈夫ですが、使用する際のことを考えてアートワークの形状がイメージできる名称にしておくとよいでしょう。
このように共通の頭文字や接頭語をつけておくのも「これはスプライト用のidですよ」ということが一目で分かりやすいので管理上良いかもしれません。
以上でスプライトデータ化は完了です。
仕上げとしてブラウザチェックもしましょう。
symbol要素で作成する場合
基本的に作成方法はほとんど変わらず、g要素の箇所をsymbol要素に置き変えて考えればOKです。
ただし、symbol要素は個別のviewBox属性を持ちます。
こちらのように、各個にviewBox属性を付与しましょう。
それぞれのサイズを一定にしてあればここで指定するviewBoxの値はすべて同じでOKです。
※横並びのままで作成していると、ここで各要素ごとにviewBoxの始点x,y座標が違ってくることになります。その為、すべての要素ごとにviewBoxの始点座標を計算して記述していくという手間が生まれます。
symbol要素で作成する場合も以上で完了です。
仕上げにブラウザチェック
作成したスプライトデータが実際にちゃんと機能するかどうかをチェックしておかなければ、本番で「あれ、表示されない・・？」ということもあるかもしれません。
本番環境で表示されない場合、Htmlファイル側の記述に問題があるのか、cssの指定に問題があるのか、SVGデータ側に問題があるのか…といったように検証しなければならない項目が増えてしまいますので、この段階で表示チェックをしておいたほうが後々の作業効率が良くなるでしょう。
SVGスプライトファイルをそのままブラウザへ持っていっても何も表示されません（そう設定しているだけに）。「use要素」を追記して、その指定した要素が正しく表示されるかをチェックしましょう。
チェック方法は以下に2通り紹介させていただきます。お好みでどうぞ。
インブラウザで済ませてしまう
チェック方法はインブラウザで直接SVGファイル内にuse要素を追記する方法でも良いです。
この場合はsvg要素のviewBoxも拡大しましょう
親要素にあたるsvg要素にもviewBoxがあるため、複数を同時にuse要素で呼び出した際にはみ出た部分は上の画像のように表示されません。
手堅くhtmlファイルに埋め込んでチェック
案外インブラウザで触るより、ひな形のhtmlファイルを一つつくっておいてそこで検証するほうが楽かもしれません。
ひな形のhtmlファイルは「SVGをつくってみよう！」の『まとめ』の少し上にある「忘れず表示チェック」の箇所のコードを使っていただければと思います。
あとは使用時のケースバイケースでお好みで内容を編集していただければ良いかなと。
htmlファイルでの検証は本番環境と同じ状態をつくれるので、確実性を求めるならばこちらがおすすめです。
まとめ
cssスプライトより面倒？
データ完成までの工程数を考えると、作成時の手間はcssスプライトより面倒かもしれません。ただ、使用時とその後のメンテナンスは圧倒的にSVGスプライトに軍配が上がります。
最初に楽をするか、後に楽をするかの違いかな・・と思います。
しかしながら、SVGスプライトはかなり様々な応用ができるので、今後の製作にとり入れていくと複雑な処理を非常に簡単に作成できたりもします。基礎を一通り書き終えたらそういった部分もお話ししていけたらと考えています。
Comments