2022年のオンラインSVGアニメーターの5つのベストピック

無料のオンラインSVGアニメーターをお探しですか？あなたの答えがイエスなら、あなたは正しい場所に来ました。この投稿では、SVGファイルの作成とアニメーション化に役立つSVGアニメーターWebサイトのリストを提供しています。 （画像をビデオに変換したい場合は、MiniTool MovieMakerを試すことができます！）

SVG（Scalable Vector Graphics）は、HTMLの動作と同じように、XMLに基づく画像形式です。アニメーション要素を使用してアニメーション化できます。スクリプト、スタイリング、SMIL（Synchronized Multimedia Integration Language）など、SVGをアニメーション化する方法はいくつかあります。

以下は、アニメーションとエフェクトをSVGファイルに追加し、アニメーション化されたSVGをダウンロードできる最高のSVGアニメーターです。それらのほとんどは、アニメーションを追加するためのシンプルなボタンとコントロールを提供します。今すぐ詳しく見てみましょう！

Svgator

これは、高度なコーディングスキルを必要としない優れたオンラインSVGアニメーターです。数秒で、インポートされたSVGからすぐに使用できるアニメーションSVGコードを生成できます。このWebサイトでは、アーカイブコードのインポート、表示、および適合、SVG形式のアニメーション化とエクスポートを簡単に行うことができます。

SVGatorを使用すると、タイムラインに要素とアニメーターを追加し、キーフレーム値を変更し、クリーンなSVGコードをエクスポートするだけで、デスクトップまたはモバイル画面で完璧に見えるSVGアニメーションを作成できます。

あなたも興味があるかもしれません：アニメーションビデオを作る方法[ステップバイステップガイド]

aniGen

aniGenは、主にSVGアニメーションの作成と編集に焦点を当てたブラウザベースのエディタです。このSVGアニメーターには、SVG対応のブラウザーとJavaScriptのサポートが必要です。 GoogleChromeとMozillaFirefoxで利用できます。

このエディタを使用すると、キーフレームのアニメーション化、塗りと線の追加、子ノードと親ノードの設定、およびレイヤーの作成によるアニメーション効果の追加を行うことができます。アニメーションループの長さと各要素の長さを設定できます。最後に、アニメーションをオンラインでプレビューして、SVGファイルとしてエクスポートできます。

Vivus Instant

Vivus Instantは、最高のSVGアニメーターWebサイトの1つでもあります。これはVivusのオンラインバージョンです。 VivusはJavaScriptを使用して、SVGが描画されているように見せることでSVGをアニメーション化します。 Vivusと比較すると、VivusInstantはCSSアニメーションを使用してSVGをアニメーション化します。

このSVGアニメーションツールを使用しているときに、ドラッグするだけでSVGをアップロードできます。 SVGファイルをアップロードすると、SVGパスに沿ってアニメーション画像が自動的に追加されます。そのままダウンロードすることも、パラメータを手動で調整することもできます。

設定では、アニメーションの種類を設定し、遅延を追加し、ルート時間機能を選択して、アニメーションを繰り返すことができます。

RAWGraphs

RawはオープンソースのWebベースのSVGアニメーターであり、複雑なデータの視覚的表現を誰にとっても簡単にします。 D3.jsグラフィックライブラリを使用してインタラクティブなSVGを作成できます。

データ、半完成の視覚化、チャート、ビジュアルモデルを表示するためのさまざまなビルド済みテンプレートを提供します。清潔で使いやすいです。 Raw内でテキストをコピーして貼り付けることができます。

SVGCircus

SVGCirsusは、このリストで最高のSVGアニメーターWebサイトの1つでもあります。他のSVGアニメーターツールと比較して、SVG編集をサポートしていません。または、ループしたSVGアニメーションを作成することもできます。幾何学的形状のセットが組み込まれているため、アニメーション化されたSVGローダー、スピナー、およびその他のループアニメーションをカスタマイズできます。

俳優、トリック、シナリオなど、これら3つのセクションでSVGアニメーションを作成できます。これらのオプションを使用すると、ループするSVGアニメーションを最初から作成できます。または、プリセットを選択して、それに応じてアニメーションを調整することもできます。

あなたも知りたいかもしれません：あなたが知る必要がある2021年の最高の2Dアニメーションソフトウェア