SVGとCSSで簡単な描画アニメーションを実現する

SVGファイルとは

SVGファイルとは、JPGなどのビットマップデータと違い、ベクターデータであることが特徴です。JPGやPNGなどのビットマップデータは、画像を拡大・縮小すると劣化しますが、SVGデータは劣化することがありません。そのため、ロゴなどの単純な画像に適した形式だと言えます。

SVGファイルの作り方

SVGファイルはイラストレーターで制作することができます。ロゴや自作したデータをSVG形式で保存することで、SVGファイルを制作することができます。

SVGファイルの中身

まずは、下記の画像を確認してください。

上記の画像のようにHTMLにコードを記述することで、画像を表示することができるのがSVGファイルの特徴です。
また、コードをよく見てみるとCSSで色を指定していることがわかると思います。このようにCSSで画像を調整できることも特徴の1つと言えます。

利用できるCSSプロパティ

SVGの要素にしているするCSSプロパティは通常のCSSプロパティとは異なるため注意が必要です。利用可能なプロパティについては、下記のページにて記載されています。

• SVG 属性リファレンス

SVGにアニメーションを加えてみる

最初にアニメーションを加えたデモをご覧下さい。

こちらを見てもらうと、アニメーションが実装されていることが確認できると思います。このアニメーションを実現するために追加したモノは、CSSのみです。それでは、記載した内容について説明していきたいと思います。

追記したcss

追記したCSSは下記のとおりです。

.st0{
  stroke:#000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 4s ease-in 0s;
  animation: hello 4s ease-in 0s;
}
  @-webkit-keyframes hello {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#000;
      }
    }

.st1{
  stroke:#2572a7;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello1 4s ease-in 0s;
  animation: hello1 4s ease-in 0s;
}
  @-webkit-keyframes hello1 {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#2572a7;
      }
    }

ここでのポイントは下記のとおりです。

• strokeプロパティで枠線の設定をする。
• animationに変数とアニメーションの種類を指定する。
• keyframesでanimationに指定した変数の動きを設定する。

各種プロパティは下記の通りです。

ここでわかりにくいのは、なぜstroke-dasharrayやstroke-dashoffsetを指定するのかという点だと思います。それでは、下のデモをご覧ください。

これは、左がstroke-dasharrayに「1」を指定、右がstroke-dasharrayに「2000」を指定したものです。どちらも破線を指定しているのですが、右側は破線では無いように見えると思います。それだけ間隔が細かいということです。

描画のアニメーションを実行するためには、線を存在させる必要があります。svgでは、stroke-dasharrayで描画する線の間隔を指定する必要があるので、細かい間隔を指定することで破線に見えないようにしているのです。

次にstroke-dashoffsetです。こちらは、始点と終点を指定することでkeyframesでアニメーションを実行することができるので、指定を行っています。

1つのファイルとして利用したい場合はどうするの？

アニメーションを設定したSVGを1つのファイルとして利用するためには、CSSの記述をSVG内に記述するすることで解決できます。

上記デモのように、CSSをSVG内に記述すれば、アニメーションが実装されたSVGファイルが出来上がります。ソースコードをそのまま記述しても利用可能ですし、SVGファイルをimgタグで指定することでも利用可能です。ソースコードを直接記述すると、HTMLやPHPが長くなってしまうので、SVGファイルとして外部で管理した方が良いかと思います。

<img src="SVGまでのパス/hogehoge.svg">

以上がSVGで簡単な描画アニメーションを実行する方法です。理屈さえ分かってしまえば色々と応用が利くスキルですので、色々と試してみて下さい。

コラム カテゴリ

コラム一覧