SVGとは、Webサイトでロゴやアイコンによく使われる画像形式。
PNGやJPEGは「点の集まり」なので、拡大するとぼやけることがあります。
一方、SVGは「線や形の情報」で作られているため、サイズを変えてもきれいに表示されやすいのが特徴でWebサイトのロゴにもSVGがよく使われますが、イラストレータなどを使わないと編集できないという問題があります。
ウェブサイトのロゴぐらいでしたら大きく拡大する必要もないので「PNGをSVGに埋め込む」方法で十分ですし最近のAIに指示すればすぐ作成できるようになりました。
| 方法 | 内容 | メリット | デメリット | 向いている用途 |
|---|---|---|---|---|
| PNGをSVGに埋め込む | SVGの中にPNG画像を入れる | 早い。差し替えが簡単。サイトではSVG扱いできる | 中身は画像なので拡大で劣化する可能性あり | Webサイトのロゴ差し替え |
| 本物のSVGとして作り直す | 文字やマークをパスデータ化する | 拡大しても綺麗。印刷にも強い。編集しやすい | 作成に手間がかかる。自動変換だと崩れやすい | 印刷物、正式ロゴデータ、長期利用 |
1つ目は、PNGをSVGの中に入れる方法です。
SVGという箱の中にPNG画像を入れるイメージ。作成しやすいPNGなので簡単でかつファイルはSVGになるので、サイト上では差し替えしやすくなります。
ただし、中身は画像なので、拡大すると画質の影響を受けます。
2つ目は、本物のSVGとして作り直す方法です。
ロゴの文字やマークを、線や形のデータとして作り直します。
拡大してもきれいで、印刷物にも向いていますが、きれいに作るには手間がかかります。
