SVG とは?PNG とは?
SVG(Scalable Vector Graphics)は XML ベースのベクター形式です。図形はピクセルではなく数学的なパス・形状・色で記述されるため、どれだけ拡大しても劣化しません。Logo、アイコン、イラスト、ボタンなどのグラフィックは、通常デザイナーが SVG で制作します。
PNG はビットマップ(ラスター)形式で、固定数のピクセルで構成され、透明背景(アルファチャンネル)をサポートしています。汎用性が非常に高く、ほぼすべてのソフトウェア、プラットフォーム、システムで直接開いて使用できます。
SVG を PNG に変換する必要があるのはどんなとき?
最も一般的な場面は、アップロード先のプラットフォームが SVG に対応していない場合(一部の EC 管理画面、SNS、素材マーケットなど)、デザイン稿をビットマップ形式で納品する必要がある場合、そして相手が PNG ファイルしか受け付けない場合です。
もう一つの一般的な場面はアイコンの書き出しです。コードやデザイン稿では SVG を使用していても、技術に詳しくない同僚に渡したり素材ライブラリにアップロードしたりする場合は、PNG の方が汎用的です。
変換時のサイズの選び方
元のサイズ:SVG 自体に定義されたサイズでそのまま書き出します。サイズがすでに正しい場面に適しています。
倍率スケーリング:2×、3×、4× は高解像度ディスプレイ(Retina ディスプレイ)向けです。アイコンは少なくとも 2× で書き出すことをおすすめします。高解像度画面でもぼやけずに表示されます。
カスタムサイズ:使用目的に合わせて幅と高さを手動で設定します。図形が引き伸ばされて変形しないよう、アスペクト比のロックをオンにすることをおすすめします。
透明背景はどう処理すべき?
PNG は透明背景をネイティブでサポートしているため、デフォルトで SVG の透明領域が保持されます。
背景色付きの素材が必要な場合(印刷物のレイアウト用の白背景画像など)は、背景オプションで白、黒、または任意のカスタムカラーを選択できます。