「SVG」ってなに?

最近ホームページ上に、画像を保存したら「SVG」という拡張子になっているものがあります。

これってなんでしょう?

「SVG」とは、「Scalable Vector Graphics」の略称で、画像フォーマットの一種です。
これは、大きさを変更できるベクター画像という意味でもあります。

「SVG」の特徴・メリット

画質が劣化しない

「SVG」は、ベクター画像のため、画像を編集しても画質が劣化しません。

通常、画像ファイルを圧縮したり、サイズを拡大・縮小すると画質が劣化することが多いです。しかし、「SVG」はそれがありません。それゆえレスポンシブデザインに最適な画像フォーマットと言えるでしょう。

以下は2021年11月現在、「SVG」に対応しているブラウザです。
基本的にほぼ全てのブラウザに対応していますが、「SVG」を活用する際は必ず確認しましょう。

【参考|SVG basic support

「SVG」のデメリット

複雑な画像や画素の多い写真の表現には向いていない

「SVG」は複雑な計算式で画像を描画するベクター画像です。
そのため、写真などの複雑で繊細な配色や輪郭の画像描画には適していません。

複雑さを増すほど表示速度が遅くなる

複雑な色味を持つ画像を「SVG」ファイルで保存すると、JPEGやPNGよりもファイルサイズが大きくなるため、画像表示速度が遅くなります。

関連記事

コメント

この記事へのコメントはありません。

テスト

a
TOP