SVGをGIFに変換
GIFは使えてもベクターファイルを表示できない場所向けに、SVGを指定した幅のGIF画像として描画します。仕上がりは最大256色のパレットを持つ静止画で、SVGで何も描かれていない部分は透明のまま残ります。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
SVGファイルをアップロード
パソコンから、またはアップロード欄へドラッグして、.svgファイルを最大20個(1ファイル95 MBまで)追加します。
- 2
幅をピクセルで指定
このページでは、ベクター画像を幅600 pxで描画します。幅を変えるには、詳細設定の出力画像のサイズ変更にある数値を変更してください。高さは図の縦横比に合わせて自動で決まります。
- 3
GIFに変換
GIFに変換を押して、画像を1つずつ、またはまとめてZIPでダウンロードします。使う前に、実際に置く背景の上で1ファイル確認してください。
SVGをGIFに変換すると、解像度に依存しない図が、最大256色の固定ピクセルの格子になります。フラットなロゴやアイコンには十分ですが、グラデーションには向きません。
必要な幅でSVGをGIFに変換
SVGは命令の集まりです。このパスを描き、この色で塗り、このテキストを置く、という内容です。GIFはその逆で、最大256色のパレットのいずれかを指すピクセルの格子です。変換とは、命令を選んだピクセル幅で一度描画して結果を保存することなので、ここでは出力画像のサイズ変更の幅が他のどの設定よりも重要です。このページの初期値は600 pxです。
GIFは1987年にCompuServeが公開した形式で、1989年の改訂版GIF89aで透明と フレーム遅延が加わりました。この古さが今では最大の強みで、古いフォーラムのエンジン、一部のメールソフト、広告ネットワークなど、新しい形式を受け付けないソフトでもGIFは表示されます。一方SVGは、スクリプトを含み得るXMLのため、多くのアップロードフォームで拒否されます。
元がベクターなので、どの幅で描画しても鮮明さは失われません。GIFを実際に表示するサイズを選んでください。小さなGIFを後から拡大すると、SVGにはなかったぼやけが生じます。
| from ↓ · to → | 透明な背景 | なめらかな半透明の縁 | 256色を超える色数 | Animation |
|---|---|---|---|---|
| GIF | GIF to 透明な背景: yes | – GIF to なめらかな半透明の縁: no | – GIF to 256色を超える色数: no | GIF to Animation: yes |
| PNG | PNG to 透明な背景: yes | PNG to なめらかな半透明の縁: yes | PNG to 256色を超える色数: yes | – PNG to Animation: no |
| WEBP | WEBP to 透明な背景: yes | WEBP to なめらかな半透明の縁: yes | WEBP to 256色を超える色数: yes | WEBP to Animation: yes |
| JPG | – JPG to 透明な背景: no | – JPG to なめらかな半透明の縁: no | JPG to 256色を超える色数: yes | – JPG to Animation: no |
SVG
Scalable Vector Graphics(SVG)
SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。
- 圧縮方式
- –
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2001 · W3C
GIF
Graphics Interchange Format
GIF は1987年に CompuServe が導入した形式で、短いループアニメーションでは今も最も広く対応しています。可逆ですが、1フレームあたり 256 色のパレットに制限されるため、写真やグラデーションではバンディングやディザリングが目立ちます。透明はオン/オフのみ(1 ビット)で、曲線の縁がギザギザになります。アニメーション GIF は、同じクリップの MP4 や WebP よりはるかに大きくなることがよくあります。すべてのブラウザー、チャットアプリ、SNS で GIF を再生できます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 1987 · CompuServe
SVGからGIFへの変換は、メール署名、古いフォーラム、広告枠のようにGIFしか使えない掲載先で、ベクターのロゴを小さなフラット画像にする必要がある場合に使います。GIFからSVGは、拡大縮小できる元の図を取り戻すためのトレース作業です。
アニメーションSVGのGIF変換：変換されないもの
SMIL、CSS、スクリプトによるアニメーションは失われます
animate要素、CSSキーフレーム、JavaScriptでブラウザ上で動くSVGは、開始時の状態を示す静止したGIFの1フレームになります。動くGIFが必要な場合は、アニメーションを動画として録画し、動画をGIFに変換ツールで変換してください。
256色と1ビット透過の実際
SVGのロゴの多くは数色のフラットカラーで作られているため、パレットの制限で困ることはありません。問題になるのはアンチエイリアスのかかった縁とグラデーションです。描画されたSVGの曲線の縁には、半透明の中間ピクセルが含まれます。GIFではそれぞれを完全に表示するか完全に透明にするかのどちらかにするため、輪郭がギザギザになったり、淡い縁取りが残ったりすることがあります。
対策は、変換前に背景を決めることです。白いメール本文に置くなら、SVGに白い背景の四角形を入れます。暗いフォーラムのテーマなら、そのテーマの色にします。そうすれば縁のピクセルが正しい色になじみ、輪郭がなめらかに保たれます。掲載先を事前に特定できない場合は、PNGの方が安全です。
SVGをGIFに変換に関するよくある質問
SVGロゴをPNGではなくGIFにするのはなぜですか？
古いCMS、フォーラムの署名、画像形式にGIFを指定している広告テンプレートなど、掲載先がGIFを求める場合だけです。PNGはなめらかな縁と豊富な色を保てるため、どちらも使えるならSVGをPNGに変換する方が基本的におすすめです。
アニメーションSVGはGIFアニメになりますか？
いいえ。変換ではSVGを初期状態で1回だけ描画するため、SMILアニメーション要素、CSSキーフレーム、スクリプトは動作せず、静止した1フレームになります。動きを残すには、ブラウザで再生したアニメーションを動画として録画し、動画をGIFに変換してください。
ロゴの輪郭がギザギザになったり、白っぽい縁が出たりするのはなぜですか？
GIFの透明はピクセルごとにオンかオフかの2択のため、SVGの縁にある半透明のなめらかなピクセルは、残すか捨てるかのどちらかになります。ある背景に合わせてぼかされた縁は、別の背景では輪郭に色のにじみが出ます。変換前に、掲載先ページの色の背景用の四角形を追加しておくと、縁がきれいになじみます。
SVGのグラデーションはどうなりますか？
GIFのパレットは最大256色なので、なめらかなグラデーションは近似されます。短いグラデーションなら問題ありませんが、大きく微妙な変化のグラデーションでは段差やドット状のディザが目立ちます。SVGによくあるフラットカラーのロゴやアイコンなら、パレットに十分収まります。
変換したGIFはメール署名に使えますか？
はい。この変換が必要になる主な理由のひとつです。GmailやOutlookはメール内のSVG画像を表示しませんが、GIFは長年メールソフトで表示されてきました。署名が重くならないよう、幅は300〜600 px程度に抑えてください。
SVGのどのサイズ指定が読み取られますか？
図の幅、高さ、viewBoxから縦横比を割り出し、指定したピクセル幅で描画します。元がベクターなので、幅を大きくしても鮮明さは損なわれず、増えるのはファイルサイズだけです。
SVG・GIF関連ツール
- SVGをPNGに変換SVGのロゴやアイコンを、指定した幅（初期値1024 px）でPNGに変換します。透過背景もそのまま保持。DPIとピクセルの関係も解説します。
- PNGをGIFに変換GIFしか受け付けないツールやテンプレート向けにPNG画像をGIFに変換。256色パレットと1ビット透過が画像にどう影響するかを事前に確認できます。
- JPGをGIFに変換JPG画像をGIFに変換。掲示板のアイコン、メール署名、GIFしか読めないソフト向けに。一度に20枚、256色で出力、アカウント不要です。
- 画像をGIFに変換JPG、PNG、WebP、HEIC、SVGなどの画像をGIFに変換。掲示板、メール署名、古いシステム向けに。1回20ファイルまで、登録不要、透かしなし。
- SVGをJPEGに変換ベクター画像のアップロードを受け付けないポータルやCMS向けに、SVGをJPEGに変換。白背景、初期設定で幅1920 px、1回20ファイルまで、アカウント不要。
- GIFをPNGに変換GIFを透過を保ったままPNGに変換。最初のフレームを静止画として取り出すことも、アニメーションの全フレームを個別のPNGファイルとして書き出すこともできます。