`.svg` ファイルをアップロードし、必要に応じて出力の幅と高さを入力し、有損または無損失 AVIF を選んで変換を開始します。処理が終わったら、SVG から描画された `.avif` ファイルをダウンロードします。
SVG から AVIF への変換ツール
SVG ベクター画像を、対応サイトやプレビュー、納品用の固定サイズ AVIF 画像にしたいときに使えます。.svg ファイルをアップロードし、出力サイズを選び、有損または無損失の AVIF を指定して、完成した .avif ファイルをダウンロードします。
この SVG から AVIF への変換ツールでできること
このツールは SVG ベクターファイルを描画し、見えている結果を AVIF ラスター画像として書き出します。拡張子を変えるだけではなく、実際に変換します。アップロードした `.svg` ファイルを読み込み、選択したサイズで画像をラスタライズし、描画されたピクセルを AVIF としてエンコードします。
| 設定 | 制御する内容 | 実用例 |
|---|---|---|
| SVG アップロード | 1 つの `.svg` 元ファイルを受け付けます | ファイル拡張子が `.svg` のときに使います |
| 幅と高さ | 描画後の AVIF サイズを設定します | ウェブページの枠、アイコンサイズ、プレビュー、高密度表示用の出力に合わせます |
| 圧縮モード | 有損または無損失の AVIF を選びます | ファイルサイズと見た目の忠実度のバランスを取ります |
| 品質 | 有損 AVIF の品質を 30 から 80 で設定します | 低い値は小さいファイルに、高い値はより多くの細部保持に向きます |
| AVIF 出力 | ラスター形式の `.avif` ファイルをダウンロードします | AVIF に対応したアプリやブラウザで使います |
元ファイルが SVG で、必要な結果が AVIF のときにこのページを使ってください。別のラスター形式が必要な場合は、SVG から PNG への変換ツール または SVG から WebP への変換ツール を使えます。作成した AVIF のピクセルサイズを後から変えたい場合は、同じ元ファイルを何度も変換するのではなく、画像リサイズ を使ってください。
オンラインで SVG を AVIF に変換する方法
1
手順 1: SVG ファイルをアップロード
デバイスから `.svg` ファイルを選ぶか、アップロード領域へドラッグします。このページは 1 つの SVG を AVIF に変換するためのものなので、描画したい正しい元ファイルを用意してください。
2
手順 2: AVIF の出力サイズを設定
AVIF ファイルを特定のピクセルサイズに合わせたい場合は、幅と高さを入力します。現在の入力欄は 1px から 16384px まで受け付けます。SVG はベクター形式なので、選んだサイズが AVIF 出力のラスタライズ後のピクセル寸法になります。
3
手順 3: 有損または無損失の AVIF を選択
ファイルサイズを小さくしたい場合は有損モードを使います。描画された SVG に近い出力を重視する場合は無損失モードを使います。有損モードでは 30 から 80 の品質レベルを選べます。
4
手順 4: 変換して AVIF ファイルをダウンロード
変換を開始し、処理が終わったら `.avif` の結果をダウンロードします。後でパス、テキスト、色、viewBox 設定、レイアウトを編集する可能性がある場合は、元の SVG を残しておいてください。
SVG を AVIF にラスタライズすると何が変わるか
SVG をラスタライズするとは、ベクターの指示をピクセルに描画することです。SVG は図形、パス、文字、グラデーション、レイアウト規則を記述でき、きれいに拡大縮小できます。AVIF はピクセルを保存するため、SVG を AVIF に変換すると、選択した寸法で SVG を描画した状態の画像になります。
| 変換前 | 変換後 |
|---|---|
| 編集可能なベクターマークアップ | ラスター AVIF 画像 |
| 固定ピクセルなしで拡大縮小 | 固定されたピクセル幅と高さ |
| パス、テキスト、CSS、viewBox データを含められます | エンコードされた画像ピクセルを含みます |
| 元ファイルとして保存するのに適しています | AVIF 対応環境で配信用画像として使うのに適しています |
次の利用先で軽量なラスター画像が必要な場合に便利です。ただし、ダウンロードした AVIF は元の SVG のようには編集できません。元の SVG はマスターファイルとして保管してください。
AVIF のサイズと品質設定の選び方
最適な SVG から AVIF への設定は、画像をどこで使うかによって変わります。大きな描画サイズは見える細部を多く残せますが、エンコードするピクセル数も増えます。
| 出力目的 | 推奨サイズの考え方 | 役立つ理由 |
|---|---|---|
| ウェブサイトのアイコン | 最終表示サイズまたは約 2 倍 | 標準画面と高密度画面で輪郭をきれいに保ちます |
| ロゴのプレビュー | 実際に見えるレイアウトサイズに合わせる | 必要以上に大きなファイルを書き出すのを避けられます |
| CMS 用画像 | アップロード要件に合わせる | プラットフォーム側の予期しないリサイズを減らします |
| アプリや UI 素材 | 配置枠の正確なサイズを使う | 素材の寸法を予測しやすくします |
| 大きなプレビュー | 必要なピクセル幅を使い、最大 16384px まで | 想定される表示サイズに必要な細部を残します |
有損 AVIF の品質は、まず既定値の 50 から始めます。小さいファイルが必要なら下げ、細かな文字のような要素や輪郭を重視するなら上げます。
| 品質 | 向いている用途 |
|---|---|
| 30-40 | より小さい AVIF 出力 |
| 50 | バランスのよい既定値 |
| 60-80 | より多くの見える細部を保持 |
できるだけ小さいファイルより忠実度を重視する場合は、無損失モードが役立ちます。それでも出力はラスター AVIF であり、ベクターファイルではありません。
SVG を AVIF に変換するのが向いている場面
SVG は長期的な元ファイルとして優れていることが多い形式です。ベクターとして編集するのではなく、現代的なラスター画像として配布したい場合に SVG を AVIF に変換します。
ウェブ画像の配信
AVIF 対応ブラウザ向けに軽量なラスター画像を用意できます
固定サイズのプレビュー
出力のピクセル寸法を予測できます
CMS やアプリへのアップロード
SVG マークアップよりラスター画像のほうが安定して扱われるシステムがあります
複雑なイラスト
細かな SVG を 1 つの画像ファイルにしたい場合に AVIF が役立つことがあります
高密度向け素材
エンコード前に SVG を大きめのピクセルサイズで描画できます
AVIF が新しいという理由だけで変換する必要はありません。無限に拡大縮小したい、編集可能なパスやテキスト、CSS スタイル、または対象アプリでの広い SVG 対応が必要な場合は、元の SVG を使い続けてください。
ファイル処理と実用上の制限
SVG ファイルはサーバー側処理のためにアップロードされ、24 時間以内に削除される予定です。通常の画像変換に使用し、オンライン変換サービスで処理したくないファイルはアップロードしないでください。
このページは、アップロードされた SVG ファイルを 1 つずつ処理します。一括変換、SVG コード貼り付け編集、URL から画像への変換、SVG 最適化、ベクター編集、アニメーション書き出し、AVIF から SVG への逆変換には対応していません。
結果を予測しやすくするには、自己完結した SVG ファイルを使ってください。重要なスタイルは埋め込み、壊れた外部参照は避けます。特定フォント、フィルター、リンク画像、複雑な効果に依存する SVG は出力を確認してください。この変換ツールは SVG を AVIF に描画するためのものですが、見た目は元の SVG の作り方にも左右されます。
避けたいよくある間違い
`.svg` を `.avif` に名前変更する
拡張子を変えても画像は変換されません。本当の SVG から AVIF への変換では、SVG を描画し、そのピクセルを AVIF 画像データとしてエンコードする必要があります。
AVIF がベクターのままだと思う
ダウンロードした AVIF はラスター画像です。編集可能なパス、テキストオブジェクト、CSS ルール、viewBox の挙動、無限のベクタースケーリングは保持されません。
最初から最大サイズで書き出す
このツールは最大 16384px まで対応しますが、多くのウェブや UI 素材は実際に必要なサイズで十分です。大きなファイルは処理が遅くなり、保存容量も増えます。
外部リソースに依存する
外部フォント、CSS、リンク画像を含む SVG は、デザインアプリのプレビューと異なる表示になることがあります。自己完結した SVG のほうが変換では安定します。
このページを逆変換に使う
このページは SVG を AVIF に変換するだけです。AVIF を SVG に戻したり、ピクセルから編集可能なベクターパスを再構築したりはできません。
よくある質問
SVG から AVIF への変換ツールは、SVG ベクター画像を描画し、その結果を AVIF ラスター画像として書き出します。次の工程が AVIF を受け付け、編集可能なベクターマークアップを必要としない場合に便利です。
SVG をラスタライズするとは、選んだサイズでベクターの指示をピクセルに変えることです。変換後の AVIF 出力は固定ピクセル寸法を持ち、編集可能な SVG のようには扱えません。
いいえ。AVIF はラスター画像形式です。編集可能なパス、テキスト、スタイル、無限拡大縮小が必要な場合は、元の SVG を残してください。
画像を表示する場所に合わせて選びます。ウェブアイコンや UI 素材では、最終表示サイズまたは高密度画面向けに約 2 倍を使います。出力が本当に必要としない限り、最大サイズは避けてください。
小さいファイルを優先する場合は有損 AVIF を使います。描画された SVG に近い出力を保ちたい場合は無損失 AVIF を使います。有損モードでは品質 50 から始め、結果を見て調整します。
AVIF はアルファ透明をサポートしているため、描画された SVG の透明部分は AVIF 出力でも透明のままにできます。透明度が重要な場合は、実際に使う背景上で結果を確認してください。
いいえ。このページは SVG から AVIF への変換専用です。AVIF ファイルはピクセルでできているため、編集可能なベクターパスに戻すには別の処理が必要で、このページでは対応していません。
できません。現在のツールは、アップロードされた `.svg` ファイルを 1 つずつ処理します。SVG マークアップがある場合は、まず有効な `.svg` ファイルとして保存してください。SVG が URL にある場合は、ファイルをダウンロードしてからデバイスからアップロードしてください。
いいえ。SVG ファイルはサーバー側処理のためにアップロードされ、24 時間以内に削除される予定です。オンライン変換サービスで扱いたくない個人情報や機密ファイルはアップロードしないでください。