SVGアニメーターツール
SVGにCSSアニメーションを追加してダウンロード。14種パターン、速度・イージング・ループをカスタマイズ。
SVG を読み込む
SVGをドラッグ＆ドロップ
またはファイルを選択
コードを貼り付ける またはファイルを選択
アニメーションパターン
左から右へ徐々に現れる「ワイプ」スタイルです。フィル・ストローク問わずどんなSVGでも使えます。
カスタマイズ
出力
SVGを読み込むと
プレビューが表示されます
プレビューが表示されます
使い方
- SVGファイルをアップロード、またはSVGコードを貼り付けます
- イン / アウト / ループのタブからアニメーションパターンを選びます
- 速度・イージング・遅延などをカスタマイズします
- プレビューでアニメーションを確認します
- SVGダウンロードまたはHTML埋め込みコードをコピーします
こんな時に便利
- ロゴやアイコンSVGをWebページで動かしたいとき
- ランディングページのメインビジュアルにアニメーションを追加するとき
- SVGイラストを描画アニメーションで魅せたいとき
- 外部ライブラリなしにCSSアニメーション付きSVGを作成したいとき
よくある質問
Q. 描画アニメーションはどんなSVGで使えますか？
stroke（線）を持つパス要素があるSVGで最も効果的です。アイコンやロゴのSVGに適しています。stroke がない fill のみのSVGには自動的に stroke が追加されます。
Q. ダウンロードしたSVGをWebページに埋め込むには？
SVGファイルはimgタグで読み込むとCSSアニメーションが動作しない場合があります。「HTML埋め込みコード」をコピーしてHTMLに直接貼り付けるか、objectまたはinline SVGとして埋め込んでください。
Q. アニメーションはサーバーに送信されますか？
いいえ。すべてブラウザ内で処理されます。SVGファイルや生成されたコードは外部サーバーに送信されません。