変換するまで SVG にサイズがない理由
「画質を落とさずに」SVG から PNG へ変換するにはどうすればいいか、とよく聞かれますが、この問いには最初に解いておきたい誤解が含まれています。SVG には失うべき画質がありません。そもそもピクセルを持っていないのです。
ベクターは形を記述し、ピクセルは絵を保存する
SVG は、固定のピクセルサイズを持たない座標系上で図形（曲線、塗り、テキスト）を記述したものです。PNG は固定されたピクセルの格子です。したがって SVG から PNG への変換は必ずサイズを選ぶことを意味し、どのサイズを選んでも結果は鮮明になります。
SVG をテキストエディターで開くと、命令が並んでいます：この点へ移動、あの点へ曲線を引く、この色で塗る。描画が何ピクセル幅なのかは、どこにも書かれていません。それは表示のたびにブラウザが決めることで、毎回違う値でも構わないのです。
viewBox、width、height の本当の意味
ルート要素の 3 つの属性がサイズを制御します。viewBox は座標系を定義します——「この描画は横 0〜240、縦 0〜160 に広がる」。width と height は、あればデフォルトの表示サイズを提案します。多くの SVG は viewBox しか持たず、width と height しかないものもあれば、どちらもないものも少数あります。
このコンバーターは存在する属性を読み取り、ブラウザと同じ方法で固有サイズを割り出して 1× の基準にします。何も宣言されていなければ 1,024 ピクセルにフォールバックするので、使える画像が必ず得られます。
「画質を落とさずに」が間違った問いである理由
SVG は同じ命令からどんなサイズにもレンダリングできるので、4,000 ピクセルの PNG は 400 ピクセルの PNG とまったく同じ鮮明さです——レンダラーがより多くのディテールを描くだけです。画質が落ちる唯一のケースは、小さくレンダリングしてから後で PNG を拡大することです。対策は、ここで、変換時に最終サイズを決め、PNG を決して拡大しないことです。
この SVG から PNG へのコンバーターがすること
このツールは SVG ファイルをブラウザ内で読み込み、実行可能な要素をすべて取り除き、ブラウザ自身のエンジンで選んだサイズに 1 枚ずつレンダリングし、透過を保ったロスレス PNG を返します——個別にも、ZIP にまとめても。
ブラウザと同じレンダラー
サーバー側のコンバーターは librsvg、Inkscape、ImageMagick といった別のライブラリを使い、それぞれに穴があります：対応していないフィルター、置き換えられるフォント、わずかに違って描かれるグラデーション。戻ってきた PNG が、見ていた SVG と一致しないことがあるのです。
ここではレンダリングを Blink、Gecko、WebKit——使っているブラウザのエンジン——が担当し、SVG をキャンバスに描画します。SVG がブラウザで正しく表示されているなら、PNG も同じに見えます。文字どおり同じ描画だからです。
スクリプトは除去、アップロードはなし
SVG は XML なので、<script> 要素や onload ハンドラー、埋め込み HTML を含められます。出所不明のファイルを気軽に開くべきではありません。レンダリング前にコンバーターはスクリプト、イベント属性、foreignObject ブロックを取り除き、さらにコードを実行できない画像要素の中でレンダリングします。二重の防御、どちらもローカルです。
どの時点でもアップロードは行われません。一括変換の間、ブラウザの開発者ツールの Network パネルは空のままです。
SVG から PNG へ 3 ステップで変換する方法
SVG ファイルをドロップ
1 つ以上の .svg ファイルを破線の枠にドラッグするか、クリックして選択します。デスクトップでは一度に最大 10 個。各行にベクターのライブプレビューが表示されます——ブラウザは SVG をネイティブに表示するので、見えているものがそのままレンダリングされます。
サイズと背景を選ぶ
変換設定で「倍率」（SVG 自身のサイズの 1×・2×・3×・4×）か「幅」（プリセットまたは任意のピクセル幅。高さはアスペクト比に従います）を選びます。次に背景を選択：デフォルトは透過、または白・黒・任意の色に統合できます。
PNG または ZIP をダウンロード
「変換」を押します。各ファイルに出力サイズと PNG の容量が表示されます。1 つずつダウンロードするか、「すべてダウンロード」を押して、元のファイル名に .png 拡張子を付けた ZIP を受け取ります。
SVG ファイルを最大 10 個ドロップ。ローカルで読み込まれ、アップロードされることはありません。
倍率を選ぶか幅を入力し、透過または単色の背景を選びます。
PNG を 1 枚ずつダウンロードするか、まとめて ZIP でダウンロードします。
適切な出力サイズの選び方
サイズは選ぶものなので、それぞれの選択肢が何のためにあるかを知っておくと役立ちます。2 つのモードでほぼすべてのケースをカバーできます。
1×・2×・3× — 画面密度に合わせる
通常のモニターは CSS の 1 ポイントあたり 1 ピクセルを表示します。Retina や HiDPI ディスプレイは 2 ピクセル、最近のスマホの多くは 3 ピクセルです。画面上で 32 ポイントのアイコンには、それぞれ 32、64、96 ピクセルの PNG が必要になります。1×・2×・3× の意味はこれがすべてです。
Web やアプリの制作では、同じ SVG を 3 つの倍率すべてで書き出すのが普通です。ファイルを一度ドロップし、1× で変換、設定を変えてもう一度変換——あるいは単純に 3× で書き出して、プラットフォーム側に縮小を任せてもかまいません。
よくある用途のサイズ早見表
ファビコン：16、32、48 ピクセル。512 ピクセルの PNG から PNG から ICO ツールで作るのが最適です。アプリアイコン：ストア向けに 1024 ピクセル、その後 アイコンセット生成ツールへ。SNS のアバター：400〜800 ピクセル。Open Graph 画像：1200 × 630。マーケットプレイスの商品画像：長辺 2000 ピクセルが一般的です。
印刷やマーケットプレイス向けのカスタム幅
印刷では 300 DPI で物理サイズから逆算します：A4 ページは幅 2,480 ピクセル、A3 は 3,508、6 インチのステッカーは 1,800 です。幅モードに切り替えて数値を入力すれば、高さは SVG のアスペクト比に従います。コンバーターは出力の長辺を 16,384 ピクセルに制限しており——ブラウザがキャンバスに課す上限です——リクエストを縮小せざるを得なかった場合はその旨を表示します。
透過、背景、そして縁
ロゴ、アイコン、イラストなど、ほとんどの SVG には背景がありません。図形は何もない空間に浮かんでいます。PNG はそれを保存でき、この用途で JPG より PNG を選ぶべき 2 つの理由のうちの 1 つです。
背景を透過のまま保つ
ここでは透過がデフォルトです。SVG が塗らなかったピクセルはすべて透明のまま残り、曲線や斜めの縁に沿った部分的に覆われたピクセルも含まれます。この柔らかな縁のピクセルのおかげで、PNG は暗いスライドや色付きボタン、写真の上に、目立つ輪郭なしで載せられます。
結果はチェッカーボードの上に表示されるので、ダウンロード前に透過を確認できます。
色に統合すべきとき
アルファを扱えない出力先もあります——古いメールクライアント、一部の印刷ワークフロー、裏で JPG に変換してしまう一部のマーケットプレイスのアップローダーなど。そうした場合は背景設定で白、黒、またはカスタム色を選びます。図形はその色の上に合成され、PNG は完全に不透明になります。
画像が置かれる場所に合った色を選んでください。白に統合してから PNG を暗い背景に置くと、縁のピクセル——今や薄いオレンジや薄い青、図形の色の淡い版——がうっすらとしたハローとして現れます。このハローは変換したロゴに関する最も多い不満ですが、背景の選択の問題であって、レンダリングの欠陥ではありません。
うまくいかないケース（と対処法）
ブラウザでレンダリングするということは、PNG が画面と一致する一方で、「画像が何を読み込んでよいか」に関するブラウザのルールも受け継ぐということです。
フォントが見つからない
SVG 内のテキストは、指定されたフォントでレンダリングされます。そのフォントがお使いの端末にインストールされておらず、ファイルにも埋め込まれていなければ、ブラウザが代替フォントを使い、PNG にはその代替フォントが写ります。URL で参照される Web フォントも読み込まれません：画像としてレンダリングされる SVG は外部リソースを取得できないからです。
確実な対処法は、SVG を書き出す前にデザインツールでテキストをアウトライン化することです。文字はパスになり、どこでも同じにレンダリングされます。
リンクされた画像が表示されない
同じルールは <image href="https://…"> にも当てはまります。URL から取り込むラスター画像は空白になります。代わりに埋め込んでください——ほとんどのエディターに「画像を埋め込む」書き出しオプションがあり、リンクを SVG 内の data URI に変換してくれます。埋め込まれた画像は問題なくレンダリングされます。
出力が空白、または極端に小さい
viewBox も width/height も持たない SVG は、ここではフォールバックサイズでレンダリングされます。描画が原点から遠く離れていると、表示領域の外に出てしまうことがあります。アートワーク全体を囲む viewBox を追加してください。出力が極端に小さい場合は、ほぼ確実に SVG が小さな width と height を宣言しています——幅モードに切り替えて、本当に欲しいサイズを入力してください。
症状・原因・対処法
| 症状 | 考えられる原因 | 対処法 |
|---|---|---|
| PNG のフォントが違う | フォント未インストール / Web フォントがブロック | 書き出し前にテキストをアウトライン化 |
| SVG 内の写真が空白 | 埋め込みではなく URL でリンク | 画像を埋め込んで再書き出し |
| PNG が極端に小さい | SVG が小さな width/height を宣言 | 幅モードで目標サイズを入力 |
| アートワークが切れる | viewBox が描画を囲んでいない | エディターで viewBox を修正 |
| 暗い背景でハローが出る | 白に統合した | 透過のままにするか、実際の背景色に統合 |
| フィルターやぼかしの見た目が違う | サーバー型コンバーターが別のエンジンを使用 | ここで変換——ブラウザがレンダリング |
SVG を PNG にして何を作るか
SVG が完璧に拡大縮小できるなら、そもそもなぜ SVG から PNG へ変換するのでしょうか。それは、いまだに多くのソフトウェアがベクターを受け付けないからです。
アイコンセットとファビコン
アプリストア、ファビコン形式、多くのアイコンシステムは固定サイズの PNG を求めます。必要な最大サイズで一度変換し、残りはアイコン生成ツールや PNG から ICO で切り出しましょう。
SVG を拒否するプラットフォーム
SNS、マーケットプレイス、コミュニティフォーラム、ほとんどの CMS メディアライブラリは SVG のアップロードを拒否します——SVG はスクリプトを含められるため、セキュリティ上の理由も一因です。透過背景の 2× PNG が万能の代替品です。
メール署名とニュースレター
メールクライアントは SVG を削除するか、壊れた画像を表示します。メール内のロゴは PNG が定番で、理想は 2× で書き出して半分のサイズで表示し、Retina 画面でも鮮明に保つことです。
印刷と大判出力
印刷会社は PDF と高解像度ラスターを受け付けます。幅モードでロゴを 3,000 または 4,000 ピクセルにレンダリングすれば、ポスターサイズでもきれいに印刷できます——目標サイズでラスタライズしたベクターには、拡大によるぼやけがありません。
ブラウザ型 vs サーバー型の SVG コンバーター
オンラインの SVG から PNG へのコンバーターはほぼすべてファイルをアップロードし、サーバー上で librsvg、Inkscape、ヘッドレスブラウザを使ってレンダリングします。単純な図形なら問題ありませんが、少し複雑になるとずれが出ます。
忠実度
レンダリングライブラリごとに、SVG 仕様のサポート範囲が微妙に異なります。フィルター、マスク、ブレンドモード、ファイル内の CSS、パス上のテキストが定番の犠牲者です。ブラウザエンジンは現存する中で最も完全な SVG レンダラーであり、お使いの端末のエンジンでレンダリングすれば、PNG がプレビューと食い違うことはありえません。
プライバシーと制限
未公開のロゴ、製品図、社内の数字が入ったグラフ：それらをコンバーターにアップロードするのは、誰も意図していない小さな情報漏えいです。サーバー型ツールはレンダリングにコストがかかるため、ファイルサイズや 1 日の利用回数にも上限を設けています。自分の端末でレンダリングすれば、どちらの問題も消えます——漏れるものも、計測されるものもありません。
サーバーが勝る点：非常に古いハードウェアでは、複雑な SVG の一括処理がデータセンターより遅くなります。ロゴ 10 個程度なら差はありません。
できあがった PNG の次の使い道
出力は標準的な PNG なので、ここにあるどのツールでも、再アップロードなしにそのまま扱えます。
Web 用なら PNG 圧縮にかけるか、WebP に変換しましょう——どちらも透過を保ったまま容量を減らせます。メールや写真用なら PNG から JPG で統合して軽量化できます。後から正確な寸法が必要なら画像リサイズを。ラスターから始めてベクターが欲しくなったら、PNG から SVG が逆方向の変換を担当します。