こんにちは。エンジニアの村上です。

普段の制作の中で SVG を使うことがよくありますが、
アイコンやロゴを「画像として読み込む」だけでなく、
SVG をコードとして扱うことで、より自由な表現ができる ところがとても便利だと感じています。

パスを直接編集したり、CSS でスタイルを当てたり、
アニメーションを加えたりと、表現の幅が一気に広がるのが SVG の面白いところなので、
今回はそのSVGコードの一部活用法についてご紹介いたします。

SVGをコードとして使うための基本

SVG は画像として <img> タグで読み込むだけでなく、
中身のコードを直接HTMLに書いて使うことができます。

そのためには、まず 元となるSVGデータを “コード化” する必要があります。

ではまず上の3本のパスで作られた波線のSVGをコード化します。

最もシンプルなSVGをコード化する方法は、SVGファイルをテキストエディタで開いてみることです。

エディタをひらいてみると。。。

上のようなコードで表示されます。

このように、SVG をコードとして扱えるようになれば、
パスの形をそのまま編集したり、アニメーションを加えたりできます。

線が描かれるように見えるSVGパスのアニメーション

実際に簡単にアニメーションをつけてみましょう。

まず上のようにクラス名をつけ、pathLength=”1″ を使ってすべてのパスを「長さ＝1」として扱います。

そしてその次に、CSS を使って “線が描かれていくように見える” アニメーションを設定します。

1. pathLength="1" を指定して、どんなパスでも「長さ＝1」として扱う

2. stroke-dasharray: 1 で、線全体を 1 つの大きな点線として設定する

3. stroke-dashoffset: 1 で、その線を完全に隠した状態にする

4. アニメーションで stroke-dashoffset: 1 → 0 に向けて動かし、線が描かれるように見せる

5. 2本目・3本目は animation-delay で時間差を付けるだけ

この 5 つだけで、自然に線が描かれていくアニメーションが完成します。

これらの設定をすることで、

CSSだけで綺麗に波線が描かれるアニメーションを実現できます。

さいごに

今回は、SVG をコードとして扱うことでできる表現の中から、
“線が描かれていくアニメーション” をご紹介しましたが、
これはあくまで活用方法の一部です。

線だけでなく 文字の形をした SVG を用意すれば、
手書きで文字を書いているようなアニメーションも実装できますし、
その他にも工夫次第で表現の幅は大きく広がります。

アウラでは、こうした SVG の活用した多彩なアニメーション演出や、
サイト全体のデザイン・実装のお手伝いも可能です。
「こんな表現はできる？」「もっと動きのあるサイトにしたい」
といったご相談があれば、ぜひ一度お気軽にご連絡ください。