HTMLでSVGを描画する

goto_jp 223views 更新:2017年1月6日

あけましておめでとうございます、ゴトーです。

子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。

新年一発目の投稿は、そろそろスタンダード化してほしい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点あります。

タグ役割
svgSVGの描画を宣言するためのタグ。お約束。
gSVGシンボルをグループ化させるタグですが、イラレで書き出す内容なので気にしなくていいです。
pathSVGのパスを実際に記述するタグですが、gタグ同様気にしなくていいです。

Illustratorは「SVGコード」として書き出し可能なので、複雑なpathタグを書くことを考えなくて大丈夫です。

複雑な画像ほどpathタグは長くなるので使い回したくなります。そうした場合は次のように記述を変えます。

USEタグで使いまわす

サンプルはこちら。

See the Pen SVG Test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

いくつかタグが増えています。

タグ役割
defsSVGシンボルを事前定義しておくためのタグ。Definesから。
symbolSVGシンボルのタグ。defsの中で複数のシンボルを一括定義できます。サンプルではid=starを定義しています。
use定義したSVGシンボルを呼び出すタグ。サンプルではid=starを呼び出しています。

defsタグ内でsymbolを定義し、useで使うという流れです。

最初のsvgタグをstyleで消していますが、こうしないとSVGの描画領域が発生してしまうので消す必要があります。

まとめ

  • IMGタグでsvgファイルを呼び出す
  • SVGタグで直接記述する
  • USEタグで使いまわす

最初この3つがあると紹介しましたが、IMGタグで呼び出す方法が一番楽で、イラストやアイコンはそれで充分です。

ではSVGタグで直接記述するタイプはどう使うかというと、pathの内容を書き換えてアニメーションさせるなどのインタラクティブ表現に向いています。Flashと全く同じことがSVGとJavaScriptで実現できます。

SVGバリバリ使っていきましょう。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません