デザイナーからロゴが .svg で届く。あるいは同僚がアイコンセットを共有してくる。無料素材サイトからグラフィックをダウンロードすることもあるでしょう。ファイルをダブルクリックすると、Windowsはそれをブラウザーで開きます。確かに表示はされるものの、サイズを変えることも、特定の解像度を指定することもできず、ただ眺めることしかできません。
あなたが欲しいのは .png です。プレゼン資料に貼り付けたり、Webサイトにアップロードしたり、メールに添付したり、ドキュメントに差し込んだりできる、ごく普通の画像ファイル。どの端末のどのビューアーでも開ける形式です。
一番わかりやすい道筋は、SVGをIllustratorやPhotoshopで開いてPNGとして書き出すことでしょう。しかし、これらのAdobe製品は月額のサブスクが必要で、画像を変換するためだけに毎月の費用を払い続けるのは、デザイナーでもない限り正当化しづらいものです。幸い、WindowsでAdobeのソフトに触れずにSVGからPNGへたどり着く方法は、いくつもあります。
結論から先に: 1回かぎりの手早い変換なら、SVGをブラウザーで開いて右クリックし、「名前を付けて画像を保存」でPNGにできます——ただし出力サイズはまったく制御できません。解像度をきちんと指定して変換したいなら、Microsoft Storeの Vector Converter Tool のような専用ツールが、SVG・AI・EPSなど幅広いベクター形式に対応します。デザイナーで無料の一括変換が必要なら、Inkscape が最も高機能なオープンソースの選択肢です。
SVGとは何か(そして、なぜ変換時にそれが重要なのか)
SVGは「Scalable Vector Graphics(拡大縮小できるベクター画像)」の略です。画像を色のついたピクセルの格子として保存するPNGやJPEGとは違い、SVGファイルは画像を一連の数式的な指示——座標と方程式で定義された線・曲線・図形・色——として記述します。
これが、SVGがどんなサイズに拡大しても画質が劣化しない理由です。横100ピクセルのロゴと、看板サイズの同じロゴは、まったく同じSVGファイルを使います。図形は、必要なサイズに応じてそのつど計算し直されるのです。だからこそSVGは、ロゴ・アイコン・イラスト、そしてさまざまなサイズで使う必要のあるグラフィック全般にとって、標準的な形式になっています。
弱点は互換性です。最近のWebブラウザーはどれもSVGを表示できますが、それ以外のソフトの多くはラスター画像(PNG・JPEG・TIFF)を前提にしています。PowerPoint、Word、Outlook、SNS、印刷サービス、そして多くのCMSは、PNGやJPEGの方がうまく扱える——あるいはそれしか受け付けない——のが実情です。SVGは多くの用途で技術的に優れた形式であるにもかかわらず、SVGからPNGへの変換がこれほど頻繁に必要になるのは、このためです。
SVGをPNGに変換するとき、あなたは画像を「ラスタライズ」しています。つまり、あの数式的な指示を、特定の解像度の固定されたピクセル格子へと変えているのです。いったん解像度を決めると(たとえば横1920ピクセル)、画像はそのサイズに固定されます。あとから大きくすると粗くなり——これはSVGの最大の利点とは正反対の結果になります。だからこそ、変換するその時点で適切な解像度を選ぶことが大切なのです。
📊 SVG→PNG変換方法の比較
| 方法 | 費用 | 解像度の指定 | 向いている用途 |
|---|---|---|---|
| Vector Converter Tool | 買い切り | できる | 形式の自由度が高く手早い変換(SVG・AI・EPS) |
| ブラウザー+保存 | 無料 | できない | サイズを問わない1ファイルなら最速 |
| Inkscape | 無料 | できる(細かく) | デザイナー、一括書き出し、編集も含めて使う人 |
| CloudConvert / Convertio | 無料(制限あり) | 一部できる | 何もインストールせず、たまに変換する人 |
| GIMP | 無料 | できる | すでにGIMPを入れている人 |
方法1:ブラウザーで開いて保存する(無料・即時・制限あり)
SVGからPNGを得る一番速い方法は、SVGをChrome・Edge・Firefoxで開くことです。ブラウザーがそれを画像として描画します。あとは右クリックして「名前を付けて画像を保存…」を選べば、ブラウザーによってはPNGを保存形式として提示してくれます。
困ったときの応急処置にはなりますが、現実的な制限があります。出力解像度をまったく制御できません——ブラウザーは画面上で描画したサイズのまま画像を保存します。特定のピクセル寸法が必要な場合(たとえばアイコン用の512×512や、印刷用の横3000ピクセルなど)、この方法では対応できません。さらに、ブラウザーが白い背景の上にSVGを描画すると、SVGが持っていたかもしれない透過も失われてしまいます。
手早くプレビューを取りたいときや、Web表示サイズの画像が欲しいときには十分役立ちます。しかし、解像度や画質が問われる用途には、きちんとした変換ツールが必要です。
方法2:専用の変換アプリを使う
ベクターファイルを「たまに」よりは頻繁に変換するなら、専用の変換アプリが最も現実的な選択肢です。流れはシンプルです。SVG(やAI、EPS)を選び、出力形式にPNGを指定し、希望の解像度を設定して変換するだけです。
ブラウザーの方法に対する強みは、コントロールできることです。出力寸法をきっちり指定でき、透過を保ち、SVG以外のベクター形式も変換できます。InkscapeやGIMPに対する強みは、シンプルさです——形式を変えたいだけなのに、デザインアプリの使い方を覚える必要がありません。
一部の変換アプリは、すべてを端末内で処理するのではなく、クラウドのエンジンで処理します。これにより、ローカルの描画ライブラリを必要とせずに、より幅広いベクター形式(AIやEPSのような独自形式を含む)に対応できます。トレードオフは、どんなクラウドツールとも同じで、処理のためにファイルが一時的に端末を離れる点です。ロゴや公開用のグラフィックなら気にする必要はありませんが、機密性の高いデザイン作業では知っておく価値があります。
方法3:Inkscape(無料・高機能・やや複雑)
Inkscape は無料・オープンソースのベクター画像編集ソフトで、SVGをネイティブに扱えます。Illustratorに最も近い無料の存在で、解像度・DPI・書き出し範囲を細かく制御しながらSVGをPNGに書き出せます。
Inkscapeでの変換手順は次のとおりです。SVGファイルを開き、「ファイル」→「PNG画像にエクスポート」(または Shift+Ctrl+E)を選び、希望の幅とDPIを設定し、保存先を選んで「エクスポート」をクリックします。図全体を書き出すことも、選択した部分だけ、あるいは任意の範囲だけを書き出すこともできます。
形式変換だけが目的なら、Inkscapeはオーバースペックです。レイヤー管理、パス演算、テキストツール、グラデーション制御まで備えた本格的なベクターエディターで、1ファイルを変換するためだけに導入するのは、クリップを少し切り詰めるために動画編集ソフト一式をインストールするようなものです。とはいえ、SVGを日常的に扱う——変換だけでなく編集もする——なら、Inkscapeは利用できる無料ツールの中で最良です。
書き出しの品質は申し分ありません。InkscapeはSVGを正確に描画し、透過も適切に処理し、出力寸法を緻密にコントロールできます。一括変換については、Inkscapeのコマンドライン機能を使えば複数ファイルを自動で処理できますが、これはターミナル操作に慣れていることが前提になります。
方法4:オンライン変換ツール
CloudConvert、Convertio、SVGtoPNG.com といったサービスは、ブラウザー上での変換を提供しています。SVGをアップロードし、(設定できれば)出力オプションを指定し、PNGをダウンロードします。
標準的なSVGなら品質はおおむね問題ありません。オンラインツールが苦戦しやすいのは、フィルター・マスク・埋め込みフォントといった高度な機能を使った複雑なSVGです——描画エンジンが、デスクトップアプリとは違う解釈をすることがあります。単純なロゴやアイコンなら、まず問題にはなりません。
いつものトレードオフも当てはまります。ファイルは第三者のサーバーへアップロードされ、無料枠には1日あたりの制限があり、複雑だったり大きかったりするSVGは正しく変換されないことがあります。機密性のないファイルを1回だけ手早く変換するなら、オンラインツールは速く、何もインストールせずに済みます。
方法5:GIMP
無料・オープンソースの画像編集ソフトであるGIMPは、SVGファイルを読み込めます。GIMPでSVGを開くと、描画する寸法の設定を求められます——ここで出力解像度を選びます。ピクセル単位の幅と高さを設定して「インポート」をクリックすると、SVGがキャンバス上にラスタライズされます。あとは「ファイル」→「名前を付けてエクスポート」からPNGとして書き出します。
ほとんどのSVGで、結果はまずまずです。GIMPのSVG描画はInkscapeほど高度ではなく——複雑なベクター効果は完璧には描画されないことがあります——が、ロゴ・アイコン・単純なイラストなら問題なく扱えます。
Inkscapeと同様、GIMPも(ベクターエディターではなく画像エディターとはいえ)本格的なアプリケーションで、形式変換に必要な規模をはるかに超えています。すでにインストールしているなら妥当な選択肢ですが、そうでなければSVG変換のためだけに入れるのは手間に見合いません。
SVGの先へ:AI・EPS・その他のベクター形式への対応
SVGはオープンな標準です。だからこそ、ブラウザー・Inkscape・大半の変換ツールがうまく扱えます。それ以外のベクター形式は、もっと厄介です。
AIファイル(Adobe Illustrator) はAdobeの独自形式です。多くのAIファイルはPDF互換で保存されているため、.ai の拡張子を .pdf に変えれば、どんなPDFビューアーでも開いて中身を確認できます。ただしこれで見えるのは、平坦化されたプレビューだけです——個々の要素を取り出したり、完全な品質で変換したりはできません。きちんとAIを変換するには、その形式に正式対応したツールが必要です。
EPSファイル(Encapsulated PostScript) は、印刷の現場で今も広く使われている、やや古いベクター形式です。InkscapeはEPSファイルを開けることもありますが、互換性は安定しません。GIMPはGhostscriptをインストールすればEPSを読み込めますが、その設定は簡単ではありません。EPSに対応した専用の変換ツールが、最もシンプルな道です。
WMF/EMFファイル(Windows Metafile) は、Microsoftの古いベクター形式です。昔のOfficeドキュメントやクリップアート集に登場します。たいていのWindowsアプリは描画でき、変換ツールも基本的に問題なく扱えます。
AI・EPS・その他の独自ベクター形式を日常的に受け取るなら、複数の入力形式に対応した変換ツールを使えば、形式ごとに別々のソフトをインストールせずに済みます。
適切な解像度の選び方
SVGをPNGに変換するとき、選ぶ解像度が出力の品質と使い勝手を左右します。実用的な目安は次のとおりです。
Web用途(SNS・Webサイト・メール): 必要な表示サイズの1倍または2倍にします。横400ピクセルで表示する画像なら、高DPIの画面でくっきり見せるために横800ピクセルで書き出します。
プレゼン資料(PowerPoint・Keynote・Googleスライド): 1080pのプロジェクターで全画面表示するなら、長辺1920ピクセルでたいてい十分です。4Kディスプレイ向けには、その倍を見込みます。
印刷用途: これは印刷サイズと必要なDPIによります。標準的な目安は、最終的な印刷サイズで300DPIです。横4インチで印刷する画像なら、横1200ピクセル(4×300)が必要になります。
アプリアイコンやファビコン: これらには決まった必須サイズがあります——512×512、256×256、192×192などです。プラットフォームの仕様を確認し、指定された寸法ぴったりで書き出してください。
迷ったら、必要だと思うより大きめに書き出しましょう。大きなPNGを縮小しても画質は落ちませんが、小さなPNGを拡大すると、ぼやけと粗さが入り込みます。
トラブルシューティング
変換後のPNGが、透過ではなく白い背景になる。 SVGは透過背景を持っているのに、変換時に白の上に描画された可能性が高いです。透過に対応するPNG(JPEGは非対応)として書き出しているか確認してください。変換ツールに「背景を透明にする」のチェック項目があれば、有効になっているか確かめます。
変換後のファイルで文字の見た目が違う。 SVGが、お使いの環境にインストールされていないフォントを使っています。変換ツールが最も近いフォントに置き換えたため、見た目が変わったのです。元のフォントが手に入るなら、変換前にインストールしておきます。あるいは、SVGを作った人に、共有する前に文字を「アウトライン化」してもらうのも手です——これで文字の形が直接埋め込まれ、フォントへの依存がなくなります。
複雑なSVGが正しく描画されない。 フィルター・クリップパス・グラデーション・埋め込み画像といった高度な機能を使ったSVGは、すべての変換ツールで完璧に描画されるとは限りません。別のツールを試してください——Inkscapeは専用のSVGエディターであるため、複雑なSVGを最も正確に扱う傾向があります。
出力ファイルがぼやけている。 画像の使い方に対して、変換時の解像度が低すぎます。より高い解像度で書き出し直してください。SVGに非常に細かいディテールがある場合は、その部分をくっきり残すために、かなり大きめの出力サイズが必要になることがあります。
AIやEPSのファイルが開かない。 これらの独自形式には専用の対応が必要です。標準的なSVG変換ツールでは扱えません。Inkscape(互換性は限定的)か、AI/EPSに対応した専用の変換ツールを使うか、送り主にSVGまたはPDFで書き出し直してもらってください。
よくある質問(FAQ)
WindowsでSVGをPNGに無料で変換できますか?
できます。SVGをブラウザーで開いて画像を保存する方法は無料ですが、解像度の指定はできません。Inkscapeは無料で、細かく制御できます。オンライン変換ツールにも、たまに使う分には無料枠があります。
SVGをPNGに変換すると画質は落ちますか?
十分な解像度を選べば落ちません。SVGは解像度に依存しないので、PNGは必要なだけくっきり仕上がります——ただし、書き出した解像度の範囲内での話です。小さく書き出してからPNGを拡大すると、ぼやけてしまいます。
PNGをSVGに戻せますか?
うまくはいきません。ラスター画像をベクター形式に変換するには「トレース」が必要で、ソフトがピクセルデータから図形を推測します。単色でエッジのきれいな単純なグラフィックなら、使える結果になります。写真のような複雑な画像では、仕上がりは粗くなります。Inkscapeにはこの目的の自動トレース機能(「パス」→「ビットマップのトレース」)があります。
PNGではなくJPEGはどうですか?
JPEGは、写真や、色やグラデーションの多い画像に向いています。PNGは、ロゴ・アイコン・単色や文字、透過を含むグラフィックに向いています。JPEGは透過に対応せず、シャープなエッジに圧縮ノイズが出るため、SVG由来のグラフィックの多くには不向きな選択です。
AIファイルを開くにはIllustratorが必要ですか?
必ずしも必要ではありません。PDF互換で保存されたAIファイルの多くは、.pdf にリネームすれば表示できます。実際にPNGへ変換するには、AI形式に対応したツールが必要です——Inkscapeの対応は限定的で、専用の変換ツールの方が確実に扱えます。
複数のSVGを一括変換できますか?
Inkscapeはコマンドライン経由で一括変換に対応しています。一部の専用変換ツールも一括処理を備えています。オンラインツールは、無料枠では1ファイルずつの処理が一般的です。
参考リンク
- W3C SVG仕様:w3.org/Graphics/SVG
- Inkscape:inkscape.org
- GIMP:gimp.org
- CloudConvert:cloudconvert.com/svg-to-png
まとめ
WindowsでSVGをPNGに変換するのに、デザインソフトは要りません。1回かぎりなら、ブラウザーの裏ワザで数秒のうちに画像が手に入ります。解像度を指定し、AIやEPSを含む複数のベクター形式に対応した、きちんとした変換が必要なら、Vector Converter Tool が、デザインアプリの学習コストなしに買い切りで対応します。そして、編集と書き出しを隅々まで制御したいデザイナーには、Inkscapeが無料で、多くの有料製品より高機能です。
いちばん覚えておきたいのはこれです。変換する前に、書き出しの解像度を決めること。SVGはどんなサイズにも拡大できますが、いったんPNGにすると、そのサイズに固定されます。必要だと思うより大きめに書き出しておきましょう——後のあなたが、きっと感謝します。