オンラインSVGかPNG変換ツール

SVGベクターグラフィックスを高品質なPNG画像に変換します。カスタム寸法、透明またはカスタム背景色、高解像度出力に対応。すべてブラウザ内で処理され、ファイルはサーバーにアップロードされません。

SVG入力

SVGファイルをここにドロップまたはクリックして選択

PNG出力設定

×

SVGとPNG：どちらを使うべきか？

SVG(Scalable Vector Graphics)はベクター形式で、形状を数学的に記述するXMLマークアップです。SVGの円は「(x, y)に半径Rで塗りつぶし色Fの円を描く」で、ピクセルではなく命令です。ブラウザは表示するSVGの任意のサイズで命令をレンダリングするため、1x、2x、3x以上でも鮮明なままです。PNG(Portable Network Graphics)はラスター形式で、固定されたカラー値の固定ピクセルグリッドです。PNGは特定の解像度でSVGを「凍結」したときに得られるものです。SVGをPNGに変換することはラスタライゼーションと呼ばれます: ターゲットピクセルグリッドを選択し、その固定サイズでベクター命令をレンダリングし、その後結果はすべてのサイズ制約を含む通常のラスター画像になります。

SVGは1998年に設立されたW3C SVG Working Groupによって開発されました; SVG 1.0は2001年9月4日にW3C Recommendationになりました; SVG 1.1は2003年1月14日に続きましたそして次の10年間で支配的なバージョンでした; SVG 1.1 Second Editionは2011年8月16日に到着しました; SVG 2は2018年10月4日にCandidate Recommendationに達しましたが行き詰まり、2026年時点で完全なRecommendationではなくCRのままです。PNGは1996年10月1日にW3C Recommendationになり、1997年3月にIETF RFC 2083になりました; この形式はそれ以来安定しています。

SVGをPNGに変換する理由

ブラウザでの変換の仕組み

Canvas APIのラスタライゼーション技術は簡単ですが、微妙な落とし穴があります。標準のパイプライン: Blob URL(URL.createObjectURL(svgBlob))または直接data URI(data:image/svg+xml;base64,...)経由でSVGをImage要素として読み込み; onloadイベントを待ち; 希望の出力寸法でキャンバスを作成し; ctx.drawImage(image, 0, 0, width, height)を呼び出して選択したサイズでSVGをラスタライズし; canvas.toBlob('image/png')経由でエクスポート。ブラウザのSVGレンダラーは、このラスタライゼーション中に、グラデーション、マスク、フィルター、テキスト、およびSVG機能セットのほとんどを正しく処理します。3つの注意事項が重要です。外部リソースはCORS下で失敗します: 外部画像(<image href="https://other-domain.com/photo.jpg">)または外部フォントを参照するSVGは、クロスオリジンサーバーが適切なCORSヘッダーを返さない場合は読み込めない可能性があり、キャンバスは「汚染」され、toBlobはSecurityErrorをスローします。これを避けるために、画像をdata URIとして、フォントをdata URI src付きの@font-faceとして埋め込みます。<script>タグを含むSVGは実行されませんImageとして読み込まれると、ブラウザの画像デコーダーがセキュリティのためにスクリプトコンテキストを取り除きます。SMILアニメーションは平坦化されますtime=0の単一フレームに; SVGがその視覚状態についてアニメーションに依存している場合、ラスタライズされたPNGはそれをキャプチャしません。クロスブラウザピクセル差: Chrome、Firefox、Safariは、それぞれのベクターレンダラーの違いにより、同じSVGに対して微妙に異なるラスタライズ出力を生成します; 本番アイコンの場合、一度レンダリングしてPNGを出荷し、ランタイムでのブラウザごとの変換に頼らないでください。

適切な出力解像度の選択

SVGには固有の解像度がない、選択はあなた次第です。一般的なターゲット: iOS App Storeリスティングアイコン1024x1024; Android Play Storeリスティングアイコン512x512(in-launcherアダプティブアイコンは432x432、264x264のセーフゾーン内で設計); PWAマニフェストアイコン192x192と512x512; favicon歴史的に16x16、32x32、48x48(現代のfavicon.icoは3つのサイズすべてをバンドル; 現代のベストプラクティスはサポートするブラウザ向けにicon.svgを出荷し、192x192のapple-touch-icon.pngフォールバックを追加); Open Graphソーシャルカード1200x630; Twitterカード1200x675; Instagram正方形1080x1080; Discord絵文字128x128; Slack絵文字128x128; 300 DPIの印刷はインチ寸法の3倍のピクセルが必要(4インチのロゴ印刷には1200x1200が必要)。Retina品質の画面レンダリングには、表示サイズの2倍を目指す、100x100の表示アイコンはRetina画面で鮮明に保つために200x200にエクスポートする必要があります。

このコンバーターの使い方

  1. SVGを提供する。 アップロードゾーンに.svgファイルをドロップするか、テキストエリアに生のSVGマークアップを貼り付けます。両方のパスは同じように機能します。
  2. 出力寸法を設定する。 ピクセル単位の幅と高さ; 縦横比ロックトグルは、1つの寸法を変更したときに比率を保ちます。最大8192x8192(ほとんどのモダンブラウザでのキャンバスサイズ制限; 一部のハードウェアは4096または8192で制限)。
  3. 背景を選ぶ。 透明(デフォルト、SVGのアルファチャネルを保持)、白の単色、黒の単色、または任意のカスタム色。宛先が透明性をサポートしない場合に役立ちます(一部のレガシー印刷コンテキスト)。
  4. 変換とダウンロード。 Convertボタンは選択したサイズでSVGをラスタライズしプレビューを表示します; DownloadはPNGをデバイスに保存します。

正直なスコープ: このツールができることとできないこと

