SVGをコードとして扱うと広がる表現。線が描かれるアニメーションの実装例

村上

2025/11/19

SVGをコードとして使うための基本
線が描かれるように見えるSVGパスのアニメーション
さいごに

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

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

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

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

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

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

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

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

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

<svg width="800" height="160" viewBox="0 0 800 160" fill="none">
  <path  d="M 0 40 C 150 10, 300 70, 450 40 S 750 10, 800 40"/>
  <path  d="M 0 80 C 200 40, 350 120, 500 80 S 700 40, 800 80"/>
  <path  d="M 0 120 C 180 70, 330 150, 500 120 S 720 70, 800 120"/>
</svg>

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

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

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

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

<svg class="wave" width="800" height="160" viewBox="0 0 800 160" fill="none">
  <path class="wave-line1" pathLength="1" d="M 0 40 C 150 10, 300 70, 450 40 S 750 10, 800 40"/>
  <path class="wave-line2" pathLength="1" d="M 0 80 C 200 40, 350 120, 500 80 S 700 40, 800 80"/>
  <path class="wave-line3" pathLength="1" d="M 0 120 C 180 70, 330 150, 500 120 S 720 70, 800 120"/>
</svg>

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

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

pathLength="1" を指定して、どんなパスでも「長さ＝1」として扱う
stroke-dasharray: 1 で、線全体を 1 つの大きな点線として設定する
stroke-dashoffset: 1 で、その線を完全に隠した状態にする
アニメーションで stroke-dashoffset: 1 → 0 に向けて動かし、線が描かれるように見せる
2本目・3本目は animation-delay で時間差を付けるだけ

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

  .wave path {
    stroke: #222;
    stroke-width: 3;
    fill: none;

    stroke-dasharray: 1;
    stroke-dashoffset: 1;

    opacity: 0;
  }
  .wave-line1 {
    animation: draw 2s ease-out forwards;
  }
  .wave-line2 {
    animation: draw 2s ease-out 0.5s forwards;
  }
  .wave-line3 {
    animation: draw 2s ease-out 1s forwards;
  }
  @keyframes draw {
    0%   { stroke-dashoffset: 1; opacity: 0; }
    1%   { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }

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