DX技術用語辞典

by Arsaga Partners

SVG

読み方: えすぶいじー

SVGとは

SVGとは、パソコンなどで静止画像を扱うためのファイル形式の1つです。「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で、拡張子は「.svg」です。1999年ごろから開発がはじまり、2001年頃にW3Cによって勧告技術となりました。

当時はサポートしているWebブラウザが少なかったため普及がなかなか進みませんでしたが、現在はGoogle Chrome、Safari、Edgeなど多くのブラウザの最新版で、SVGをサポートしています。

また、アプリ開発においても、SVGを実装することができます。

 

SVGの特徴

  • 拡大しても劣化しない
    SVGは、ベクターデータです。ベクターデータでは、パス、シェイプ、テキストなどの画像を構成する要素の集合や、座標データを画像として扱います。そのため、拡大しても画質が劣化しません。
    パソコン、スマートフォン、テレビなどどのような画面で見ても、きれいに見えます。そのため、SVGは、企業のホームページ上の、会社ロゴや図解イラスト、アイコンなどに使われています。
    当社ホームページ上のロゴマークも、SVG形式を使用しています。
  •  

  • 扱えるソフトウェアが限られている
    SVGは、JPGやPNGなどのファイル形式と比べ、扱えるソフトウェアが少ないことが特徴です。たとえば、Windows標準ソフトのペイントでは、SVGを扱うことはできません。
    また、SNS(Twitter、Facebook)にも、SVGデータをそのまま投稿することはできません。SNSにSVGデータを投稿する場合には、一度JPGやPNGなど、ビットマップ形式(=ラスターデータ)に変換する必要があります。
    SVGを扱えるソフトウェアには、Adobe Illustrator、CorelDraw、Inkscape、花子(一太郎シリーズ)などがあります。業務上SVGを扱うときには、デザイナーに相談することをおすすめします。

 

デザインの現場から!実務お役立ち情報

SVGの仲間には、SVGZという形式もあります。SVGZは、SVGを更に圧縮をしたものです。SVGと比べ、使用できるソフトウェアがさらに限られるため、実務上ではあまり使われていません(※2021年4月時点の情報です)
SVGからJPGなどのラスターデータに変換したい場合は、通常Photoshopなどの専用ツールが必要ですが、無料で変換できるオンラインツールもあります。
また、SVGからJPGにすることは可能ですが、JPGからSVGにすることは通常できません。

 

 

関連用語

PNG
ベクターデータ

 

 

<執筆・監修>
アルサーガパートナーズ株式会社 DX技術用語集制作チーム Design div