以下は、svgをアニメーション化する可能な方法です。
SVG SMILアニメーション
SVGは、SMILと呼ばれる強力なネイティブマークアップ言語でアニメーション化でき、Adobe Animate CC + flash2svgプラグインなどのアニメーションツールから直接エクスポートできます。
サポートされていないブラウザでもSMILでSVGをアニメーション化するには、SMILポリフィルを使用するだけです。
ポリフィルは、ブラウザにない機能をサポートする特別なJavaScriptコードであり、ブラウザが理解できる元のエンコーディングに変換します。
Eric Willigersによって作成されたSMILポリフィルは、まさにそれを実行します。SMILを、MicrosoftブラウザーでさえサポートするWeb Animations APIに変換します。非常に効率的であるため、Google Chrome開発者はネイティブのSMILサポートを廃止し、Webアニメーションに専念し、ChromeでSMILファイルを再生するタスクをEric Willigersに任せました。
誰かがこれをChromeによるSMILの非推奨と誤って解釈し、この選択について開発者を批判しました。しかし、それは本当の非難ではなく、ポリフィルレベルでのSMILの解釈の仕事の単なる再配置でした。
実際、Chrome開発者自身は、SMILを廃止する意図についての非常に公式な発表でウィリガーポリフィルを引用しました。
したがって、SMILの終miseについてWebを読み回しても心配する必要はありません。SMILの「死」は大きく誇張されました。それは再生のようなものです。
IEやEDGEを含むすべてのブラウザでSMILを使用するには、次のjavascriptポリフィルをWebページに追加するだけです。
https://github.com/ericwilligers/svg-animation
人気のあるflash2svgエクスポーターの作成者であるTom Byrneが作成したポリフィルを使用したデモページを次に示します。
ポリフィルのないページ：http ://www.tbyrne.org/staging/smil-polyfill/tears.htm
ポリフィルのある同じページ：http ://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm
ソースを見ると、ほとんど一目瞭然です。
また、多くのブラウザではWebアニメーションがハードウェアアクセラレーションされているのに対し、SMILは通常そうではないため、ポリフィルのパフォーマンスは多くの場合元のSMILよりも優れています。
SVG SMILでのアニメーションのエクスポート
SVGアニメーションを作成するより簡単な方法は、Adobe Animate CCなどのツールを使用してそれらを描画し、Flash2svg（https://github.com/TomByrne/Flash2Svg）などのプラグインを使用してSVGにエクスポートすることです。これを使用すると、この漫画エピソードのように、ほぼすべてのアニメーションとサウンドを単一のSVGファイルとしてエクスポートできます。http：
//www.tbyrne.org/portfolio/smil/LoveDota.svg
SVGアニメーションJSライブラリ
JavaScriptの方法はより複雑です。まず、javascriptプログラマーである必要があります。次に、多くのライブラリから選択する必要があります。より人気があります：
SnapSVG
http://snapsvg.io
このライブラリは、同じ作者によって作成された古い人気のあるRaphaelアニメーションライブラリの後継です。非常に安定していますが、SVGを実行時に内部形式に変換してアニメーション化します。モーフィングオプションも非常に基本的なもので、単なる線形補間です。（注：Adobe Animate CC用のsnap.svgプラグインもありますが、エクスポートされたファイルは肥大化します。エクスポーターはすべてのキーフレームではなくアニメーションのすべてのフレームに対して1つのsnap svgコマンドを生成し、1000行を超える18Kb svgファイルを生成します単純な長方形を360度回転させるためのコードのコードです。Flash2svgプラグインははるかに効率的で、1つのコマンドと同じジョブを実行するための数バイトだけです。
Greensock MorphSVG
http://greensock.com/morphSVG
SVGを簡単にアニメーション化でき、SVGを内部形式に変換することなく、完全に機能するモーフィングライブラリ。Inkscapeで3〜4個のsvgキーフレームを作成するだけで、Greenock SVGMorphing libはフレーム間を自動的に補間し、スムーズな再生のためにすべての中間フレームを作成します。次に例を示します。http：
//codepen.io/Emasoft/pen/reOqYE
3D Seen.js
http://seenjs.io/demo-svg-canvas.html 3Dで
アニメーション化する場合、このライブラリは非常に強力です。
Seen.jsは3D .objファイルメッシュをSVGでレンダリングし、非常に簡単にアニメーション化します。
SVG画像エディター
ツールについては、主に3つのソフトウェアを使用してアニメーションキーフレームを作成できます。
Inkscape：オープンソースであり、多くの機能を備えています。SVGワーキンググループに参加している人々が作成した高度なベクター編集パッケージです。SVG形式のリファレンス。学ぶのは簡単ではありません。
Adobe Illustrator：商用の非常に強力なベクター描画ソフトウェア。SVGでまだサポートされていない多くの機能を提供しますが、形式との互換性が最悪です。多くの場合、エクスポートされたSVGファイルを手動で編集して、イラストレーターの混乱を修正する必要があります。しかし、それは美術学校で非常に人気があり、すべてのグラフィック家はそれを使用する方法を知っています。
Affinity Designer：これはIllustratorのような商用ソフトウェアですが、ほぼInkscapeのレベルで優れたSVG互換性を備えています。UIははるかに使いやすく、SVGアーティストの間で非常に人気が高まっています。
SVGアニメーションエディター
現在、唯一のSVGアニメーションエディタは次のとおりです。
- Adobe Animate CC：以前のAdobe Flash Proは、Adobeによって完全に書き直され、現在廃止されているフラッシュアニメーションから最新のSVGアニメーションに移行しました。結果のSVGアニメーションをカスタムjavascriptライブラリとともにエクスポートするか、「flash2svg」などのプラグインを使用してSVG + SMILで保存することを選択できます。この最後のオプションは非常に効率的で、肥大化したネイティブエクスポーターの代わりに常に使用します。
ここから無料のプラグインをダウンロードできます：https :
//github.com/TomByrne/Flash2Svg
または、Adobeプラグインパネルからインストールします：https :
//creative.adobe.com/addons/products/7232
残念ながら、Adobe Animate CCは商用です。無料のオープンソースの代替アニメーションアプリケーションがありますが、私はそれらすべてを試してみましたが、それらはまだ私見を吸います。未来に期待しましょう。
参照：
件名に関する私のより包括的なブログ投稿：https : //medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
snap.svgについて参照されているケース：https ://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files