AVIFをSVGに変換

AVIF画像を.svgファイルとして保存し、デザインツールやアイコン欄、SVG専用のアップロード先で使えるようにします。ピクセルはそのままSVGの中に収められるため、ロゴを変換する前に、最初のセクションを読んで目的どおりの結果になるか確認してください。

またはJPG, JPEG, JPE … ファイルをここにドロップ ·

1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除

出力

変換先

ファイルは当社のサーバーで処理され、30分後に削除されます。

画質と色

出力サイズの変更

出力画像のサイズ変更

元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。

メタデータとカラープロファイル

向きを自動補正

EXIF に保存された向きの情報で画像を回転し、どこでも正しい向きで表示されるようにします。

メタデータを削除

GPS の位置情報、カメラ情報、コメントを削除します。カラープロファイルは下の設定で別に残せます。

カラープロファイルを保持

埋め込まれた ICC プロファイルを保持し、変換後も色を正確に保ちます。

色空間

画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。

DPIタグ

dpi

メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。

このツールの使い方

1
AVIF画像をアップロード
最大20個の .avif ファイルをアップロード欄にドラッグするか、お使いの端末から選択してください。1ファイルあたり最大95 MBまで対応しています。
2
出力形式とサイズを確認
変換先にはすでにSVGが設定されています。埋め込む画像を元より小さくしたい場合は、詳細設定の出力画像のサイズ変更を使ってください。
3
変換して保存
SVGに変換 → を押して、.svg ファイルを1つずつ、または複数の場合はZIPにまとめてダウンロードします。ブラウザのタブで開いて、想定どおりに表示されるか確認してください。

回答

AVIFをSVGに変換できますか?

はい。ただしAVIFはピクセルの集まりで、形式を変えるだけではピクセルがベクター図形にはなりません。このページでは、AVIF画像を含んだSVGを作成するため、SVGのみ受け付けるアップロードに使えます。拡大や切断をしたいロゴは、画像SVG変換でパスにトレースしてください。

AVIFをSVGに変換したファイルの中身

AVIFはAlliance for Open Mediaが開発した形式で、2019年にAV1 Image File Formatの仕様が公開されました。AV1動画コーデックを基にしており、写真を圧縮したピクセルとして保存します。一方、2001年にW3Cが策定したSVGは、パス、図形、テキスト、塗りなどの描画命令をXMLで保存します。2つの形式は、画像の表し方がまったく異なります。

SVGにはビットマップを描画内に配置できる image 要素があり、この変換ではそれを使っています。結果は、元のピクセルサイズのまま画像を埋め込んだ有効な.svgで、透過も保持されます。ブラウザ、Figma、Inkscape、SVG専用のアップロード欄でSVGファイルとして受け付けられます。

ただし、画像の性質そのものは変えられません。十分に拡大すると、AVIFと同じピクセルが見えます。図形がなく埋め込み画像が1つあるだけなので、個々の図形の色を変えることもできません。

ビットマップ埋め込みかベクタートレースか：変換前に選ぶ

このページ

AVIFをSVGに埋め込む

画像をそのままSVGにコピーします。

元画像と同じ見た目
写真やグラデーションにも使える
透過を保持

画像SVG変換

AVIFをパスにトレースする

輪郭や色の領域をベクター図形に変換します。

拡大してもぼやけない
色ごとに編集できる
カッティングマシンがたどれる

4 : 3埋め込み画像3バイトあたりのbase64テキストの文字数

ビットマップを含むSVGが、ビットマップのファイルより大きくなるのはこのためです。

AVIF

AV1 Image File Format

AVIFは、AV1動画コーデックで圧縮した静止画と画像シーケンスを保存する形式で、2019年にAlliance for Open Mediaが仕様を確定しました。同じ見た目の品質なら、通常JPEGやWebPよりファイルが小さくなり、透過、アニメーション、広色域、HDRにも対応します。エンコードは従来の形式より遅く、低品質設定では非常に細かいテクスチャーがなめらかになりすぎることがあります。主要なブラウザーはすべてAVIFを表示できますが、多くのデスクトップアプリ、SNS、古い端末では開けません。

圧縮方式: 非可逆または可逆
透過: 対応
アニメーション: 対応
登場時期: 2019 · Alliance for Open Media

AVIF 変換

SVG

Scalable Vector Graphics(SVG)

SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。

圧縮方式: –
透過: 対応
アニメーション: 対応
登場時期: 2001 · W3C

SVG 変換

AVIFで保存したサイト用画像をSVGしか受け付けない欄に入れたいとき、または編集できるロゴを得たいときに「AVIF SVG 変換」で検索されます。前者にはラッパー、後者にはトレースが必要です。

AVIFからSVGへの変換に関するよくある誤解

誤解.svgで保存したファイルなら、どれも鮮明さを保ったまま拡大できる。

事実きれいに拡大できるのはベクター部分だけです。SVGに埋め込まれたAVIFやPNGは、元のビットマップと同じようにぼやけます。

誤解AVIFからSVGへの変換ツールは、どれも画像をトレースする。

事実単純な形式変換では、このページのようにビットマップを埋め込みます。SVGをテキストエディターで開き、長いbase64のブロックがあれば、トレースではなく画像を包んだだけです。

誤解写真をトレースしたSVGは、元の写真より優れている。

事実写真をトレースすると階調が失われ、ポスター風の仕上がりになります。向いているのはフラットなアートワークで、人物や風景には向きません。

AVIFをSVGに変換：よくある質問

AVIF写真を本物のベクター画像にできますか？

写真らしい見た目を保ったままでは変換できません。ベクターファイルは図形と塗りを記述するもので、写真には無数の微妙な階調があるため、トレースするとポスター風に階調が潰れるか、非常に重いファイルになります。写真の場合は、このページの埋め込みSVGか通常のPNGが現実的な選択です。

SVGを拡大するとぼやけるのはなぜですか？

中のAVIFが、あくまで固定されたピクセルの集まりだからです。SVGの枠は自由に拡大縮小できますが、その中のビットマップが細部を取り戻すことはありません。どのサイズでも鮮明なのは、トレースで作ったパスだけです。

このSVGはCricutやレーザーカッターで使えますか？

多くの場合は開けますが、切るためのデータがありません。カッターやプロッターはパスをたどって動作しますが、埋め込まれたビットマップにはパスがないためです。画像SVG変換で画像をトレースすると、刃やレーザーがたどれる輪郭を作れます。

AVIFの透過はSVGでも保持されますか？

はい。AVIFもSVGもアルファチャンネルに対応しているため、切り抜きのロゴやステッカーは、色付きのページに置いても透明な背景のままです。

SVGファイルがAVIFより大きくなるのはなぜですか？

AVIFは現在使われている中でも特に効率の良い画像コーデックですが、SVGに埋め込む画像は通常base64テキストで書き込まれ、3バイトにつき4文字が必要になります。そのため、元のAVIFより.svgはかなり大きくなります。

変換したSVGはどのアプリで開けますか？

最新のブラウザ、Inkscape、Figma、Illustrator、多くのオフィスソフトでSVGを読み込めます。SVGは表示できてもAVIFのデコーダーがないソフトでは、空の枠が表示されることがあります。何も表示されない場合は、AVIFをPNGに変換してPNGを配置してください。