SVGをPNGに変換すると見た目が変わるのはなぜですか？

主な原因：(1) SVGがcurrentColorを使用している → 置換オプションを有効にして対象色を選択してください。(2) SVGが外部フォントを参照している → ツールが警告を表示し、PNGではシステムフォントにフォールバックします。(3) SVGにクロスオリジン画像が含まれている → ブラウザのセキュリティポリシーでブロックされる場合があります。すべての場合で変換前にファイル行に色分け警告が表示されます。

1x/2x/3xとは何ですか？どれを選べばいいですか？

ピクセル密度の倍率です。1xは標準ディスプレイ用の基本解像度。2xはRetina/HiDPI画面用の倍密度（最新スマホ・MacBook）。3xは最高密度画面用（最新iPhone・ハイエンドAndroid）。Web用なら1xと2x、iOSアプリ用なら3つすべてを選択してください。複数倍率を同時チェック可能で、ワンクリックで全倍率を出力しZIPに整理します。

DPIオプションの用途と使用すべきタイミングは？

DPI（dots per inch）はPNGファイルに埋め込まれるメタデータタグで、アプリケーションに表示すべき物理サイズを伝えます。ピクセル寸法は変更されません。72 DPIはWeb用の標準、96 DPIはWindows画面用、144 DPIはApple @2x素材用（macOS/iOSがRetinaスケール画像として認識）です。WebブラウザやほとんどのアプリはDPIタグを無視するため、特定の要件がない限り無効のままで問題ありません。

BulkPicTools

ローカル処理 · 0 アップロード

SVGをPNGに変換 — 無料・一括・カスタムサイズ・DPI設定

SVGをPNGにオンライン変換 — 無料・アップロード不要・一括対応。カスタムサイズ、背景、DPIを設定し、1x/2x/3xを一括出力。すべてブラウザ内でローカル処理。

SVGファイルをアップロード

SVGファイルをドラッグ＆ドロップするか、クリックして選択。一括アップロード対応。

SVGをPNGに変換の主な機能

柔軟な出力サイズ

元のSVGサイズで出力、幅指定で等比拡大縮小、または幅と高さを個別指定。1x・2x・3xを同時チェックして全倍率をワンクリックで出力。

一括処理＋ファイル別警告

任意の数のSVGファイルをアップロード。各ファイルに元の寸法を表示し、サイズ情報不足・外部フォント・クロスオリジン画像・未解決currentColorの問題を変換前に色分け警告でお知らせします。

currentColor置換

多くのアイコンSVGはテーマ対応のためcurrentColorを使用しています。置換オプションを有効にして対象色を選ぶと、ラスタライズ前にすべてのcurrentColor参照を指定色に置換します。

背景・DPI制御

透過・白・任意カスタムカラーの背景を選択。DPIメタデータ（72/96/144、Apple @2x認識用、またはカスタム）を埋め込み可能で、Figma・Photoshop・印刷ツールで正しい物理サイズで開きます。

ガイドとヒント

SVG vs PNG — 用途別フォーマット選び方ガイド【Web・アプリ・印刷】

SVGとPNGはまったく異なる特性を持つ画像形式です。どちらが優れているかではなく、何に使うかで適切な形式を選ぶことが重要です。

SVG（スケーラブルベクターグラフィックス）の強み

SVGは数式で図形を記述するベクター形式のため、拡大縮小に強く、どんな解像度でも鮮明に表示されます。日本のWebサイトでは、ロゴやアイコン、イラストなどに広く使われています。CSSで色やサイズを動的に変更でき、アニメーションも可能です。ファイルサイズもシンプルな図形ならPNGより小さくなります。

PNG（ポータブルネットワークグラフィックス）の強み

PNGはピクセル単位で情報を保持するラスター形式です。写真や複雑なグラデーション、ドロップシャドウなどの表現に適しています。また、SVGが非対応の環境でも確実に表示できるため、次のような場面で重宝します。

メールテンプレート — 多くのメールクライアントはSVGを正しく表示できません。
CMSやブログ — WordPressのエディターなど、SVGのアップロードを禁止しているシステムがあります。
PDF資料 — 印刷所に入稿するデータはPNGの方が確実です。
SNSのOGP画像 — TwitterやFacebookのシェア画像はPNGまたはJPGが標準です。

日本市場でのトレンド

日本のWeb制作現場では、コーディング効率の観点からSVGの採用が進んでいますが、まだPNG形式でしか対応していない外部プラットフォームや取引先システムも多くあります。SVGとPNGの変換をスムーズに行える環境を整えておくことで、制作効率が大幅に向上します。

アイコン素材を1x/2x/3xでPNG書き出し — iOS・Android・Web対応の完全ガイド

マルチスケールでのPNG書き出しは、アイコンやUIアセットの配布における標準的なワークフローです。iOS、Android、Webの各プラットフォームに合わせた倍率で出力する必要があります。

なぜ複数の倍率が必要か

現代のデバイス画面にはさまざまなピクセル密度があります。例えば、最新のiPhoneは1論理ピクセルに対して3物理ピクセルを割り当てています（3x）。標準解像度（1x）で作ったアイコンをそのまま表示すると、Retinaディスプレイではぼやけて見えます。そのため、各プラットフォームは2xや3xの画像を用意することを前提としています。

プラットフォーム別の倍率要件

