あけましておめでとうございます、ゴトーです。
子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。
新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないですか。SVGで楽しましょう。
SVGの使い方は3つあります。
- IMGタグでsvgファイルを呼び出す
- SVGタグで直接記述する
- USEタグで使いまわす
1は従来の画像の使い方と変わらないので、2以降を紹介します。
SVGタグで直接記述する
サンプルはこちら。
See the Pen SVG Test 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
サンプルではHTMLでSVGを描画するためのタグが3点あります。
| タグ | 役割 |
|---|---|
| svg | SVGの描画を始めるよーと宣言するためのタグ。お約束。 |
| g | SVGシンボルをグループ化させるタグですが、イラレで書き出す内容なので気にしなくていいです。 |
| path | SVGのパスを実際に記述するタグですが、gタグ同様気にしなくていいです。 |
Illustratorは「SVGコード」として書き出し可能なので、複雑なpathタグを書くことを考えなくて大丈夫です。
複雑な画像ほどpathタグは長くなるので使い回したくなります。そうした場合は次のように記述を変えます。
USEタグで使いまわす
サンプルはこちら。
See the Pen SVG Test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
いくつかタグが増えています。
| タグ | 役割 |
|---|---|
| defs | SVGシンボルを事前定義しておくためのタグ。Definesが由来。 |
| symbol | SVGシンボルのタグ。defsの中で複数のシンボルを一括定義できます。サンプルではid=starを定義しています。 |
| use | 定義したSVGシンボルを呼び出すタグ。 |
上記サンプルでは1つ目のsvgタグで内のdefsでsymbol「star」を定義し、2つ目3つ目のsvgタグ内のuseで「star」を呼び出し使い回しています。
まとめ
- IMGタグでsvgファイルを呼び出す
- SVGタグで直接記述する
- USEタグで使いまわす
最初この3つがあると紹介しましたが、IMGタグで呼び出す方法が一番楽で、イラストやアイコンはそれで充分です。
ではSVGタグで直接記述するタイプはどう使うかというと、pathの内容を書き換えてアニメーションさせるなどのインタラクティブ表現に向いています。Flashと全く同じことがSVGとJavaScriptで実現できます。
SVGバリバリ使っていきましょう。
