用途に合わせてPNG、JPG、WebPを選ぶ
PNGはロゴ、アイコン、UI素材、文字を含むスクリーンショット、透明背景が必要な画像に最も安全です。JPGは透明が不要なプレビューに向いています。WebPは対応環境が明確で、Web配信時のファイルサイズを抑えたい場合に便利です。
- 透明ロゴやシャープなUIグラフィックにはPNGを使います。
- 単色背景で問題ない場合のみJPGを選びます。
- 対応環境が分かっているWeb配信ではWebPも選択できます。
SVGをここにドロップ
ファイルを選択、SVGコードを貼り付け、または Ctrl+V。ファイルは端末外へ送信されません。
ダウンロード前に確認したいSVG書き出しの要点
SVG変換は単なる形式変更ではありません。最終的なビットマップは、フォント、透明背景、寸法、利用先によって結果が変わります。
ラスタライズ前に寸法を確認する
SVGは解像度に依存しませんが、書き出したPNGやJPGは固定ピクセルです。変換前に実際の表示サイズや印刷サイズに合わせて出力寸法を設定すると、後から拡大してぼやける問題を避けられます。
- アプリアイコンは64、128、256、512 pxなどの正確なサイズで書き出します。
- プレゼン資料では実際の表示サイズより大きめに出力します。
- 印刷用途では、後から拡大するより最初から大きいピクセル寸法を指定します。
文字と外部リソースを事前に整える
ブラウザベースの変換は多くの静的SVGを処理できますが、外部フォント、リモート画像、未対応フィルター、アニメーションは期待通りに出ない場合があります。重要な文字はデザインツールでアウトライン化しておくと安定します。
- ブランド文字は書き出し前にアウトライン化します。
- 重要な画像はリモート参照ではなく埋め込みます。
- プレビューでフォント欠落、影の切れ、予期しない背景を確認します。
変換中もファイルをプライベートに保つ
このコンバーターはブラウザ内で動作します。SVGソースと生成画像はデバイス上で処理されるため、ロゴの草案、社内UI、設計図、共有前の素材をリモート変換サーバーにアップロードしたくない場合に適しています。
なぜ SVG を標準画像に変換する必要があるのか？
SVGはWeb制作に適した形式ですが、利用先によってはPNGやJPGが必要です。代表的な用途を紹介します。
SNSやコンテンツサービスで共有
X、Instagramなど、SVGを直接投稿できないサービスがあります。ロゴや図版をPNGまたはJPGへ変換すると、そのまま投稿しやすくなります。
資料作成や印刷用データに利用
PowerPointやWord、印刷所の入稿環境では、SVGの表示が環境によって異なる場合があります。PNGやJPGへ変換しておくと、共有先でも同じ見た目を保ちやすくなります。
アプリ向けの画像素材を書き出す
iOSやAndroidの開発では、決められたピクセル寸法の画像が必要になることがあります。SVGから必要なサイズのPNGやWebPを作成できます。
変換に必要な機能
ファイルの読み込みからサイズ調整、背景確認、ダウンロードまでをブラウザ内で行えます。
ファイルを外部へ送らずに変換
ブラウザの標準APIを使ってSVGを処理します。変換対象のファイルは外部サーバーへ送信されません。
SVGコードを直接貼り付け
エディタからSVGコードをコピーして貼り付けると、そのままプレビューしてPNGやJPGへ変換できます。
出力サイズを細かく指定
変換前に幅と高さを指定できます。小さなアイコンから大きな資料用画像まで、用途に合うピクセル寸法で書き出せます。
透明背景をプレビュー
チェッカーボード、黒、白などの背景に切り替えて輪郭を確認し、透明部分を保ったPNGとして保存できます。
SVGをPNG/JPGに変換する3つの手順
1
SVGファイルまたはコードを読み込む
SVGファイルをページ上部の変換エリアにドラッグ＆ドロップするか、SVGコードを直接貼り付けます。
2
出力設定を調整（オプション）
用途に合わせて出力画像の幅と高さを変更し、出力形式（PNG / JPG / WebP）を選びます。
3
変換してダウンロード
「変換」ボタンを押してプレビューを確認し、ダウンロードボタンから端末に保存します。
よくある質問
ロゴやアイコンなど、透明背景を残したい画像にはPNGが適しています。透明部分が不要な写真調の画像は、JPGやWebPにするとファイルサイズを抑えやすくなります。
SVGは指定した出力サイズでラスタライズされるため、必要な寸法を変換前に設定すると、後から拡大するより鮮明に書き出せます。ただし、埋め込み画像、フィルター、フォントなど、SVG内部の構成によって見え方が変わる場合があります。
主に静的なSVGの図形やパスに対応しています。外部フォント、リモート画像、複雑なCSSアニメーションは、静止画像へ書き出す際に再現できないことがあります。重要な文字は、変換前にデザインソフトでアウトライン化してください。
PNG、JPG、WebPの画像ファイルとしてダウンロードできます。SVGコードを利用したい場合は、コード入力欄に貼り付けて内容を確認できます。
変換対象のファイルは外部サーバーへアップロードされず、お使いのブラウザ内で処理されます。サイト全体で利用する広告やCookieなどのデータ処理については、プライバシーポリシーをご確認ください。
最新記事
すべて表示 →SVGをPNGに一括変換するときのサイズ、余白、透過背景の決め方
一括変換でPNGのサイズや位置がバラバラにならないように、SVGのviewBox、余白、透過背景、命名ルールを整える方法を解説します。
Jack2026/6/30
PNG、JPG、WebP、AVIFの違いと選び方
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
Jack2026/6/30
SVGのフォント、外部画像、filterが書き出しで失敗する理由
SVG書き出しで起きるフォント置き換え、外部画像の欠落、filterの違い、maskやclipPathの失敗を実用的に確認します。
Jack2026/6/30