SVGをつくってみよう！[初級編]
前回、SVGについての概要や利用方法などについて書かせていただきました。今回は実際に作成していく手順や作成時のポイントから、編集方法までをお話しさせていただこうと思います。
最初は簡単な例題から行っていこうということで
- 塗りはベタ1色～3色程度
- ドロップシャドウなどのアピアランスは無し
- リンクファイル（画像埋め込みなど）無し
のシンプルなアートワークで作成手順と編集方法を追っていくことにします。
（※色数が増えたり、ドロップシャドウ、グラデーションなどSVGフィルターの記述が必要なものは編集が少し複雑になるため、また改めて記事にさせていただこうと思います。）
SVGは主にIllustratorで作成可能です。 （Photoshop CCでは「画像アセット」を使って作成可能とのことですが、ペンツールは多分Illustratorのほうが扱いやすいと思います）
アートワークそのものの作成に関しては通常の作成と何ら変わらないので、いつも通りに作成していって問題ありません。
ポイントとしては、トリミングエリアがそのままSVGのサイズになります。
（画像として書き出す際と変わらないのでそこまで意識する必要はないかもしれませんが、あまり余分な余白をとりすぎないようにしたほうが使用時に使い勝手がよくなるかな・・？と個人的に思います。）
作成時のポイント
書き出しそのものは作成したアートワークを「別名で保存」からSVG（or SVGZ＝圧縮SVG）を選んで書き出すだけでOKです。
ただ、そのまま書き出すとサイズが大きくなりすぎたり不要な要素が大量に入ります。 そこで、書き出す前に以下のことを行いましょう。
- 不要なレイヤーを削除
- 非表示オブジェクト（ガイド含む）をすべて削除
- レイヤー効果は使用しない
- （※作成に慣れてきたら）ドロップシャドウなどのアピアランスも削除
空のレイヤーや非表示のオブジェクトもすべて要素内に書き出されてしまう為
使うオブジェクト以外はすべて削除しておきましょう。
※特にガイドの消し忘れに注意しましょう。
図中の非表示レイヤーのように「表示させるアートワークに直接は関係しないもの」はすべて削除します。 また、画像などを配置している場合もちょっと注意が必要です。（※後述）
3．は「画像化のお作法」でも言っていましたがレイヤー効果はそのグラフィック（レイアウト）ソフトの中だけの機能で、外へ持ち出すことはできません。（無効化される）
※「常にそのパーツはグラデーションで使用する」など、ケースによってはグラデーションくらいなら残しておいても良いかもしれません。
4．今回はアピアランス無しなので説明はありませんが、ドロップシャドウ、光彩、グラデーション（＋クリッピングマスク）などは「SVGフィルター」として書き出されます。ただ、Illustratorから直接書き出すとなかなかいびつな記述をしてくれるのでデータサイズが無駄に大きくなったり処理が無駄に多くなることになりがちです。
※「SVGフィルター」についてはまた中級編あたりであらためて書かせていただこうと思います。
書き出し時の設定
「別名で保存」からsvgを選び「詳細設定」をクリックします。
チェックポイントとしては上記の画像のようにするのがおすすめです。
| プロファイル | SVG1.1 |
| 文字 | AdobeCEF |
| サブセット | なし（※注1） |
| 画像 | 埋め込み |
| Illustratorの編集機能 | 保持しない |
| CSSプロパティ | スタイル属性（orスタイル要素※注2） |
| 小数点以下の桁数 | （※後述：注3） |
| エンコーディング | Unicode |
| 下6つのチェックボックス | <tspan>の出力を制御 |
このように設定するといいかなと思います。（※注2：お好みでどちらでも良いです。今回の説明では「スタイル属性」を選んだ場合で説明しています）
※注1 サブセットについて
テキストは基本的にアウトライン化して出力するほうが良いです。サブセットは生のテキストに対する設定なので、アウトライン化した場合このサブセットの設定は意味を持ちません。ただ、どうしても<text>要素を使いたいなら「なし」を選びましょう。 <text>要素はブラウザ間の表示の差が激しいのであんまり安定してない感が強いかな・・と思います。
テキストはアウトライン化
Webブラウザで表示可能なフォントではないフォントを使用していた場合、テキスト部分が他のテキストに置き変わってしまうのでアウトライン化しておくほうが無難です。
その際、小数点は1桁～3桁くらいまでにしておく（※注3）
よく「1桁で設定しよう」と書かれていますが、フォントなどを書き出す際は1桁ではちょっとギザギザ感が強く感じるので3桁くらいは入れたほうがいいかな・・と思います。 後で書いていますが、3桁以上でも書き出し設定だけでやるよりファイルサイズを大きく削る方法を紹介します。
各項目について詳しく知りたい方はこのあたりなどをご覧になってみるとよいでしょう。※参考Adobe SVGで書き出す方法
Illustrator Help / SVG 形式で書き出す方法
SVG画像を1キロバイトでも削るダイエット術！ – 聴く耳を持たない(片方しか)
SVGファイルを編集してみよう
書き出したSVGファイルはそのままでも使えますが、多くの場合まだ不要な要素が混じり込んでいたり、無駄が非常に多く混入しています。 これから紹介する方法で編集することでファイルサイズを最大 半分以下に減らすことができます。
また、SVGスプライトとして利用する場合にはこの作業は必須となり、 より扱いやすくデータをカスタマイズすることもできるので、ぜひ編集方法も覚えていきましょう。
SVGファイルの編集には以下の2つを使うのがお奨めです。
- テキストエディタ（Sublime Textなど同一文字列を一斉選択できるものだと作業が非常に楽になります）
- デベロッパーツール（特にChromeやwebkit・Blink系のものが好ましい）
まずはSVGファイルがどんな構造をしているのか知るために、書き出したSVGファイルを（文字コードを指定できる）テキストエディタなどで開いてみましょう。
（※この説明で使用しているのは「Sublime Text」です。）
ファイルを開くと難解な文字列がズラっと並ぶので身構えてしまいますが、今注目するのはこの中の赤く表示されている要素名の箇所だけでOKです。
とはいえ、このままいきなり編集するのはさすがにハードルが高すぎるので、ここで「デベロッパーツール」を使います。
お使いのブラウザにSVGファイルをドラッグしてみましょう。書き出しに成功していればこのように、ブラウザ上にさきほど作成したアートワークが表示されます。
「ソースを表示」でこのファイルのソースを見ると、テキストエディタで開いた文字列とまったく同じものが表示されることが確認できます。
デベロッパーツールを使ってインブラウザで編集
xml文章であるという性質上、インブラウザで編集作業が可能です。 xmlは文章構造上、htmlより厳密で少しの記述ミスで表示できなくなったりします。
コピーをとっておいて編集をミスしたらそちらからやり直し・・という手段もよいですが 若干効率が悪い。なので、インブラウザで編集して、ミスすれば一手戻る・・といった方法をとるほうが効率的かなと思います。（この方法でもバックアップ用のデータは一つ残しておいたほうが良いでしょう）
1．各記述要素が存在するかを調べます。
Chromeなどでこのようにデベロッパーツールを開き、ツールのxml要素をクリックすると対応するアートワークが画面上でハイライトされます。
これで「どの文字列がどのアートワークのパーツなのか」が分かります。クリックしても何もハイライトされない・あきらかに非表示になっているものは（キーボードの）Back Spaceなどで要素そのものを削除していきましょう。
エラーが出たり、アートワークに欠損がでなければそれは不要な要素です。
※エラーが表示されても慌てずに。（command+z / Ctrl+z等で一つ前の操作に戻ればOKです）
この画像のように「style=”display:none”」のスタイル属性が付いている要素は消し漏れた非表示レイヤーです。
この属性がついたものもすべて削除しましょう。
この不要要素の削除だけでデータサイズが半分になることも少なくありません。
2．不要なグループを削除
無意味に入れ子になっている<g>要素も削除しましょう。
<g> <g> <path d="......"/> </g> </g> <rect style="display:none;fill:#54B6E7" /> <rect style="opacity:0.2;fill:#231F20" />
ここで言えばg要素の中に、g要素があり、その中にpath要素だけがある状態になっています。 g要素は「グループ」をしめすものですが、ハイライトしているg要素は意味をなしていませんね？（注：1）（グループは複数の要素を一まとめにするためのもの。内包要素が一つしか無いのならば無意味です）
データ内容がすっきりしたら一度「保存」
ここまでの削除作業が完了したら、<svg>要素に右クリックで「Edit as HTML」を選択。
するとsvg要素以下のすべての要素を選択・編集可能になりますので、ここで「Command + a / Ctrl + a」で全選択→テキストエディタにコピペしましょう。
テキストエディタで仕上げ
ここからはテキストエディタでの作業です。この作業で仕上げです。
デベロッパーツール上の作業だけでもかなり軽くなっていたりするものですが、さらにダメ押し＋今後の作業性向上の為にちょっとした一手間をかけておきましょう。
コピペ後のデータも書き出した直後のデータと同様、「改行」や「タブ」が沢山入っています。 また書き出したソフトが何かを表示する<!– –>といったコメントタグも入っているのでこちらも消してしまって大丈夫です。
これらのタブと改行も「Command + d / Ctrl + D」などでまとめて選択して
改行もろとも一気に削除してしまいましょう。
同じ要領で画像中の4～6行目の改行や、その他の改行箇所も削除していきましょう。
スタイル属性も削除
今回のように各要素ごとに特別スタイルが違わない場合、cssでまとめて設定してしまったほうが記述も管理も楽になります。（cssで管理すれば前回のように「使う場所、タイミングによってスタイルを変更する」も楽にできます。）
style=”….”の箇所に着目。このスタイル指定はcssか一時的に別に書き写して、こちらもまとめて削除します。
ちなみにpath要素ごとにふられているこれらのスタイルは、cssにたったこれだけの記述で済みます。
svg{
fill:#231F20;
}
あるいは
#レイヤー1 path{
fill:#231F20;
}
※idはちゃんとアルファベットで指定しなければ機能しませんが、画像で変更していなかったので・・・
※各要素別に色々なスタイルが入っている場合もid,classを付与して（置き換えて）対応できます。
また書き出し時に「スタイル要素」を選んでいた場合、SVGファイルの冒頭に
<![CDATA[
<style>
.xx{......}
.x2{......}
</style>
]]>
といったように書き出されますので、<style>の中の記述をそのままcssファイルに移すこともできます。
※ただし、自動で出力されるclass名や付与の仕方、指定されているスタイルの記述が微妙だったりするので自分で割振りなおしたほうが良いと思います。
※スタイルの内容を移し替えた後は<![CDATD ～ ]]>と<style> ～ </style>は忘れずに削除しましょう。
また、書き出したままのデータでは<svg>要素にidが付与されていますが、場合によってはこれも邪魔になる為削除して大丈夫です。
※svg要素に付与されるid名はIllustrator上の「レイヤー名」です。
忘れず表示チェック
ここまでの手順が終了したら「保存」してブラウザでチェックしましょう。エラーが出なかったり色以外のアートワークの形状に問題がなければ作業は完了です。
SVGファイル単体で見た際はcssファイルを分けている為、スタイルは適用されません。（塗りの部分が真っ黒で表示されると思います）
完全な状態をチェックしたい場合は、下記のようにhtmlファイルを作成してそこに作成したSVGデータを記述しましょう。→このhtmlファイルをブラウザでチェック
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="styleseet" href="style.css"><!--スタイルを指定したcssファイルを読み込む-->
</head>
<body>
<!-- 今回作成したSVGファイルをまるまるペースト -->
<svg>
.....
</svg>
<!-- ここまで -->
</body>
</html>
ここまでの作業を行うと、このsvgファイルのサイズは7KB弱（6.79KB）になりました。
画質100で書き出したjpg（12KB）よりも軽くすることに成功しました。
しかも、画質もまったく変わりません。これがSVGの良いところです。
まとめ
結構長くなってしまったので複雑でややこしく感じるかもしれませんが、実際に行う作業時間としては書き出しから後、全部やって10分ほどあればできます。（慣れれば5分もあればできると思います）
次回は「SVGスプライトを作成してみよう」を書こうと思います。
Comments