SVGのコードを貼り付けると、PNG画像に変換してダウンロードできます。SVGに対応していない場所で使いたいときに便利です。
SVGとPNGの違い
| SVG | PNG | |
|---|---|---|
| 形式 | ベクター（数式） | ラスター（点の集合） |
| 拡大 | 劣化しない | ぼやける |
| 写真 | 不向き | 対応 |
| 編集 | コードで色やサイズを変更可 | 画像編集ソフトが必要 |
| 対応範囲 | Webは広く対応。一部アプリは非対応 | ほぼすべての環境 |
PNGにする場面
- SVGに対応していないツール（一部のオフィスソフト、SNSの投稿画像）で使う
- OGP画像として使う（SVGは非対応のサービスが多い）
- メールに埋め込む
- 印刷用に高解像度で書き出す
書き出しサイズ
SVGは拡大しても劣化しませんが、PNGに変換した時点で解像度が固定されます。使用する最大サイズの2倍程度で書き出しておくと、高解像度ディスプレイでもきれいに表示されます。
書き出し前に確認すること
- 文字がパスに変換されているか（フォント依存を避けられます）
- 画面外にはみ出した要素が残っていないか（余白として書き出されます）
- viewBox が正しく設定されているか（縦横比の崩れの原因になります）
- 透過が必要かどうか（不要なら背景色を敷いたほうが軽くなります）
よくある質問
Q 変換後のサイズは指定できますか？
できます。用途に合わせた幅・高さを指定してください。
Q 透過は保持されますか？
PNGは透過に対応しているため、SVGの背景が無い部分は透明のまま保存されます。
Q 外部フォントを使ったSVGは？
環境にフォントが無い場合、別の書体で描画されます。文字はパスに変換しておくと確実です。
Q データは送信されますか？
されません。変換はブラウザ内で行っています。