SVGマスターへの道

完成デモ: アニメーションロゴ「SVG」

まずは完成形を見てみましょう。下の「SVG」という文字が、線で描かれた後、色が付き、少し動きます。(アニメーションはページ読み込み時に自動再生されます。もう一度見る場合はページを再読み込みしてください。)

使用する主なSVGテクニック

• <path> 要素: ロゴの文字や形を描画します。
• stroke-dasharray と stroke-dashoffset CSSプロパティ: これらが線画アニメーションの主役です。
  • stroke-dasharray: パスの線を破線パターンにします。この値をパスの全長と同じにすると、見た目上一本の実線（ただし、長いダッシュ1つと長い空白1つで構成される）として扱えます。
  • stroke-dashoffset: 破線の開始位置をずらします。初期値をパスの全長と同じにしておき、これをアニメーションで 0 に変化させることで、線が徐々に描かれていくように見えます。
• SMILアニメーション (<animate>, <animateTransform>): stroke-dashoffset や fill、opacity、transform といった属性を時間経過とともに変化させるために使用します。CSSアニメーションでも同様のことが可能です。
• begin属性 (SMIL): アニメーションの開始タイミングを細かく制御し、複数のアニメーションを順番に実行させます。

ステップ・バイ・ステップ解説

ステップ1: ロゴの形状をSVGで作成する

まず、アニメーションさせたいロゴの形状をSVGのパスや基本図形で作成します。今回の例では、「S」「V」「G」の文字をそれぞれ<path>要素で表現しています。

<!-- 例: S のパス -->
<path class="logo-s" d="M80,20 C40,20 40,50 60,50 C80,50 80,80 40,80" />
<!-- V と G のパスも同様に... -->

これらのパスには、後でスタイルやアニメーションを適用しやすいようにクラス（例: logo-s）を付けておくと便利です。

ステップ2: 線画アニメーションの準備と適用

線画アニメーションを実現するには、まず各パスの全長を知る必要があります。これはJavaScriptのpathElement.getTotalLength()メソッドで取得できます。このデモでは、おおよその値を事前に設定しています。

次に、CSS（またはSVGのstyle属性内）で、各パスに対して以下のように設定します。

.logo-s {
  stroke: #FF5722; /* 線の色 */
  stroke-width: 5;  /* 線の太さ */
  fill: none;       /* 最初は塗りつぶしなし */
  stroke-dasharray: 200;  /* パスの全長 (Sの場合、約200) */
  stroke-dashoffset: 200; /* 最初は線が見えないようにオフセット */
}

そして、SMILの<animate>要素を使って、stroke-dashoffsetの値をパスの全長から0へとアニメーションさせます。

<path class="logo-s" d="...">
  <animate attributeName="stroke-dashoffset"
           from="200" to="0" dur="1.5s" begin="0.5s" fill="freeze" />
</path>

• from="200" to="0": オフセットを200から0へ変化させます。
• dur="1.5s": アニメーションにかかる時間は1.5秒。
• begin="0.5s": ページ読み込みから0.5秒後に開始。
• fill="freeze": アニメーション終了後、最終状態（オフセット0＝線が見える状態）を保持。

ステップ3: 他のアニメーション効果の追加

線画アニメーションが終わった後に、文字に色を付けたり（fill属性のアニメーション）、ロゴ全体を少し動かしたりといった効果を加えることで、よりリッチな表現になります。

<!-- Sのパスに色付けアニメーションを追加 -->
<path class="logo-s" d="...">
  <animate attributeName="stroke-dashoffset" ... /> <!-- 線画 -->
  <animate attributeName="fill" from="none" to="#FF5722" dur="0.5s" begin="2s" fill="freeze" /> <!-- 塗りつぶし -->
</path>

<!-- ロゴ全体をグループ化し、グループにアニメーションを適用 -->
<g id="logoGroup">
  <!-- S, V, G のパスたち -->
  <animateTransform attributeName="transform" type="scale"
      from="1" to="1.05" dur="0.2s" begin="3.5s" additive="sum" fill="freeze"/>
  <!-- ...他のアニメーション... -->
</g>

begin属性の値を調整することで、各アニメーションが順番に、または同時に実行されるようにタイミングを制御できます。例えば、begin="animId.end" とすると、IDが `animId` のアニメーションが終了した直後に開始されます。

完成デモのコード全文 (主要部分)

以下は、このページ上部の完成デモで使われているSVGコードの主要な構造です。

<svg class="animated-logo-svg" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            /* CSSで初期スタイルを設定 */
            .logo-s, .logo-v, .logo-g {
                stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none;
            }
            .logo-s { stroke: #FF5722; stroke-dasharray: 200; stroke-dashoffset: 200; }
            .logo-v { stroke: #4CAF50; stroke-dasharray: 150; stroke-dashoffset: 150; }
            .logo-g { stroke: #2196F3; stroke-dasharray: 220; stroke-dashoffset: 220; }
        </style>
    </defs>

    <g id="logoGroup">
        <!-- S のパスとアニメーション -->
        <path class="logo-s" d="M80,20 C40,20 40,50 60,50 C80,50 80,80 40,80">
            <animate attributeName="stroke-dashoffset" from="200" to="0" dur="1.5s" begin="0.5s" fill="freeze" />
            <animate attributeName="fill" from="none" to="#FF5722" dur="0.5s" begin="2s" fill="freeze" />
        </path>
        <!-- V のパスとアニメーション -->
        <path class="logo-v" d="M90,20 L110,80 L130,20">
            <animate attributeName="stroke-dashoffset" from="150" to="0" dur="1s" begin="1s" fill="freeze" />
            <animate attributeName="fill" from="none" to="#4CAF50" dur="0.5s" begin="2.5s" fill="freeze" />
        </path>
        <!-- G のパスとアニメーション -->
        <path class="logo-g" d="M190,50 A30,30 0 1,1 160,20 L160,40 C160,30 170,30 170,40 L170,50 C170,60 180,60 180,50 L180,45">
            <animate attributeName="stroke-dashoffset" from="220" to="0" dur="1.5s" begin="1.5s" fill="freeze" />
            <animate attributeName="fill" from="none" to="#2196F3" dur="0.5s" begin="3s" fill="freeze" />
        </path>

        <!-- グループ全体のアニメーション -->
        <animateTransform attributeName="transform" type="scale" from="1" to="1.05" dur="0.2s" begin="3.5s" additive="sum" fill="freeze"/>
        <animateTransform attributeName="transform" type="scale" from="1" to="0.95238" dur="0.3s" begin="3.7s" additive="sum" fill="freeze"/> <!-- 1/1.05 to return to original scale -->
        <animate attributeName="opacity" from="0" to="1" dur="0.5s" begin="0s" fill="freeze"/>
    </g>
</svg>

まとめ

SVGの線画アニメーションは、stroke-dasharrayとstroke-dashoffsetという2つのCSSプロパティ（またはSVG属性）と、SMILやCSSアニメーションを組み合わせることで実現できます。この基本的なテクニックに、色の変化や簡単な動きを加えることで、魅力的で印象的なロゴアニメーションを作成することができます。

このサンプルを参考に、あなた自身のオリジナルロゴやイラストに命を吹き込んでみてください！次は、「付録A2: インタラクティブな地図」で、SVGを使った地図表現の可能性を探ります。