アニメーションGIFをSVGへ：フレームを選ぶか動きを作り直す
アニメーションGIFは1枚のベクター静止画にも、作り直したSVGアニメーションにもできますが、作業は異なります。変換ツールが何を残すのか解説します。
目次
アニメーションGIFはSVGに変換できますが、「変換」という言葉には3つの異なる作業が隠れています。ベクター化ツールは、選んだ1フレームを編集可能なパスへトレースできます。フレーム式のツールは多くのフレームをトレースして順番に再生できます。また、デザイナーが図柄をベクターオブジェクトとして作り直し、実際のSVGの動きを作ることもできます。どの結果も.svgで終わる場合がありますが、互いに置き換えられるものではありません。
GIFのある瞬間のロゴ、アイコン、イラストが必要なら、そのフレームを選んでベクター化します。動き自体が素材なら、アニメーションを残すか、意図的に作り直します。通常のトレースが魔法のように全フレームを残すことはありません。
答えの要点
- 編集可能な静止画1枚： 代表的なGIFフレームを選び、SVGパスへトレースします。
- 同じフレーム列： フレームごとのSVGアニメーションに明示的に対応したツールを使います。整った再利用可能なオブジェクト一式ではなく、図柄の繰り返しになると想定します。
- 実際のベクターの動き： 中心となるオブジェクトを1回描き直すかトレースし、位置、回転、縮尺、色、パスを動かします。
- PerfectVectorの手順は明確です： アニメーションGIFではフレーム選択のために停止し、確定したフレームだけをベクター化します。
「アニメーションGIFからSVG」の3つの意味
GIFはラスター画像データを保存し、制御拡張でタイミングやループを含むフレーム列を作れます。米国議会図書館のGIF89a形式の説明に概要があります。SVGは図形、パス、必要ならアニメーション指示を保存します。両者の変換には、何を残すかの判断が必要です。
| 欲しいもの | 変換ツールが行うこと | 得られるもの | 適した用途 |
|---|---|---|---|
| 鮮明で編集可能な1つの瞬間 | 1フレームを選びトレースする | パスで構成した静止SVG | ロゴ、アイコン、短いアニメーションのポーズ |
| 元のフレームごとの見た目 | 多くのフレームを抽出して順序付ける | フレームの図柄を繰り返すアニメーションSVG | 専用ツールが対応する単純なピクセルアートや短いループ |
| きれいで編集可能なベクターの動き | 再利用するオブジェクトを作り直して動きを付ける | CSS、SMIL、スクリプトで部分が動くSVG | Webイラスト、ローダー、図解、インターフェースの動き |
| 写真を正確に再生する | 元のラスターアニメーションを残す | GIFなどのラスター・動画形式 | 写真、質感、グラデーション、複雑な効果 |
最初はベクター化です。2つ目はトレースしたパラパラ漫画をSVGに入れることに近く、3つ目はアニメーション制作です。検索結果では3つを同じ「アップロードして変換」の約束にまとめがちなので、拡張子を信じる前に実際の書き出し内容を確認します。
編集作業の場所も異なります。1つは瞬間を分離し、1つはフレームの図柄を繰り返し、1つは動きを作る前に再利用するオブジェクトを再構築します。
アニメーションPNGにも同じ判断が必要です。元データがAPNGで、編集可能な静止画1枚だけが必要なら、APNGからSVGへの変換ツールでトレース前にフレームを選びます。動き自体が重要ならアニメーションを残すか作り直します。
PerfectVectorでのアニメーションGIFの扱い
PerfectVectorは、フレーム選択を目に見える判断として扱います。アップロードしたGIFに複数フレームがある場合、ベクター化前に停止します。元のアニメーションを静止画プレビューの横で再生し、必要なフレームを選ぶタイムラインを表示します。選択を確定するまで、変換用のアップロードは行いません。
その後、選択フレームを静止画として準備し、編集可能なSVGパスへトレースします。結果のSVGは、他のGIFフレームを残さず、アニメーションとしても再生されません。特定の瞬間のきれいな素材が目的なら、この制約が役立ちます。どのポーズ、表情、構図がベクターになるかを正確に把握できます。
静的GIFは動きの判断が不要なため、フレーム選択を省略します。いずれの場合も、SVGの品質は選んだ画像に依存します。フラットな図形と明確な縁は、動きのぼけ、写真の質感、小さな細部よりきれいにトレースできます。
GIFの1フレームを編集可能なSVGにする方法
- GIFを再生して役立つ瞬間を選びます。 明確なシルエット、分離したオブジェクト、できるだけ少ない動きのぼけがあるフレームを探します。最初のフレームが自動的に最良とは限りません。
- 関係のないアニメーション領域を切り抜きます。 大きなキャンバス内の小さな被写体では、有用なピクセルが少なくなります。最終構図の余白は残しつつ、空白や雑音のある縁を除きます。
- 図柄が許す場合は色を制限します。 フレーム間の小さなパレット変化が余分な図形を作る場合があります。ロゴ、アイコン、フラットなイラストのパレットが不必要に複雑なら、トレース前に選択した静止画を簡略化します。
- GIFからSVGへの変換ツールを使います。 アニメーションをアップロードし、タイムラインを動かしてフレームを確定し、PerfectVectorでその静止画をトレースします。
- サムネイルではなくパスを調べます。 拡大し、図形を選び、曲線が滑らかでオブジェクトを実際に編集できるか確認します。小さな断片が大量にあれば、よりきれいなフレームを試すか、元画像を簡略化します。
- 出力先でSVGを確認します。 ベクターエディターで色を変える、印刷用にサイズを変える、実際に使う制作アプリへ読み込むなどを行います。正しい拡張子は出発点であり、図形も正しく動作する必要があります。
これは画像ベクター化の意味で説明する基本的な区別と同じです。トレースはピクセルを図形として再構築します。アニメーションの元データでは、フレーム選択が再構築するピクセル格子を決めます。
アニメーションを残すか作り直すべき場合
フレーム自体が目的ならラスターアニメーションを残す
リアクションGIF、写真のループ、画面録画、質感の多いアニメーションは、通常トレースの利益が小さいです。各フレームの細部を図形へ簡略化する必要があり、元と似なくなる場合があります。パスの編集より正確な再生が重要なら、納品先に適した形式でアニメーションを残します。
オブジェクトが目的なら動きを作り直す
ローダー、アイコン、ロゴの出現、少数のフラットな部品からなる単純なキャラクターは、実際のベクターアニメーションに適しています。まずきれいなベクターオブジェクトを作り、動きを付けます。MDNのSVGアニメーションガイドは、SVG内で属性、変換、色、移動パスを動かす方法を示します。
この手順なら、ほぼ同じトレース済みフレームの積み重ねではなく、意味のある編集可能な部分が得られます。また、アニメーションコードも素材の一部になります。ID、クラス、タイミング用のフックが重要なら、アニメーションのフックを失わずSVGを編集するガイドのコードを保つ方法に従います。
フレーム式SVGは事情を理解して使う
専用ツールはGIFフレームを抽出、トレースし、順番に再生できます。短いピクセルアートのループや意図的に段階的な動きに適する場合があります。整った1つのベクターの仕組みが自動でできるわけではありません。重複する図形、大きな文書ツリー、わずかに異なるトレースによるフレーム間のちらつきを調べます。
よくある変換の間違い
.svgなら編集可能なベクターパスだと思うこと。 ツールはSVGの外枠へラスターフレームを入れられます。拡大と選択で、図形なのか容器内のピクセルなのか分かります。- 確認せず既定のフレームを採用すること。 最初は空白、移行中、見た目の弱いフレームかもしれません。ループ全体を確認して選びます。
- 動きのぼけをトレースすること。 ぼけた手足や光は柔らかい境界となり、ベクター化処理が推測する必要があります。可能なら静まったフレームを選びます。
- 別々のトレースが完全に一致すると期待すること。 各フレームを別々にトレースすると、微小なピクセル差がパスや色を変える場合があります。不一致はちらつきになります。
- SVGが新しく聞こえるから写真をベクター化すること。 簡略化されたポスター風の解釈を意図する場合以外、写真はラスターの方が適しています。写真からSVGへの判断ガイドがその境界を説明します。
使用前に結果を確認する
選択フレームのSVGでは、次を確認します。
- 単に1フレーム目ではなく、意図したフレームが入っている
- 拡大しても縁が鮮明
- 主な色とオブジェクトを選択、編集できる
- 曲線がピクセルの欠点をすべて追わず、扱える数のノードを使っている。そうでなければノードが多すぎる場合の確認項目を使います
- 透明と切り抜きが選択フレームと一致する
- 想定どおり静止画である
アニメーションSVGでは、さらに実際に配置するブラウザー、エディター、公開システムで再生を確認します。静的なSVG図柄を開けるエディターでも、保存し直す際にすべてのアニメーション機能を残すとは限りません。
よくある質問
GIFからSVGへの変換はアニメーションを残しますか？ 自動では残しません。通常のベクター化ツールは1枚の静止フレームをトレースします。動きを残すには、フレーム式のアニメーションSVGを明示的に作るツールか、図柄をベクターオブジェクトとして作り直してアニメーション指示を作る別の手順が必要です。
どのGIFフレームをベクター化すべきですか？ 最も明確なシルエット、少ない動きのぼけ、役立つ構図、少ない重なりを持つフレームを選びます。1フレーム目を既定で採用せず、ループ全体を確認します。
SVGファイルはアニメーションにできますか？ できます。SVG要素はCSS、SMIL、JavaScriptなどで動かせます。その動きはベクター文書で制作する必要があります。ラスターフレームのトレースは図形を作りますが、アニメーションを考案しません。
変換したSVGがピクセルのままなのはなぜですか？ パスへトレースする代わりに、GIFやフレームをSVGの外枠に埋め込んだ可能性があります。拡大してオブジェクトを選びます。ピクセル状になる、または1枚のラスター画像として選択されるなら、編集可能なベクタートレースではありません。
フレーム式アニメーションSVGは本当のベクターですか？ 実際のベクターパスを含められますが、きれいな再利用可能なアニメーションになるとは限りません。各フレームで図柄の大部分を別の図形として繰り返す場合があります。その方法を選ぶ前に文書構造とパスの一貫性を調べます。
参考資料
- 米国議会図書館 — GIF89a — GIFのラスター画像、制御拡張、タイミング、ループを説明します。
- W3C — Scalable Vector Graphics（SVG）2 — SVGのベクター文書モデルを定義します。
- MDN — SMILによるSVGアニメーション — SVG属性、変換、動きのアニメーション制作を説明します。
- PerfectVector — GIFからSVGへの変換ツール — 現在の選択フレームのベクター化手順を示します。
動くファイルから、きれいで編集可能な1つの瞬間が必要ですか。GIFをアップロードし、フレームを選んでトレースしたSVGを確認します。シルエット、小さな細部、ノード数を確認して、その静止画が必要な素材なのか、動きのために専用のアニメーションを作るべきなのか判断してください。
