☔️

SVGを描画してアニメーションを追加する

2023/02/03に公開

JavaScript

SVG

tech

ポートのフロントエンドを担当している @fujita です。
この記事では SVG タグについてと SVG に簡単なアニメーションを追加する方法を書いていきます。

SVG とは

SVG とはスケーラブル・ベクター・グラフィックスの略でベクター画像を扱うことができます。
ベクター画像は頂点・塗り・線の集まりなので、JPEG や PNG などのドットの集合体であるラスター画像と違い、拡大縮小に強いのが特徴です。
なのでレスポンシブデザインに対応しやすく、それがメリットの１つと言えます。

また SVG は DOM として操作もできるので JavaScript と組み合わせて使うことができます。

実際に SVG タグを書いてみる

今回は弊社サービスのアイコンを書いてみようと思います。

就活会議アイコン

SVG タグで viewBox 属性を指定する

まずは SVG タグに viewBox 属性を指定していきます。
viewBox 属性は SVG の描画領域の定義に使用されます。

svg

+ <svg viewBox="0 0 300 300" width="300" height="300">
+ </svg>

viewBox 属性に指定できる値は４つでviewBox="x座標 y座標 width height"になります。

詳しくはこちら

cycle タグで円を描画する

circle タグで円を描画します。cx属性は中心のx-座標、cy属性は中心の y 座標、r属性は円の半径、fillは要素を塗りつぶす色を指定しています。

svg

<svg viewBox="0 0 300 300" width="300" height="300">
  + <circle cx="150" cy="150" r="150" fill="#22A9D9" />
  + <circle cx="150" cy="150" r="120" fill="#FFFFFF" />
</svg>

途中経過１

svg

<svg viewBox="0 0 300 300" width="300" height="300">
  <circle cx="150" cy="150" r="150" fill="#22A9D9" />
  <circle cx="150" cy="150" r="120" fill="#FFFFFF" />
  + <circle cx="230" cy="150" r="18" fill="#F6B318" />
</svg>

途中経過２

詳しくはこちら

polygon タグで三角形を描画する

polygon タグは多角形を描画するためのタグです。points属性にx座標,y座標を必要な数だけ追加します。polygon タグは始点と終点が繋がりますが、もし繋げたくない場合は poyline タグを使用します。

svg

<svg viewBox="0 0 300 300" width="300" height="300">
  <circle cx="150" cy="150" r="150" fill="#22A9D9" />
  <circle cx="150" cy="150" r="120" fill="#FFFFFF" />
  <circle cx="230" cy="150" r="18" fill="#F6B318" />
  + <polygon points="100,200 125,125 175,175" stroke="#E47070" fill="#E47070" />
  + <polygon points="200,100 125,125 175,175" stroke="#F6B318" fill="#F6B318" />
</svg>

途中経過２

詳しくはこちら

なにか違う・・・

polygon タグでは１角のみ角丸の三角形を描画することができませんでした、、、
アイコンを完全再現するためには path タグで曲線を書く必要がありそうです。
path タグについて学習をして次回続きの記事を作成したいと思います！

アニメーションを追加してみる

animate()メソッドは新しい Animation を生成して要素に適用することができます。

const icon = document.querySelector('#icon');

animation();

function animation() {
  icon.animate(
    [
      { opacity: 1 },
      { opacity: 0 }
    ],
    {
      duration: 1600,
      iterations: Infinity,
      direction: 'alternate'
    }
  );
}

詳しくはこちら

最後に

今回は SVG タグについてと SVG に簡単なアニメーションを追加する方法について見ていきました。
今までデザインツールで書き出すだけだったため改めてどんなタグがありどのようなことができるのか知れてよかったです。
次回は path タグについても勉強をして記事にしたいと思います！

SVG とは

実際に SVG タグを書いてみる

SVG タグで viewBox 属性を指定する

cycle タグで円を描画する

polygon タグで三角形を描画する

なにか違う・・・

アニメーションを追加してみる

最後に

Discussion