なぜ SVG を PNG に変換するのですか？
ソーシャルメディア、メールクライアント、CMS の画像フィールド、モバイルアプリなど、多くのプラットフォームは SVG を受け付けません。.PNG は、背景の透明度を維持し、ロゴやアイコンの輪郭を鮮明に保つことができるため、標準的なラスタライズ先として利用されます。また、PNG に変換することで、SVG への対応状況に関わらず、あらゆるビューアで一貫して表示されることが保証されます。
SVG から PNG への変換方法
Inkscape OPEN-SOURCE
.svg を開き、«ファイル» > «PNG 画像にエクスポート» に進み、必要なピクセルサイズを設定して «エクスポート» をクリックします。
プレビュー - macOS BUILT-IN
プレビューで .svg を開き、«ファイル» > «書き出す» を選択し、フォーマットリストから PNG を選んで保存します。
GIMP FREE
«ファイル» > «開く» から任意の解像度で .svg をインポートし、«ファイル» > «名前を付けてエクスポート» で .png として書き出します。
コマンドライン - ImageMagick CLI
convert -density 300 input.svg output.png を実行して、300 dpi でラスタライズします。
SVG を変換するプログラム
これらの形式について
.SVG
Scalable Vector Graphics
SVG ファイルは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）画像です。これは W3C のオープン標準であり、2D グラフィックスを XML テキストとして保存するため、品質を損なうことなく任意のサイズに拡大縮小できます。Chrome、Edge、Firefox、Safari…
.SVG の詳細を開く →
.PNG
Portable Network Graphics
PNG (Portable Network Graphics) は、ロスレス（可逆）圧縮のラスター画像形式です。最新のすべての OS、ブラウザ、画像アプリでネイティブに開くことができ、ダブルクリックするだけで表示されます。よくある質問は、開き方ではなく、透明度、ファイルサイズ、および JPG や SVG への変換に関するものです。
.PNG の詳細を開く →品質と注意点
- PNG はピクセルベースです。後で
.pngを拡大するとぼやけるため、実際に必要となる最大サイズでエクスポートしてください。 - 透明度は PNG に正しく引き継がれます。代わりに白い背景が必要な場合は、エクスポート前にエディタで背景を設定してください。
- SVG でカスタムフォントを使用している場合は、出力時にフォントが置き換わるのを防ぐため、エクスポート前にテキストをアウトライン（パス）に変換してください。
よくある質問
PNG は SVG の透明な背景を維持しますか？
.svg の透明な部分は .png でも透明なまま維持されます。