このツールは単一のSVGを選択したサイズで単一のPNGにラスタライズします。アプリストアが必要とするフルマルチサイズアイコンセット(iOSのみで1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20)は生成しません、そのためにはRealFaviconGeneratorやApp Icon Generatorのような専用ツールを使ってください。結果のPNGを最適化しません(まずソースSVGをクリーンアップするにはSVG Optimizerツールを使用; PNG最適化には別のコンプレッサーを使用)。マルチサイズのfavicon.ico出力をバンドルしません。アニメーションしません、エクスポートされたPNGはシングルフレームで、SVGにSMILアニメーションがあっても。1つのSVGから多くのサイズのバッチ生成には、sharp-cli(Node.js)やresvg-cli(Rust)のようなCLIを使用してください; 彼らが行うサイズごとの変換はこのツールと同じで、スクリプト化可能なだけです。

プライバシー: なぜブラウザのみがここで重要なのか

SVGファイルにはしばしば独自のブランドアセット、進行中のロゴ、内部の製品アイコン、またはNDAの下でデザイナーから提供されたソースファイルが含まれます。サーバーサイド変換サービス(CloudConvert、Online-Convert、Convertio)はあなたのSVGをインフラにアップロードし、そこでログに残ります。このツールはCanvas APIを介してブラウザで全ラスタライゼーションパイプラインを実行します、Convertをクリックする間にDevToolsのネットワークタブで検証するか、ロード後にページをオフラインに(機内モードに)してもコンバーターはまだ機能します。未リリースのブランドワーク、内部の製品アイコン、NDAバウンドのデザイナーファイル、または見知らぬ人のハードドライブにコピーされたくないSVGに安全です。

よくある質問

SVGを直接使用する代わりにSVGをPNGに変換するのはなぜですか?

ほとんどのモダンブラウザでは、そうする必要はありません。SVGはChrome、Firefox、Safari、Edge、Operaでネイティブにレンダリングし、ほとんどのウェブ使用に適した形式です。変換は宛先がSVGをサポートしない場合に必要です: Microsoftは2025年9月から10月にOutlook webと新しいOutlook for WindowsでインラインSVGを廃止しました; iOS / Androidアプリアイコンはpngでなければなりません; オンデマンド印刷サービスはPNGを必要とします; DiscordとSlackのカスタム絵文字はPNGをアップロード; 一部のレガシーCMSはまだSVGアップロードを拒否します。これらのコンテキストでは、一度ラスタライズしてPNGを出荷します。

どの解像度でエクスポートすべきですか?

宛先を合わせてください。iOS app storeリスティング: 1024x1024。Android Play Store: 512x512(in-launcherアダプティブアイコン: 432x432)。PWAマニフェスト: 192と512。Open Graphソーシャルカード: 1200x630。Instagram正方形: 1080x1080。Retinaディスプレイ向けには、表示CSSサイズの2倍でエクスポート、100x100アイコンは鮮明に保つために200x200 PNGである必要があります。印刷の場合、300 DPIは表示インチあたり300ピクセルを意味します(4インチのロゴ印刷 = 1200x1200 PNG)。ここの最大は8192x8192で、これはモダンブラウザキャンバスの制限です。

なぜ変換後にSVGの一部が欠けているのですか?

3つの一般的な原因。CORSによってブロックされた外部リソース: SVGが別のドメインの画像やフォントを参照し、そのドメインが適切なCORSヘッダーを返さない場合、キャンバスは「汚染」され、エクスポートは静かにそれらをドロップします。画像をdata URIとして、フォントをdata URI src付き@font-faceとして埋め込んでください。SVG内のスクリプトは実行しません: <script>タグはブラウザの画像デコーダーセキュリティモデルによって取り除かれ、スクリプトが生成するものは何も表示されません。SMILアニメーションはtime=0(開始フレーム)でレンダリングします; アニメーションの視覚状態はキャプチャされません。JavaScriptやアニメーションに依存するSVGの場合、最初に実際のブラウザでレンダリングしてからスクリーンショットを撮るか、Puppeteerをヘッドレスで使用してください。

透明性を保持しますか?

はい背景として「透明」が選択されているとき、PNGはSVGのアルファチャネルを保持し、半透明ピクセルが完全に保持されます。宛先が透明性をサポートしない、または特定の周囲の色を焼き付ける必要がある場合(一部のレガシー印刷コンテキスト)、単色(白、黒、カスタム)を選択してください。

1つのSVGから複数のサイズを生成できますか?

ワンクリックではできません、このツールは変換ごとに単一のPNGを生成します。アプリストアアイコンセット生成(iOSとAndroidが必要とする約12種類のサイズ)には、RealFaviconGenerator(web)、App Icon Generator(web)、またはsharp-cli(Node.js)やresvg-cli(Rust)のようなCLIを使ってください、彼らが行うサイズごとの変換は同じCanvasスタイルのラスタライゼーションで、多くのサイズにわたってスクリプト化されているだけです。

私のSVGファイルはアップロードされますか?

いいえ。ラスタライゼーションはCanvas APIを介してブラウザで完全に実行されます。あなたのSVGと結果のPNGはネットワークを越えることはありません、Convertをクリックする間にDevToolsのネットワークタブで検証するか、ロード後にページをオフラインに(機内モードに)してもコンバーターはまだ機能します。未リリースのブランドワーク、内部の製品アイコン、NDAバウンドのデザイナーソースファイル、または見知らぬ人のハードドライブにコピーされたくないSVGに安全です。

関連ツール

PNGかJPG変換

PNGをJPEGに変換してファイルサイズを小さくします。

画像リサイザー

PNGを必要な任意の寸法にリサイズします。

PNG圧縮

品質を保ちながらPNGファイルサイズを削減します。