アニメーション SVG

自分で動く SVG 画像は、ほかの画像と同じように書きます。

![](spinner.svg)
![w:400](chart.svg)

読み取るもの

SVG ファイル自体に書かれたアニメーション: SMIL（animate、animateTransform、animateMotion、animateColor、set、および begin、dur、repeatCount、fill、calcMode、keyTimes、keySplines）と CSS（animation プロパティを伴う @keyframes、transform-origin、transform-box）。理解できないもの、たとえば begin="click" のようなイベントは除外され、警告として報告されます。黙って捨てられるものはありません。

出力ごとの表示

• HTML: ブラウザーがアニメーションを自分で再生します。
• PowerPoint（--pptx）と OpenDocument（--odp）: アニメーションする要素はそれぞれ独立した図形になり、そのアニメーションはスライドと同時に始まります。移動、回転と拡大縮小、不透明度、2 つの色の間の変化です。要素の動きはアニメーション自身の時刻でサンプリングされるため、イージング、複数のキーフレーム、別の点を中心とした回転も正確です。繰り返し（indefinite を含む）、遅延、折り返しは引き継がれます。
• フレーム: アニメーションをこの方法で表現できない場合（変形するパス、自分で描かれる線、傾き）、画像全体をアニメーション自身の時刻でレンダリングし、アニメーション GIF として埋め込みます。PowerPoint と Impress が再生します。上限があります。毎秒 12 フレーム、最大 240 フレーム、全フレーム合計で 1,600 万ピクセルです。
• PDF（--pdf）と画像（--images）: 動かせません。図は初期状態で表示され、JavaScript も RichMedia も含まれず、警告 1 件がアニメーション画像を示します。

アニメーション画像ごとに、コードが svg-animation の警告が 1 行付き、どのように引き継がれたか（ネイティブか、フレームならその理由）を伝えます。

出力ごとの対応

ローカルファイル

ローカルの画像は、--allow-local-files を付けたときだけ、プレゼンテーションのフォルダーから読み込まれます。marp-cli と同じです。このオプションがないと画像はエクスポートから外され、ビルドは local-file-blocked でファイル、そのスライド、オプションを示して知らせます。存在しないファイルは local-file-missing として報告されます。

上限

SVG は信頼できない入力なので、上限があります。SVG 8 MiB、要素 50,000 個、アニメーション 2,000 個、1 つのアニメーションあたりキーフレーム 256 個、タイムライン 60 秒、フレーム 240 個です。上限を超えた図は警告とともに拒否され、ビルドは続きます。

確認したこと

LibreOffice Impress（macOS）は PowerPoint と OpenDocument のファイルを開き、両方の形式で保存し直してもすべてのアニメーションを保持します。Keynote（macOS）は図形とアニメーション GIF を読み込みます。そのアニメーションは確認していません。PowerPoint: まだ確認していません。