SVG to PNG ガイド：寸法指定、透過背景、シナリオへの適応

Office 2016以前のバージョンではSVG画像の挿入・表示に対応しておらず、一部国内SNSプラットフォームの画像アップローダーもSVGベクターファイルを解析できません。

SVG素材の入手後、これらのシナリオで正常に利用するためには固定ラスター形式のPNGに変換する必要があります。変換時には「寸法」と「背景の透過性」の2つのコア課題に対応する必要があります。

SVGはグラフィックの描画命令を格納するベクターグラフィック形式であり、固定のピクセル情報を持ちません。鮮明度を維持したまま任意の倍率に拡大縮小でき、元から固定の解像度を持たないという特徴があります。

PNGはラスターグラフィック形式で、各ピクセルが画面上の1表示点に対応します。正常に表示可能なラスターファイルを生成するためには幅と高さの明確なピクセル値が必要なため、出力時には手動で寸法パラメータを指定しなければなりません。

SVGからPNGへの変換ツールは、デフォルトで元のSVGの透過背景を保持します。変換のプレビュー領域では透過領域が白黒の市松模様でマークされるため、ユーザーはプレビューから透過状態を確認できます。

背景を単色に置き換える必要がある場合は、JPG形式で出力した上で対応する下地色を指定できます。PNG形式はアルファチャネル情報を完全に保存できるため、背景透過が必要なデザインシナリオに適しています。

ウェブサイトのfaviconを作成する際は、異なるデバイス・利用シナリオに適応するため、複数の異なる寸法のPNGファイルを出力する必要があります。上記は一般的な標準出力寸法の一覧です。

実際の変換では、ウェブサイト開発の要件に応じて対応する寸法を選択し、SVGを1つずつ出力した後、ウェブサイトの設定に統合してください。具体的な仕様については、対応するプラットフォームの開発ドキュメントを参照してください。

透過背景を持つSVGをJPG形式で出力する必要がある場合は、JPG自体がアルファチャネルに対応しておらず、全ての透過領域が指定した色で自動的に塗りつぶされる点に注意してください。

一般的な利用シナリオでは、下地塗りつぶしの色として白を選択することで、大半のドキュメントやウェブページの背景に適応できます。暗い背景に配置するJPGを出力する場合は、対応する暗い色を下地塗りつぶしに選択することで、白い縁が表示される問題を回避できます。