SVGアニメーションを復習しよう！
SVGとは
SVG（Scalable Vector Graphics)
ベクター形式の画像をXMLで記述するファイルフォーマット。
SVGのメリットとして以下が挙げられる。
①解像度に依存せず、拡大縮小しても劣化しない
②JPGやPNGに比べ軽い
③CSS、JavaScriptと組み合わせて動かせる
④SEO可読性あり
特に③は手軽にアニメーションが作れて、使いこなせると非常に凡庸性が高い
今回は、SVGアニメーションで頻出のテキストロゴアニメーションを作ろうと思う
文字をアウトライン化
SVG内でテキストをそのまま使うと、フォントが環境で崩れる可能性があるらしい。
テキストは必ずアウトライン化（パス変換） をする。
アウトライン化（Illustrator）
- 文字を選択
- [書式] > [アウトラインを作成] をクリック
- [ファイル] > [書き出し] > [SVG] で保存
Figmaはストロークアニメーションに適さない？
Figmaでアウトライン化したSVGをエクスポートすると、fill（塗り）情報のみが適用され、stroke（線）情報が欠落することがある。そのため、CSSやJavaScriptを使ってストロークアニメーションを適用しようとしても、適切に動作しない場合があるらしい。
Illustratorの方が適している理由
- Illustratorでは
strokeを保持したままSVGを書き出せる -
stroke-dasharrayなどのプロパティを適用しやすい - Figmaでは
fill="black"になりやすく、アニメーション制御しづらい
ストロークアニメーションを適用する場合は、Illustratorを使うのがベター
Figmaから書き出したSVGを使うためには少しファイル自体に加工が必要になってくる、Illustratorからの書き出しの方が良さそう。
ストロークアニメーションを作成
1. SVGの準備
Illustratorでアウトライン化したSVGを用意し、stroke が適用されていることを確認。
<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path d="M10,50 H190" stroke="black" stroke-width="4" fill="none" />
</svg>
2. CSSでストロークアニメーションを適用
@keyframes draw {
from {
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
to {
stroke-dashoffset: 0;
}
}
path {
stroke: black;
stroke-width: 4;
fill: none;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 2s ease-out forwards;
}
3. アニメーションの仕組み
-
stroke-dasharray：点線の長さを指定（線を見えなくする） -
stroke-dashoffset：アニメーションで徐々に線を描画 -
animation：drawのアニメーションを2秒間適用
以上を応用して文字のストロークアニメを作成してみた
See the Pen ロゴのストロークアニメーション by ヤマサキ (@moco2-design) on CodePen.
まとめ
✅SVGは解像度非依存のベクター形式で、アニメーションに適している
✅ ストロークアニメーションを適用するなら Illustrator で SVG を作成するのがベスト
✅ stroke-dasharray と stroke-dashoffset を活用して線の描画アニメーションを実装