SVG PNG 変換ツール(高画質・透過対応) ピクセルサイズ指定・印刷用 300 DPI 出力・100% ローカル処理

SVGファイルまたはXMLソースコードを、劣化なしの透明背景PNGへブラウザ内で即座に変換します。サーバーへのアップロード不要で、任意のピクセル解像度や商用印刷向け300DPIメタデータ書き出しに対応。

100% ブラウザ内ローカル処理 — ファイルはサーバーに送信されず、プライバシーを完全保護

ここにSVGファイルをドロップしてください

またはクリックして参照

カスタムピクセルサイズ(任意): ×
サイズプリセット:
出力サンプル・比較事例

SVGからPNGへの変換クオリティ実例

ベクターパス、グラデーション、アルファ透過チャンネルが高解像度拡大や300DPI設定でどのように出力されるかをご確認いただけます。

4倍 Retina拡大 (1024×1024 px) #01

アプリアイコンSVGを鮮明な透過PNGへ変換

入力データ
SVGベクター (3.8 KB, viewBox="0 0 256 256")
出力結果
32-bit 透過PNG (1024×1024 px, 31.4 KB, 72 DPI)

元の256pxアートボードをベクター座標のまま4倍に拡大してからキャンバスへラスタライズ。曲線エッジのジャギー(ギザギザ)が一切発生せず、8ビットアルファチャンネルによりダークモードUI上でも滑らかな境界を維持します。

300 DPI 商用印刷・DTP用 (2400×3000 px) #02

ブランドロゴSVGを印刷入稿用高解像度PNGへ

入力データ
SVGアートワーク (14.2 KB, viewBox="0 0 800 1000")
出力結果
高精細PNG (2400×3000 px, 186.5 KB, 300 DPI pHYsチャンク付)

8×10インチ(300 DPI換算で2400×3000ピクセル)でレンダリングし、PNGヘッダー内にpHYs物理解像度メタデータ(11,811ピクセル/メートル)を記録。Adobe InDesignやチラシ・グッズ入稿テンプレートへ実寸のまま配置可能です。

OGP・SNSバナー用 (1200×630 px) #03

インラインSVGコードを白背景付きPNG画像へ出力