iOS — @1x（非Retina、現在は稀）、@2x（標準Retina）、@3x（最新iPhoneの標準）。Xcodeにアセットを読み込ませる場合は1x/2x/3xの3セットが必要です。
Android — mdpi（1x）、hdpi（1.5x）、xhdpi（2x）、xxhdpi（3x）、xxxhdpi（4x）の5段階。ただし最低限xhdpiとxxhdpiがあれば実用になります。
Web — 1xが基本ですが、Retina対応として2xも用意するのが一般的です。CSSのimage-set()やsrcset属性を使って出し分けます。

本ツールでの効率的な書き出し

SVGファイルをアップロードしたら、出力設定で1x・2x・3xをすべてチェックして「変換」をクリックするだけで完了です。ZIPダウンロード時に「倍率別フォルダ」を選択すれば1x/・2x/・3x/フォルダに整理して保存され、「フラット構造」を選べばファイル名に@2x・@3xのサフィックスが付加されます。FigmaやSketchから書き出す手間を省き、ブラウザだけで完結します。

SVGアイコンのcurrentColorとは？PNG変換時の色置換テクニック

currentColorはCSSのキーワードで、SVG要素に周囲のCSSコンテキスト — 通常は親要素の文字色（colorプロパティ）— を継承させる仕組みです。アイコンライブラリをテーマ対応可能にするための標準技術であり、Lucide、Heroicons、Material Symbolsなど、日本の開発者がよく使うモダンなアイコンセットのほとんどが採用しています。

currentColorが使われる理由

例えばダークモード対応のWebサイトを考えてみてください。ライトモードでは黒いアイコン、ダークモードでは白いアイコンが必要です。SVGに固定色（#000など）を指定してしまうと、モード切り替え時に色が変わりません。currentColorを使えば、CSSのcolorプロパティを変えるだけでアイコンの色を一括変更できます。

PNG変換時の問題

PNGは静的なラスター画像であるため、currentColorのような動的な色指定を保持できません。SVGをPNGに変換するとき、currentColorはブラウザのデフォルト色（通常は黒）で描画されます。その結果、「アイコンが真っ黒になってしまった」「元のデザインと色が違う」という問題が発生します。

本ツールでの解決方法

本ツールはcurrentColorを含むSVGを自動検出し、ファイル行に青色のインフォバッジを表示します。変換前に「currentColor置換」オプションを有効にして、置換したい色をピッカーで選択するだけで、すべてのcurrentColor参照が指定色に置き換えられた状態でPNGにレンダリングされます。この機能を使えば、想定通りの色でPNGを書き出すことが可能です。

デザインワークフローにおけるSVG→PNG一括変換の活用術

SVGからPNGへの一括変換が必要になる最大のシチュエーションは、アイコンセットの書き出しです。一般的なデザインシステムには数百のSVGアイコンが含まれており、それらをドキュメント、アプリストア、SVG非対応のプラットフォーム向けにPNGで出力する必要が生じます。

ユースケース1 — iOS・macOSアプリアイコンの書き出し

AppleのアプリアイコンはPNG形式が必須です。1024×1024ピクセルのSVGマスターから、各デバイスに合わせたサイズ（180×180、120×120、87×87、58×58など）を一括で書き出す必要があります。本ツールに1024pxで設定したSVGをアップロードし、出力サイズを指定すれば、1回の操作で必要なすべてのサイズを生成できます。

ユースケース2 — デザインシステムのドキュメント生成

StorybookやZeroheightなどで構築したデザインシステムのドキュメントには、SVGをPNGにラスタライズしたプレビュー画像が必要になることがよくあります。数百のアイコンを一つずつ手動で書き出していると膨大な時間がかかりますが、本ツールを使えば全ファイルをドロップして一括変換するだけです。

ユースケース3 — クライアントへの納品

クライアントの中にはSVGファイルの扱いに慣れていないケースがあります。納品時にSVGに加えてPNG版も同梱することで、クライアント側でのトラブルを防げます。1x（Web用）と2x（Retina用）の2種類を用意しておけば、ほとんどのケースで十分です。

効率的なワークフロー

本ツールでは、出力サイズを「幅指定」にして1080pxに設定し、背景色を透過にしたまま一括変換すれば、SNSやブログで使い回せる高品質な画像素材を短時間で用意できます。ファイルのアップロードからZIPダウンロードまで、すべてブラウザ上で完結するため、FigmaやSketchなどのデザインツールを立ち上げる必要もありません。

使い方

SVGファイルをアップロード

SVGファイルをドラッグ＆ドロップまたはクリックで選択。各ファイルにサムネイルプレビュー、元の寸法、検出された警告が即時表示されます。

出力を設定

出力サイズ（元のサイズ/幅指定/カスタム）と出力倍率（1x・2x・3x — 複数選択可）を設定。背景を選択し、必要に応じてcurrentColor置換とDPIメタデータを設定。

変換してダウンロード

「変換」をクリック。各ファイル行から個別PNGをダウンロード、または倍率別フォルダ（1x/・2x/・3x/）かフラット構造（@2x・@3xサフィックス）のZIPで一括ダウンロード。

SVGをPNGに変換についてよくある質問

すべてブラウザ内でCanvas APIを使用してローカル処理されます。SVGファイルがサーバーにアップロードされることは一切ありません。ファイルは完全にプライベートで、オフラインでも動作し、アップロード制限によるファイルサイズ制限もありません。