開発中、SVGファイルの入れ替え作業を行っており、古い方の画像を別で保存しておこうか判断に迷いました。その際、
SVGファイルとは
SVG（Scalable Vector Graphics）の略
特徴
１，ベクター形式（拡大しても劣化しない）
数式（パス・線・円など）で描画されるため、どれだけ拡大してもギザギザにならない
※ロゴ・アイコン・UI向き
２，テキストベース（中身はXML）
実体はテキストファイルのため、エディタで直接編集できる。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="_x32_" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4B4B4B;}
</style>,,,
３，CSS・JavaScriptで操作できる
色変更・アニメーション・hoverエフェクト など
circle {
fill: red;
}
４，透過が標準対応
背景透過もOKでアイコン用途に最適
まとめ
| SVG | PNG | |
|---|---|---|
| 拡大 | 劣化しない | 劣化する |
| 中身 | テキスト | バイナリ |
| Git管理 | 差分見える | 見えない |
| 写真 | 不向き | 向いている |
| アニメ | 可能 | 不可 |
＜SVGが向いている用途＞
ロゴ アイコン グラフ UIパーツ 図解
＜SVGが向いていない＞
写真 複雑な質感の画像 リアルな陰影が多い画像
なぜ置き換えても問題ないのか
先述「２」でも記述の通り、テキストベースのあくまでも文字列のデータのためGitでも管理できる、コミット履歴から追うことができるため仮に上書きしてしまっても復活できる。
なぜロゴやアイコンにはsvgがいいのか
ロゴやアイコンは先述のベクター方式で画像の拡大縮小を行っても識別して自動で幅にあった解像度で表現できるためアイコンやロゴに向いている。
逆に、写真や画像のファイル形式は、ほとんどが ラスター形式（ビットマップ） のため拡大すると角ついてしまう。さらに、その解像度が低いほどより粗くなってしまう。
ラスター形式とは
・ピクセル（点）の集合でできている。そのため、拡大するとギザギザになる。
・1pxずつ色が決まっている画像。そのため、拡大するとピクセル（□）が鮮明になり、これがイコール画像の粗さになっている。
また、解像度＝この□の大きさに比例するため低ければ低いほど□が大きくなり見えにくい画像になってしまう。
他画像ファイル
●JPEG / JPG
・非可逆圧縮（データを間引いて軽くする）
・ファイルサイズが小さい
・デジカメやスマホの標準形式
・Web掲載・SNS向き
・何度も保存すると劣化
●PNG
・可逆圧縮（劣化なし）
・透過対応
・スクリーンショット向き
・ロゴ・UI画像
・写真だと重くなりやすい
●WebP
・JPEGより軽いことが多い
・可逆・非可逆どちらも可
・透過・アニメ対応
●HEIC / HEIF
・iPhone標準形式
・JPEGより高効率圧縮
※ただし古い環境で非対応あり
最後に
ロゴやアイコンに対してsvgの相性が良いというのは上述のとおりです。一方、部分的な変更はコードの理解がないと難しいため仮にAIに指示を出すにしても的確なプロンプトを投げないとなかなか思うような変更にならず苦戦してしまいました。局所的な変更はときにPhotoshopなどで直接変えたほうが早い場面もあるため一概に便利な部分だけではないなというのがsvgファイルに対する所感です。
しかし、今回この記事を書いていて画像形式の奥深さに触れ改めて面白さを実感しました。