画像フォーマットSVGを使いこなそう🎨
SVGは「Scalable Vector Graphics」の略称で、
Web上で使うことができる拡大縮小が可能な画像フォーマットのことを言います。
SVGファイルは、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」で画像を描画します
メリット
- 拡大・縮小しても画質が損なわれない
PCでもスマートフォンでも綺麗に画像を表示させたい場合、レスポンシブデザインがよく使用されます。このような場合でSVGファイルを活用することにより、どちらの画面でも綺麗な画像をユーザーに見せることができます。
デメリット
- 写真のように複雑で繊細な配色や輪郭の画像描画には適さない
ベクトル画像は複雑な計算式で画像を描画しているため、複雑で繊細な配色や輪郭の画像描画には適していません
SVGとその他の画像フォーマット
ちなみに...
GIF、JPEG、PNGなどは「ラスタ形式」といい、ピクセルを縦横に並べる方法で画像を描画します。
ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになるため編集には不向きです。加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。
まとめ
- ロゴ・タイトルなどの作成なら👉
ベクトル形式(SVG) - 写真の編集なら👉
ラスタ形式(GIF, JPG, PNG)
が適していると言えるでしょう。