本文へ移動

SVGをGIFに変換

SVGを、どこでも再生できるGIFに変換します。アニメーションSVGはCSSやSMILの動きをそのまま、静止SVGはくっきりしたGIFになります。サイズ、長さ、フレームレートを選んでダウンロード。無料で、ブラウザだけで完結します。

ファイル

変換するSVGをドロップ

SVG（アニメーション・静止画）

このツールの特徴

  • 端末内で処理

    処理できるサイズは端末のメモリやブラウザによって異なります。

  • アップロード不要

    ブラウザ内で処理するため、ファイルは端末の外へ送信されません。

  • 登録不要

    アカウントやメールアドレスを登録せず、すぐに使えます。

SVGはWebのアイコン、ロゴ、線のアニメーションに最適な形式ですが、表示できない場所も多くあります。メールソフト、チャットアプリ、スライド、掲示板、SNSが求めるのはGIFか動画です。

このSVG→GIF変換ツールは、SVGをブラウザとまったく同じように再生し、フレームごとに録画します。ローディングアイコン、ロゴアニメーション、アイコン、イラストの動きはそのまま残り、長さをアニメーションの1サイクルに合わせればGIFは継ぎ目なくループします。SVGはブラウザの安全な画像モードで開かれ、アップロードされることはありません。

SVGをGIFに変換する方法

  1. SVGを追加

    上の枠に.svgファイルをドロップするか、選択します。プレビューで再生が始まり、アニメーションの有無と1サイクルの長さが表示されます。

  2. サイズと長さを選ぶ

    幅を選ぶと、高さはSVGの縦横比に合わせて決まります。長さはアニメーションの1サイクルに設定されるので、GIFは継ぎ目なくループします。

  3. フレームレートと背景を設定

    ほとんどのアニメーションは毎秒20フレームでなめらかです。背景は透明のままにするか、透過の表示が苦手なアプリ向けに白か黒を選びます。

  4. 変換してダウンロード

    「GIFに変換」を押します。アニメーションはリアルタイムで録画されるため、3秒のSVGなら3秒かかり、そのあとエンコードされます。終わるまでタブを開いたままにしてください。

アニメーションSVGをGIFに変換する

SVGの動きには2種類あります。ファイル内の<animate>や<animateTransform>などのSMIL要素と、<style>内のCSS @keyframesアニメーションです。どちらもブラウザ自身が再生するので、ここではブラウザで見るのとまったく同じように動き、GIFにはプレビューで見えているものが録画されます。

きれいにループするGIFにするには、録画をちょうど1サイクルにする必要があります。ツールはSVGに書かれた長さを読み取って自動で設定します。長さの異なる複数のサイクルが組み合わさっている場合は、10秒以内でそれらの公倍数にしてください。

スクリプト、マウスオーバー、クリックで動く部分は画像の中では再生されないため、録画できません。自動で動くアニメーション、つまりアニメーションアイコン、ローディング、ロゴのほぼすべては問題なく変換できます。

サイズ、フレームレート、ファイルサイズ

SVGには固定の解像度がないため、選んだ幅でくっきり描画されます。拡大によるぼやけはありません。ファイルサイズは幅とフレーム数に比例して大きくなるので、実際に表示する最小のサイズを選びましょう。

毎秒10フレームはゆっくりした単純な動きに、20は多くのアイコンやローディングに、25は速い動きに向いています。単色のベクターイラストはGIFでもよく圧縮され、動かない部分は1回だけ保存されます。それでも重い場合は、GIF圧縮で指定サイズに収められます。カスタム絵文字にするなら、GIF絵文字作成がDiscord・Slack・Twitchの制限に合わせます。

透明な背景

SVGの背景はたいてい透明で、GIFも透明にできます。ただしGIFの透過はピクセルごとに全か無かなので、ベクター図形のなめらかな輪郭はくっきりと少しギザギザになり、暗い背景で特に目立ちます。

GIFを表示する場所が分かっているなら、その色に合わせた背景を選ぶのがおすすめです。多くのメールや資料なら白、ダークモードのチャットなら黒。輪郭は完全になめらかなままです。

安全な設計

SVGはスクリプトや外部ファイルへのリンクを含められる文書です。ここではSVGを画像として開きます。これはブラウザが<img>タグ内のSVGに使うのと同じ厳格なモードで、スクリプトは実行されず、ファイルの外からは何も読み込まれません。そのため、ほかのサイトにリンクされたフォントや画像は読み込まれません（埋め込まれたものは表示されます）。

アップロードは一切ありません。録画もエンコードもブラウザ内で行われます。

よくあるSVGアニメーションの設定

設定の目安です。プレビューは、録画されるとおりにSVGを再生します。

SVG幅1秒あたりのフレーム数背景
ローディングアイコン240〜320 px20〜25ページに合わせる
アニメーションアイコン240 px20透明か白
メール用のロゴアニメーション480〜640 px20白
イラスト・バナー640〜800 px10〜20SVG自体の背景
グラフ・データアニメーション640 px10白

SVGアニメーションをGIFにする理由

  • メールマガジン

    ほとんどのメールソフトはSVG自体に、ましてやアニメーションには対応していません。GIFならほぼどこでも再生されます。

  • スライド・資料

    PowerPoint、Keynote、Googleスライドや多くの資料ツールは、SVGアニメーションが動かなくてもGIFは再生します。

  • チャット・SNS

    アニメーションロゴやアイコンを、Slack、Discord、LINE、SNSで共有できます。

  • デザインの共有・プレビュー

    画像しか表示できないツールでも、クライアントやチームに動きを見せられます。

  • READMEとドキュメント

    SVGアニメーションが除去されるドキュメントサイトやリポジトリでも、図解やデモを動かせます。

  • ステッカー・絵文字

    ベクターの絵文字やステッカーをGIFにして、チャットアプリのサイズ制限に合わせられます。

よくある質問

SVGのアニメーションは残りますか？
はい。CSSアニメーションもSMILアニメーションも再生され、GIFに録画されます。スクリプトやマウスオーバー、クリックで動く部分だけは記録できません。
静止SVGをGIFに変換できますか？
はい。静止SVGは、選んだ幅でベクターからくっきり描画された1フレームのGIFになります。
変換にアニメーションと同じ時間がかかるのはなぜ？
アニメーションを、ブラウザが再生するとおりにリアルタイムで録画するためです。5秒のSVGなら録画に5秒、さらにエンコードに少し時間がかかります。
タブを切り替えたら録画が止まったのはなぜ？
ブラウザは見ていないタブのアニメーションを一時停止するため、GIFに抜けができてしまいます。終わるまでタブを表示したままにしてください。
GIFをなめらかにループさせるには？
長さをアニメーションのちょうど1サイクルにします。SVGに長さが書かれていれば、ツールが自動で設定します。
SVGはアップロードされますか？
いいえ。再生、録画、エンコードはすべてお使いの端末のブラウザ内で行われます。
一部のフォントや画像が表示されないのはなぜ？
安全のため、SVGは画像として開かれ、ほかのサイトのフォントや画像は読み込まれません。変換前に文字をアウトライン化するか、画像をSVGに埋め込んでください。
LottieやJSONのアニメーションも変換できますか？
直接はできません。LottieファイルはSVGではなくJSONです。先にアニメーションをSVGとして書き出すか、動画として録画してください。

関連ツール

画像ツールをすべて見る