SVG → PNG
SVG to PNG 変換
ベクターファイルをドロップすると、用途に必要な解像度のPNGが得られます。ラスタライズはこのタブ内で行われるため、デザイン制作物はあなたとマシンの間に留まります。
PNGはピクセルが固定されており、後で拡大するとぼやけますが、SVGはどのサイズでも鮮明なままです。透明部分は塗りつぶさず保持されます。
SVGをPNGに変換する手順
ベクターを読み込む
.svgファイルをドロップするか貼り付けます。ヘッダーに幅と高さを宣言していないファイルは、代わりに1024ピクセルのビューポートで描画されます。
ピクセルサイズを選ぶ
必要な幅か高さを設定します — アプリアイコンなら256、印刷用グラフィックなら2400 — もう一方の寸法はアスペクト比に従います。書き出しがファイルの宣言サイズを超えて拡大されることはありません。
PNGを書き出す
ラスターを保存し、PNGが求められる場所で使います。スライド、faviconのパイプライン、README、ベクターを受け付けないストアの掲載情報などです。
ベクターをピクセルに変える
SVGはXMLです。パス、塗り、テキストの指示をレンダラーが任意のズームで解決するため、ロゴやアイコンはベクターで描かれます。PNGは完成したピクセルの格子なので、ラスタライズとはまず格子のサイズを決めることです。すべての曲線がその格子に沿ってサンプリングされ、選んだ解像度がそのまま残る解像度になります。
描画はブラウザ自身のSVGエンジン、つまりページ上で表示するのと同じエンジンを通るため、グラデーション、フィルター、クリップされた図形は画面上と同じように振る舞い、PNGはアルファチャンネルを持つので透過も保持されます。代償は固定されることです。後からPNGを拡大すると輪郭は柔らかくなり、SVGからより大きいサイズで書き出し直せば鮮明なままです。ベクターをマスターファイルとして残しておきましょう。
SVG to PNG の質問
PNGの解像度はどう選べばよいですか？
最も大きく表示される場所を考えます。faviconなら16〜64 px、アプリアイコンなら256〜512 px、印刷なら1000 px以上です。片方の寸法を設定すればもう片方は比率に従います。元が鮮明なままなので、別のサイズで書き出し直すのは安価です。
SVGと比べて何を失いますか？
拡張性と編集性です。PNGは固定された格子なので拡大するとぼやけ、図形はもうスタイルを変えられるテキストではありません。書き出しは特定サイズ用の配布コピーとして扱い、元の.svgを保持しておきましょう。
SVGに幅と高さがありません。どうなりますか？
1024ピクセルのビューポートに描画され、それが固有サイズになります。つまりviewBoxしかないファイルは幅1024 pxとして扱われます。正確なサイズが必要なときは、ここで明示的なピクセルサイズを設定するか、マークアップに幅と高さを追加してください。
PNGは透過を保ちますか？ファイルはアップロードされますか？
透過は保たれます。PNGには本物のアルファチャンネルがあり、半透明の背景のロゴは半透明のままです。アップロードもされません。作品はこのタブ内で描画とエンコードが行われ、1ファイル64 MBまで対応し、一度読み込めばページはオフラインでも動作します。