「SVG(Scalable Vector Graphics)」とは

SVG」とは、数値データを使って画像を Webブラウザーで表示できるファイル形式で、データで直線や曲線を描くため、拡大をしても線は滑らかに表示され、シンプルな画像はファイル容量も小さくできます。

Webブラウザー上で表示される画像の多くは「JPEG」「PNG」といった形式です。

JPEG  PNG  

 

「SVG」による画像と較べても、このサイズで違いは分かりません。

SVG 

 

これらの表示を元の画像よりも拡大すると「JPEG」「PNG」では線がぼけます。
 

JPEG 
容量 1.34 KB

 

PNG 
容量 1.13 KB 

 

それが「SVG」形式の画像なら、どちらのサイズも同じファイルなのに線はシャープなまま、もちろん容量も変わりません。

SVG 
容量 1.04 KB

SVG 
容量 1.04 KB

 

「JPEG」で線がぼけない同じサイズの画像ファイルを用意すると容量は 4倍近くになります。

JPEG
容量 4.75KB

 

この「SVG」は「Scalable Vector Graphics」の頭文字であり、それぞれ

  • Scalable:品質を落とさずにサイズの拡大縮小ができる
  • Vector :直線や曲線を数値で表現する
  • Graphics:図形を表示する技術

といった意味になります。

 

「SVG」ファイルをテキストエディターで開くと画像が数値によって表現されています。

この「SVG」形式の画像なら、パソコン、タブレット、スマートフォンなど、サイズの違う機器でも Webブラウザーで品質を維持したまま表示ができるメリットがあるので、今後、利用は広がっていくでしょう。

 

さらに Office 2016 からは「SVG」が扱える画像形式として追加され、挿入が可能となりました。

 

そのためインターネット経由で公開されるイラストの素材集でも「SVG」形式での提供は増えるはずです。

そんなとき「SVG」って何?とならないように解説してみました。

スポンサーリンク

ご意見&コメント

パソコン用語解説」をご利用いただき、ありがとうございます。

「参考になった」「ちょっと違うかも?」というときは TwitterFacebookページを使ってご感想やコメントをいただけると嬉しいです!励みにもなりますし、必要に応じて情報の追加や修正もしてまいります。

 

関連情報を検索

パソコントラブルQ&A」「パソコン用語解説」では関連Q&Aや用語解説を豊富に掲載中です。検索してみてください!

五十音順」インデックス

別サイトで「パソコン用語集」も公開しています。

過去の用語解説 (408 件)

林 編集長のプロフィール

写真1写真2

:パソコン生活応援アドバイザー。「なにしろパソコン.com」サイト運営、メルマガ編集、セミナー講師からコラム・書籍執筆まで実績豊富!

 詳細 順位

ブログパーツ

「パソコン用語解説」では厳密さよりも、分かりやすさ、覚えやすさを優先しています。そのため強引なたとえを使ったり、編集長独自の見解も交えておりますのでご了承ください。解説の中でパソコンの設定や操作法を紹介していますが、お使いのバージョンなど環境によって違う場合があります。

また、本サイトを参考にしたパソコン設定、サイト閲覧、紹介したソフトウエアや機器の購入&使用、そしてトラブル対応やインターネット活用は『利用者の責任』でお願いします(免責事項)。

Related Posts Plugin for WordPress, Blogger...