SVGをPNGに変換

計算方法

SVG（Scalable Vector Graphics）は、画像をピクセルではなく線・図形・文字で記述する形式です。ロゴやアイコンに最適ですが、どこでも使えるわけではありません。古いWordやPowerPoint、多くのアップロードフォーム、メールの署名、アプリストア、SNSなどはラスター画像を求めます。PNGに変換すれば、劣化なく、透過も保ったままこの問題を解決できます。

SVGをPNGに変換する方法

1. SVGファイルをドロップするか、SVGコードを貼り付けます。
2. サイズと、背景を透過にするか色付きにするかを選びます。
3. PNGをダウンロードします。

例：viewBox="0 0 24 24"の正方形アイコンを幅512pxで書き出すと、512×512ピクセルのPNGになります。ベクター画像をそのサイズで描き直すので、輪郭はシャープなままです。

PNGのサイズはどう決まる？

基準になるのはSVG自体に記録されたサイズです。

• <svg>要素にwidthとheightがある場合：その値を使います。mm、cm、in、ptなどの単位はCSSと同じ換算でピクセルにします（1in＝96px、1cm≒37.8px、1pt＝1⅓px）。
• viewBoxだけの場合（アイコンでよくある形、例：viewBox="0 0 24 24"）：viewBoxの幅と高さをピクセルとみなします。
• 片方の辺＋viewBoxの場合：もう一方の辺はviewBoxの縦横比から計算します。
• どちらもない、またはパーセント指定の場合：ブラウザの既定値300×150pxになるため、ピクセルでサイズを入力してください。

倍率はこのサイズに掛け算されます（24pxのアイコンを4倍にすると96×96px）。幅・高さモードではピクセルを直接入力し、片方だけなら残りは縦横比から求めます。両方を入力して「縦横比を保持」がオンなら枠内に収め、オフならその寸法どおりに引き伸ばします。

背景は透過か色付きか

PNGは透過に対応しています。背景を「透過」のままにすれば、ロゴはどんな背景にもなじみます。透過部分が黒く表示されてしまうアプリやサービス向けには、背景色（通常は白）を指定してください。JPGが必要な場合や、ファイルを軽くしたい場合は、書き出したPNGを別の画像変換・圧縮ツールで処理してください。

安全性：SVGは画像としてのみ描画

SVGファイルにはスクリプトや外部サーバーへのリンクを含めることができます。そのため、このツールはSVGを画像としてだけ読み込みます（Webページの<img>と同じ扱い）。このモードではスクリプトは実行されず、外部からの読み込みも行われません。その代わり、ネット上の画像やWebフォントを参照している部分はPNGに表示されません。埋め込み画像（data: URL）と端末にインストール済みのフォントは使えます。

プライバシー

貼り付けたSVGコードも含め、変換はすべてお使いの端末上で行われます。アップロードや保存は一切ありません。

よくある質問

出典・根拠

• W3C – Scalable Vector Graphics (SVG) 2: Coordinate Systems, viewBox
• W3C – SVG 2: Processing modes (secure animated mode)
• W3C – CSS Values and Units Level 4: Absolute lengths
• W3C – Portable Network Graphics (PNG) Specification
• MDN – SVG as an image
• MDN – HTMLCanvasElement.toBlob()
• Open-source licenses of the libraries used (MIT, LGPL-3.0)

更新日：2026年9月27日