SVG を PNG に変換してロゴを画像化する

こちらの向きは簡単です。SVGは描画の指示をまとめたものなので、PNGにするには指定した大きさで描画するだけで済みます。何かを推測する必要がある逆方向の変換とは違います。問題は「できるかどうか」ではなく「どの大きさが必要か」です。

最も確実な方法：ファビコン ジェネレーター

どのブラウザもSVGを画面に表示できますが、SVGという「ファイル」をキャンバスが読み込めるかはブラウザによって差があります。速い方法だけに頼った変換ツールは、一部のブラウザで静かに失敗することがあります。ファビコン ジェネレーターはこの差を想定して作られていて、速い方法をまず試し、ブラウザが直接読み込めない場合は画面上に描画する方法に切り替えるので、よく使われる1つのブラウザだけでなく、現行の各ブラウザで動きます。

1. ファビコン ジェネレーターを開き、SVGファイルを選びます。
2. 透明を保ちたいときは背景を透明ににチェックし、そうでなければ背景色を選びます。
3. ZIPをダウンロードします。中には512×512のPNG（android-chrome-512x512.png）が入っていて、同じ画像を16・32・48・180・192ピクセルでも収録し、サイトアイコンが要るときのためにfavicon.icoとWebアプリマニフェストも含まれます。

512ピクセスでない大きさが必要な場合は、そのPNGを画像のリサイズで開いて、必要な大きさを指定してください。PNGはロスレスなので、縮小しても最初から目的の大きさで描画し直すのと同じだけの情報しか失われず、SVGのシャープな輪郭は最初の描画のときにすでに確定しています。

単発の画像ならもっと早い方法

形式変換もSVGファイルを受け付け、変換前にファイルに書かれた大きさ（widthとheight、またはviewBox）で描画します。その大きさがすでに欲しいものと一致するなら早いですが、ブラウザの標準の画像デコーダーがそのファイルを認識できるかに依存するため、JPGやPNGに比べるとSVGでは確実さに差があります。「開けません」と出た場合は、上のファビコン ジェネレーターを使ってください。

ファイル内の大きさが重要な理由

明確なwidth・heightも曖昧でないviewBoxも無いSVGには、自然な大きさがありません。そのため描画側が何らかの大きさを選ぶことになり、しばしば300×150のような小さな既定値になります。出来上がったPNGが変な大きさや小さすぎる大きさになったら、テキストエディターでSVGを開いてこれらの属性を確認するか、ファビコン ジェネレーターで描画してから必要な大きさにリサイズしてください。そうすれば推測を避けられます。

残るもの・残らないもの

• シャープさ：ベクターには固定の解像度がないので、PNGは選んだ大きさでくっきり描画されます。何かを拡大したわけではないので、拡大によるぼやけは起きません。
• 透明度：PNGなら保たれます。JPGを選ぶと透明な部分が背景色で塗りつぶされるので、ロゴを1色以外の背景に置く予定ならPNG（またはWebP）を選んでください。
• アニメーションや操作性：SVGはアニメーションやスクリプトを含められますが、PNGは1枚の静止画で、それらは失われます。
• 編集のしやすさ：PNGは形ではなく画素になります。作品をまた編集する可能性があるなら、元の.svgファイルは残しておいてください。

次に使えるツール

PNGができたら、切り抜きで正方形に整えたり、アップロード前に圧縮したり、まだならfavicon.ico一式を作るのに使えます。

よくある質問