svg アニメーション（１）ー CSSによるアニメーション

1. 手書き文字のアウトラインを作成する

まずは、イラストレーターを使って、手書き文字の輪郭を作成します。今回は第一弾ですし、慣例にしたがって（？）、「Hello World!」で行きたいと思います。（※ FontはGoogle FontsのPacifico Regularをつかいました使いました）
手書き文字のデザインを決めたら、全体をアウトライン化し、パスファインダーで合体させて最後に全体を複合パス化してください。また、svgで書き出す際にidとなるので、レイヤーにはわかりやすい名前をつけておいてください。さらに、可能な場合はオブジェクトメニューからパスの単純化をある程度適用してアンカーポイントを減らしてあげると、生成されるインラインのsvgのコードの長さが少し短くなります。

2. 手書き文字のストロークを作成する

手書き文字の輪郭ができたら今度は、パスツール等を駆使して、別レイヤーに文字のストローク部分を作成します。この時もレイヤー名は書き出したときにわかりやすいような名前をつけてください。ここでのポイントは、輪郭の一番太い部分に合わせた太さのパスで、輪郭の内側が綺麗に塗りつぶされるようにすることと、文が分かれていたり、複数行になっている場合もストロークをつなげてしまうことです。
ストロークが分かれている場合は、cssのアニメーションを適用したとき複数のパスの先頭から同時にアニメーションが適用されるので順番に書かれるようにする場合は、パスを繋げてしまってください。

3. svgコードを出力して、ストロークにclipPathを適用する

ここまでできたら、今度はイラストレーターの「別名で保存メニュー」からsvgを選択して、保存の画面に進み、保存ウィンドウ下部の「svgコード…」をクリックすると、別画面でsvgコードが表示されるのでこのなかの<svg ...>〜</svg>の部分をコピーして表示させたい箇所に貼り付けてください。
ここからが少しだけややこしいかもしれませんが、svgとして出力されたコードを利用して、文字の輪郭を切り抜くためのclipPathを定義します。
clipPathの定義方法は、まず、<svg ...>の直後に、<defs></defs>というタグを挿入します。その後<defs></defs>の中に、出力された文字の輪郭部分のコード（おそらく<g id="レイヤー名">...</g>となっているかと思います）を貼り付けて、<g>...</g>のgをclipPathと書き換えるか全体を<clipPath></clipPath>で囲んでclipPathに任意のidをつけます。
これでclipPathの定義はできましたので、次にストロークにclipPathを適用します。clipPathを適用するときは、適用したい対象のオブジェクトやグループのタグにclip-path="url(#クリップパスのid)"を指定してあげればOKです。（※clipPathではなくclip-pathなので注意！）
ここまでできればストローク部分が輪郭で切り抜かれているのがブラウザでも確認できるはずです。

4. cssでアニメーションを実装する

ここまできたらもう簡単、あとはcssでアニメーションをつけて上げるだけです。
svgでパスが描かれていくように見せるアニメーションは、先述のstroke-dasharrayと、stroke-dashoffsetというプロパティを使います。
まず、stroke-dasharray。これは指定したsvgのパスを破線にするというものなのですが、ここに、ストロークの長さを超える値の破線を指定することもできます。これに、stroke-dashoffsetを使って、破線の開始位置をストロークの長さ分ずらしてあげることで、最初、破線の空白部分が表示された状態にし、stroke-dashoffsetの値をアニメーションさせると、線が描かれて行くかのように見せることができます。

See the Pen SVG Handwrite-Text by Shinji Yamamoto (@commono_yamamoto) on CodePen.

※アニメーションが表示されていない場合は「RESULT」ボタンを押してください。
線が交差する部分などはパスを調整してあげるか太さを変えたストロークを分けて別々にアニメーションさせるともっときれいに見せられるとは思いますが、今回はここまで！
javascriptやjQuery等と組み合わせると、もっと色々できると思いますのでもし機会があれば試してみてくださいね！
※ 追記
その後、検証でこの方法はieには対応していないことがわかりました。。
ieにも対応したjQueryをつかった実装について続編がありますので、
こちらもごらんいただけますと嬉しいです！
→ svgアニメーション（2）— setIntervalを使ったアニメーション