「SVG」とは?ホームページ制作の用語をわかりやすく解説!

目次

SVGとは

SVG(エスブイジー)とは「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で、拡大や縮小をしても劣化せず、鮮明に表示される画像とイメージすると分かりやすいかもしれません。

一般的な画像は、拡大するとぼやけたりギザギザになりますが、SVGはどれだけ拡大しても美しく表示されます。
線や図形の情報を数値で記録しているため、滑らかな表示ができるのです。

ロゴやアイコンなど、シンプルな形の画像によく使われています。

SVG形式の画像を使うメリット

SVGの最大のメリットは、画質が劣化しないことです。
スマホでもパソコンでも、大きなモニターでも、常にキレイに表示されます。

また、ファイルの容量が軽く、ホームページの表示速度を速くするのにも役立ちます。
画像が軽ければ、ページがサクサク表示され、見る人のストレスが減ります。

さらに、SVGは一部のアニメーションも可能です。
動くアイコンやマークを作ることもできるので、ちょっとした演出にぴったりです。

JPEGやPNGとの違い

JPEGやPNGは、一般的によく使われる「ラスター画像」と呼ばれる形式です。
これらは写真や複雑なイラストに向いていますが、拡大するとぼやけてしまうという特徴があります。

一方、SVGは「ベクター画像」と呼ばれ、図形の情報を数値で管理しています。
そのため、拡大しても画質が落ちません。

また、JPEGやPNGに比べて、ファイルサイズが小さくなることも多いです。
ただし、写真のように色の多い画像には向いていないので、使い分けが大切です。

SVGファイルの作成方法

SVGファイルは、「Illustrator(イラストレーター)」や「Inkscape(無料)」などのデザインソフトを使って作るのが一般的です。
図形を描いて、そのまま「SVG形式」で保存すれば完成です。

また、無料のオンラインツールやアプリでも作成可能です。
簡単なアイコンやロゴであれば、専門ソフトがなくても作れます。

最近では、デザイナーから納品されたデータにSVGが含まれていることも増えています。
ホームページでそのまま使える便利な形式として、注目されています。

ホームページ制作のご相談はワイウェブまで!

今回は「SVG」の用語の意味を、できるだけかみ砕いて説明しました。

ワイウェブ(Yweb)のホームページ制作では、できるだけ専門用語を使いません。
必要な専門用語があれば、一つ一つ丁寧に説明しながら進めていきますので、ホームページ制作がはじめてでもご安心いただけます。

無料相談も実施していますので、お気軽にお問い合わせください!
お問い合わせはこちらから