SVGってなに！？

2023/06/23

日々の活動日記エンジニアインターン

みなさん、こんにちは！
京都事業所受託プロダクトチームインターン生の肖かえいです😆

今日は、SVGについて学びました。

SVGは、ベクターベース(点や座標などの数値データ)のグラフィックを作成するための画像フォーマットです。一見するとJPEGやPNGいったよく使われる画像形式とほぼ変わりませんが実はそこには結構な違いがあります。

まず、大きな違いは、拡大・縮小したときの品質です。SVGはベクターベースなので、どんなに拡大しても、図や絵がボケたりぼやけたりしません。一方、JPEG,PNGはピクセルで構成されているため、拡大するとドットが見えたり、ぼやけたりします。

また、SVGはテキストベースのフォーマットであり、テキストエディタなどで直接編集することができます。これによって、要素の位置やスタイル、属性を簡単に変更することができます。つまりHTML上に直接コードを記入して大きさや色の変更を行うこともできます。一方、JPEG,PNGは固定されたピクセルの配置で構成されているため、編集するには画像編集ソフトウェアが必要です。

さらに、SVGはデータサイズが小さく、ファイル容量が軽いという特徴もあります。なぜなら、SVGはテキストベースのフォーマットなので、コードで図や絵を表現するため、情報を圧縮することができるからです。一方、JPEG,PNGはピクセルごとに情報が格納されており、膨大なデータを持つため、ファイルサイズが大きくなる傾向があります。

しかしその代わりにSVGは複雑なイメージを表現することは難しいです。
様々な画像形式についてそれぞれの特徴を考慮して使いわけられるようさらに学びを深めていきたいです。
---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
～☆新事業☆Webサイトを育てるサブスクサービスはこちら～
⇒https://guardian.jpn.com/service/subscription/
---------------------------------------------------------------------------------------------