アニメーションSVGエクスポート

2 min read

ウェブの埋め込みとスケーラブルなグラフィックス用のSVGファイルとしてアニメーションをエクスポートします.

SVGを使用するとき

SVGsは、次の場合に理想的です

ウェブサイトにアニメーションを埋め込む
無限のスケーラビリティが必要
小さいファイルサイズは重要です
編集可能なベクトル出力が必要です

SVGとして輸出

ヘッダーの[Export]をクリックします
選択 アニメーションSVG
ここをクリックExport
ファイルのダウンロードはすぐに

アニメーションサポート

十分に支えられた ✅

アニメーション	SVGの出力
パルス	`<animateTransform type="scale">`の特長
回転率	`<animateTransform type="rotate">`の特長
バウンス	`<animateTransform type="translate">`の特長
フェード	`<animate attributeName="opacity">`の特長
ウィズブル	`<animateTransform type="rotate">`の特長
スライド	`<animateTransform type="translate">`の特長
ライジング	`<animateTransform type="translate">`の特長

未対応〇

特徴:	ログイン
タイプライター	JavaScriptが必要です
効果(スパークル、ブラスト)	フレームベースのアニメーション
パターン回転	onFrameベース
複雑なキーフレーム	限定SMILサポート

の特長

ブラウザサポート: SVGアニメーションは、Chrome、Firefox、Safari、EdgeでサポートされているSMILを使用します。一部の古いブラウザは静的SVGを示す場合があります.

の特長

ウェブサイトに埋め込む

ダイレクトエンベッド

<img src="animation.svg" alt="Animated graphic">

インラインSVG

より多くの制御のために、SVGコードを直接貼って下さい:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

CSSの背景

.element {
  background-image: url('animation.svg');
}

輸出後のカスタマイズ

SVGファイルは編集可能なXMLです。できます:

テキストエディタで開く
色、サイズ、タイミングの変更
CSSスタイリングを追加
カスタム JavaScript を埋め込む

エクスポートされたもの

エレメント	として輸出される
テキスト	`<text>`要素
形状	`<path>`、`<circle>`、等.
プロフィール	`<rect>` を充填
アニメーション	SMIL `<animate>`タグ

ファイルサイズ

SVGファイルは通常非常に小さい:

シンプルなアニメーション: 2-10 KB
複雑なシーン: 20-50 KB
GIFかMP4より大いにより小さい

ニュース

の特長

SVGの先端:

質問題がどこに埋め込まれる網のためのSVGを使用して下さい
効果やタイプライターのアニメーションを避ける
対象ブラウザのテスト
SVGsは埋め込むの後でCSSとスタイルすることができます

の特長

サポートされていないアニメーションのためのフォールバック

デザインがサポートされていない機能を使用している場合:

アニメーション版のMP4かGIFとして輸出して下さい
静的なフォールバックのためのPNGとして輸出して下さい
<picture>要素を使用して、プログレッシブの強化