SVGでアニメーションを実装してみよう！可愛いサンプルもあるよ！

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、SVGに関する基礎的な知識、およびブラウザへの表示方法をざっとご紹介しました。 blog.mimipen.net 今回は、CSS/JSを使って、ブラウザでSVGにアニメーションをつけていこうと思います。

この記事を読むと、CSS/JSを使って、SVGのアニメーションを実装する方法がわかるよ！

こんな人に読んで欲しい

・Webコーダーの方

・SVGについて最初から知りたい方

・SVGでアニメーションを実装したい方

よく使うSVGの属性

PNGやJPEGと異なり、SVGはコードで図形を表現することができます。コードの中には、SVGの形を指定するものがあります。それぞれ見ていきましょう。

rect

See the Pen rect sample by kazoonLab (@kazoonLab) on CodePen.

rect属性を使うと長方形を描くことができます。上のコードでは、x, yで始点を、widthとheightで縦・横の大きさを指定しています。言い換えれば、この図形は「座標(0, 0)から縦・横それぞれ100の正方形」と言えます。

上のソースコードで、viewBoxという記述があるかと思います。viewBoxとは、SVGの表示領域を示すようなもの、と覚えてください。
上のソースコードでは、「座標(0, 0)から縦・横それぞれ800の領域」を指定しています。800×800の領域の中に100×100の正方形があるイメージですね。

viewBoxが小さくなる、すなわち表示領域が小さくなると、中の図形の大きさは相対的に大きくなります。下のソースコードを見てください。

See the Pen small viewBox by kazoonLab (@kazoonLab) on CodePen.

SVGのwidth, height値は同じですが、viewBoxの値が小さくなっているかと思います。このソースだと、viewBoxは「座標(0, 0)から縦・横それぞれ400の領域」となります。400×400の領域の中に100×100の正方形があるイメージのため、先ほどより大きく表示されるということです。

circle

See the Pen circle sample by kazoonLab (@kazoonLab) on CodePen.

circle属性で円をかくことができます。cxとcyで中心の座標を、rで円の半径を指定できます。この場合は「座標(100, 100)を中心に持ち、半径100の円」となります。

path

See the Pen SVG sample by coding directly by kazoonLab (@kazoonLab) on CodePen.

path属性では複雑な図形を表現することができます。<path>の中のd属性で、どのように線を描くかを指定しています。

前の記事でも登場した上のソースコードでは、鳥のアイコンを表現するためにpathを用いています。この記事では詳しくは触れませんが、d属性の中のアルファベット(Mとかcとか)は、線の描き方を命令するプロパティです。

ここまで、SVGの形を作る「属性」について見てきました。次のセクションでは、SVGの色・線などを調整する「プロパティ」について、代表的なものを見ていきましょう。

よく使うSVGのプロパティ

fill

See the Pen fill sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
}

fillプロパティで、SVGの背景色を指定できます。一般的なCSSだとbackground-colorですが、SVGでは異なることに注意してください。

fill-opacity

See the Pen fill-opacity sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
  fill-opacity: 0.2;
}

fill-opacityプロパティで、SVGの透過度を指定できます。opacityと同様、0から1の値で指定し、0に近づくにつれて透明になっていきます。

stroke

See the Pen stroke sample by kazoonLab (@kazoonLab) on CodePen.

[css]

rect {
  fill: #fda085;
  stroke: #000;
}

strokeプロパティで図形の外側に表示される色、すなわち枠線の色を指定できます。CSSでいうborder-colorですね。

また、pathにプロパティを指定することで、線を描くことができます。

See the Pen 例1: stroke を使用した直線 by kazoonLab (@kazoonLab) on CodePen.

stroke-width, stroke-opacity

See the Pen stroke-width, stroke-opacity sample by kazoonLab (@kazoonLab) on CodePen.

[css]

path {
  stroke: #fda085;
  stroke-width: 10px;
  stroke-opacity: .2;
}

stroke-widthプロパティで枠線の太さを、stroke-opacityで枠線の透過度を指定できます。

stroke-linecap, stroke-dasharray

See the Pen stroke-linecap, dasharray sample by kazoonLab (@kazoonLab) on CodePen.

stroke-linecapプロパティで線端の形を、stroke-dasharrayで点線のパターンを指定できます。

線端の形には他にも、butt(線の長さと等しく平らに)やsquare(四角く伸ばす)があります。

点線のパターンは、「3, 1.5」のようにコンマ区切りで指定することで、長さの異なる点を自由に組み合わせることができます。

いざアニメーション

今回は、「ホバーで色が変わるハートのアイコン」を実装してみます！

See the Pen SVG animation sample by kazoonLab (@kazoonLab) on CodePen.

※スマートフォンで見ている方は、アイコンをタップしてみて下さい。

アイコンをホバーすると、アイコンの枠線が表示されたのち、アイコン自体の色が変化します。

アニメーション自体は、CSSのanimationで実装しています。

アニメーションの前半ではSVGのstroke関連を操作し、後半ではfillを変化させています。

まとめ

今回は、SVGの属性・プロパティを見ていった後、CSSでアニメーションを実装しました。

今回は、CSSでプロパティ値を変化させることで色の変化を実装しました。JavaScriptでpathなどの中身を変化させることで、SVGを変形させることができます。ぷるぷるしてるアイコンなんかは、この方法で実装していることが多いですね。

今後の記事で、これらもご紹介できればと思います。

余談ですが、<svg>をはじめとするタグ・属性・プロパティは、モダンブラウザであれば対応しています。

レガシーブラウザまで対応する場合は、前回の記事の「