入力データ
<svg> XMLコード断片 (6.1 KB, 背景透過)
出力結果
白背景PNG (1200×630 px, 42.8 KB, #FFFFFF 塗りつぶし)

「SVGコードを貼り付け」タブからHTML内のインラインSVGを直接読み込み、純白(#FFFFFF)背景を合成。Slack、Notion、X(旧Twitter)のダークモード表示で黒文字の図解が背景に沈んで読めなくなる問題を防ぎます。

1. 解決できる課題と活用シーン

このSVG PNG変換ツールが解決する具体的な課題

SVGはWeb表示に優れたベクター形式ですが、多くの入稿システム、ECモール、オフィスソフトでは依然としてSVGファイルの直接配置が制限されています。本ツールは機密ファイルを外部サーバーへ送信することなく以下の課題を解決します。

ECサイト・CMS・SNSへの画像アップロード対応

Amazon出品画像、楽天市場、Shopify、note、各種メールマガジン配信ツールなど、セキュリティ(XSS対策)の都合で.svgがアップロードできない環境向けに、高品質な透過PNGを即座に生成します。

300 DPI 商業印刷・ステッカー・グッズ入稿データの作成

ブラウザの「名前を付けて画像を保存」では72 DPIの低解像度になり印刷するとぼやけます。カスタムピクセル指定と300 DPIメタデータ付与を組み合わせることで、DTPやオリジナルグッズ印刷にそのまま使える高精細PNGを作成できます。

フロントエンド開発・デザインシステムからの即座の画像化

ReactやVueコンポーネント内にあるインライン<svg>タグを画像ファイルとして保存したい場合、わざわざテキストエディタで.svgファイルを作る必要はありません。コードを直接貼り付けるだけでPNG化できます。

2. 準備する入力ファイルと仕様

変換前に準備する入力ファイルとSVG仕様

ブラウザ内のHTML5 Canvasエンジンで正確な縦横比とフォント描画を得るため、以下の条件を満たすSVGデータをご用意ください。

標準的な .svg ファイル、または <svg> XMLソースコード

SVG 1.1 / 2.0準拠の.svgファイルのドラッグ&ドロップ、または<svg>〜</svg>タグの直接貼り付けに対応しています(圧縮形式の.svgzは事前に展開してください)。

適切な viewBox 属性または width / height 属性の定義

ルート要素の<svg>タグに viewBox="0 0 幅 高さ" または明示的なサイズ属性が含まれていることで、アスペクト比を維持した正確なスケーリングが可能になります。

テキスト要素のアウトライン化(パス変換)

特殊なフォント(<text>要素)を使用している場合、Illustratorの「アウトラインを作成」やFigmaの「Flatten」で事前にベクターパスへ変換しておくと文字化けやフォント置換を防げます。

外部リンク画像は Base64 埋め込み形式に統一

ブラウザのセキュリティ仕様により、SVG内から外部URL(http://...)を参照する<image>要素はブロックされます。ラスター画像を含む場合は data:image/png;base64 形式で埋め込んでください。

3. 具体的な操作手順

SVGをPNGに変換する具体的な操作手順

1

1. SVGファイルをアップロード、またはコードを貼り付け

点線枠内に.svgファイルをドラッグ&ドロップするか、「SVGコードを貼り付け」タブに切り替えてXMLソースコードを入力します(「サンプルSVGを試す」で動作確認も可能です)。

2

2. 解像度倍率・カスタムピクセルサイズ・DPIを設定

1x(原寸)、2x(Retina)、4x(超高画質)のプリセットを選ぶか、カスタムサイズ欄に幅(px)・高さ(px)を数値入力します。印刷用途の場合は「300 DPI」を選択してください。

3

3. 背景の透過または塗りつぶしカラーを選択

透過PNGを作る場合は「透明(Transparent)」を選択したままにします。白背景や黒背景、任意のカラーコード(HEX)で背景を塗りつぶすことも可能です。

4

4. 「変換開始」をクリックしてPNG(またはZIP)を保存

変換ボタンを押すとブラウザ内で瞬時にラスタライズが完了します。個別のPNGファイルとして保存するか、複数ファイルを一括でZIPダウンロードできます。

4. 出力結果の活用方法

出力されたPNG画像の主な活用方法

生成されるファイルはロスレス圧縮された標準32ビットRGBA PNG形式(オプションのpHYs解像度チャンク付き)であり、以下の用途にそのまま利用できます。

Web制作・iOS / Androidアプリ開発のRetinaアセット

2倍(@2x)や4倍(@4x)で書き出した透過PNGを、Xcodeのアセットカタログ、Android Studioのdrawableフォルダ、FigmaやWebflowへ高精細のまま配置できます。

Word・PowerPoint・Googleスライド・PDF資料への挿入

SVGの直接貼り付けに対応していない古いバージョンのOfficeソフトやPDF生成ツールでも、高解像度PNGに変換しておくことで図表やロゴの崩れを完全に防げます。

商業印刷・ステッカー作成・アパレルDTGプリント入稿

300 DPIの物理メタデータと十分なピクセル数を持つ透過PNGとして、アクリルグッズ、ダイカットステッカー、Tシャツプリント業者へそのまま入稿できます。

5. うまくいかないケースと対処法

うまくいかないケース(注意点)と解決策

ブラウザのローカル描画エンジンの仕様やセキュリティ制限により、以下のような現象が起きる場合があります。原因と対処法をご確認ください。

SVG内の文字がゴシック体や明朝体など別フォントに変わってしまう

原因:

ブラウザのSVG画像サンドボックス制限により、Canvas変換時に外部Webフォント(@font-face)の通信読み込みが遮断されるためです。

解決策:

Illustrator(書式 > アウトラインを作成)やFigma(右クリック > Flatten)にて、テキストをベクターパス(図形)に変換してからSVGを書き出してください。

変換後の画像が見切れる、または左上に小さく表示される

原因:

元のSVGコードに viewBox 属性が設定されていないか、アートボードの境界外にパス座標が配置されていることが原因です。

解決策:

姉妹ツールの「SVG ビューア (/svg-viewer/)」で領域を確認するか、<svg>タグに正しい viewBox="0 0 幅 高さ" を追記してください。

16,384 × 16,384 px を超える超巨大サイズ指定でエラーになる

原因:

PCおよびスマートフォンのブラウザには、HTML5 <canvas> のGPUテクスチャメモリ上限(一般的に一辺16,384pxまたは総画素数約2.68億ピクセル)が設けられています。

解決策:

出力ピクセルサイズは一辺 8,192px 以下(A3ポスターの300 DPI印刷でも約3508×4960pxで十分です)に収めて変換してください。

6. 関連ツールとの違い・比較

関連ツール・他社サービスとの違いと比較

用途に合わせて当サイトの「一括変換ツール」や従来のクラウド型コンバーターとの違いをご確認ください。

比較項目・用途 SVG PNG 変換(このツール) SVG 一括変換 (/batch-converter/) 一般的なクラウド変換サイト
主な利用シナリオ 単体〜少数ファイルの精密なピクセルサイズ指定、SVGコード貼り付け、300 DPI印刷出力 数十〜数百個のSVGアイコンをまとめてPNG / JPG / WebPへ一括変換&ZIP保存 サーバーへファイルをアップロードして順番待ち変換(1日の枚数・容量制限あり)
サイズ指定・DPI制御 幅×高さ(px)の数値直接指定、1x〜4x倍率、72 / 150 / 300 DPI pHYsメタデータ付与 倍率指定(1x / 2x / 4x)およびファイル名の一括プレフィックス・サフィックス付与 72 DPI固定出力が多く、印刷用DPIヘッダーや細かなピクセル指定に非対応
SVGコード直接入力 「SVGコードを貼り付け」タブを搭載し、インライン<svg>タグを即座に画像化 ファイルおよびフォルダのドラッグ&ドロップ専用(大量ファイル処理に特化) 非対応(一度ローカルに.svgファイルとして保存してからアップロードが必要)
プライバシーと処理速度 100%ブラウザ内Canvas処理。外部送信ゼロでミリ秒単位の即時変換 100%ローカル並列処理+ブラウザ内JSZipによる高速アーカイブ作成 社外秘ロゴや未公開デザインが外部サーバーに保存されるリスクと通信待ち時間が発生
7. よくある質問とトラブルシューティング

よくある質問とトラブルシューティング (FAQ)

300 DPIの印刷用PNGを作るには、何ピクセルに設定すればよいですか?

印刷に必要なピクセル数は「印刷したいインチ寸法 × 300 = ピクセル数」(ミリメートルの場合は「mm ÷ 25.4 × 300」)で計算できます。例えば、10cm×15cm(約3.94×5.91インチ)のステッカーを300 DPIで印刷する場合、カスタムピクセルサイズに「幅 1181 px × 高さ 1772 px」と入力し、DPI設定で「300 DPI(高精細商業印刷・DTP用)」を選択してください。実寸に必要な画素数と300 DPIのpHYsメタデータの両方が書き込まれます。

小さなSVGを4倍や数千ピクセルに拡大してPNGに変換しても画質は落ちませんか?

一切劣化しません。JPGやPNGなどのビットマップ画像を引き伸ばすのとは異なり、本ツールはSVGの数学的なベクター座標を指定解像度に拡大してからHTML5 Canvasへ描画(ラスタライズ)するため、どれほど大きく出力してもエッジは常にシャープに保たれます。

業務用の未公開ロゴや機密図面を変換しても情報漏洩の心配はありませんか?

完全に安全です。本ツールはサーバーへのファイル送信を一切行わず、お使いのブラウザ内のJavaScriptとWeb Canvas APIのみで変換処理を完結します。ページを開いた後はインターネットを切断したオフライン状態でも動作します。

透明背景で変換したはずなのに、画像ビューアで開くと背景が白や黒になるのはなぜですか?

Windowsの標準フォトアプリやスマートフォンの一部ギャラリーでは、透過部分を見やすくするために表示上だけ白や黒の背景を敷く仕様があります。本ツールで「透明」を選んでダウンロードボタンから保存したファイルは完全な32ビット透過PNGですので、PhotoshopやFigma、Webページに配置すれば正しく透過されます。

高解像度で書き出したPNGのファイルサイズ(容量)を小さくするにはどうすればいいですか?

高解像度の32ビットPNGは無劣化の分ファイルサイズが大きくなります。ダウンロード後、当サイトの「PNG 圧縮ツール (/png-compressor/)」をご利用いただくと、ピクセルサイズと透過背景を100%維持したままファイル容量だけを50%〜75%軽量化できます。

関連する画像・ベクターツール

用途ごとに特化したブラウザ完結型ツールと連携して作業を効率化できます。

このツールを共有

この無料でプライベートなSVGからPNGへのコンバーターを他の人が見つけられるように手伝ってください。