Scalable Vector Graphics

ウィキペディアにおけるSVG画像の使用については、「Wikipedia:SVGへの乗り換え」をご覧ください。

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形^[2][3]）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。

Scalable Vector Graphics

拡張子	.svg、.svgz
MIMEタイプ	image/svg+xml[1]
UTI	public.svg-image
開発者	W3C
初版	2001年9月4日 (23年前) (2001-09-04)
最新版	1.1 (Second Edition) (2011年8月16日 (13年前) (2011-08-16))
種別	ベクターグラフィック
派生元	XML
オープン フォーマット	Yes
ウェブサイト	W3C SVG Working Group

概要

1998年にアドビシステムズ・IBM・ネットスケープコミュニケーションズの3社によって提案されたPGML（英語版）(Precision Graphics Markup Language)^[4]と、Autodesk・ヒューレット・パッカード・Macromedia・マイクロソフト・Visio（英語版） の5社によって提案された VML (Vector Markup Language)^[5]をもとにして、W3C SVG ワーキンググループにより開発された^[6]。現在の規格はオープン標準としてW3Cにより管理されている（#規格）。

沿革

• 1999年2月11日 - SVGのドラフト版を公表^[7]
• 2001年9月4日 - SVG 1.0がW3C勧告となる^[8]
• 2003年1月14日 - SVG 1.1^[9]と、SVG Tiny・SVG Basic（モバイルSVGプロファイル）^[10]がW3C勧告となる
• 2008年12月22日 - SVG Tiny 1.2がW3C勧告となる^[11]
• 2011年8月16日 - 誤記を修正したSVG 1.1 (Second Edition)がW3C勧告となる^[12]
• 2018年10月4日 - SVG 2がW3C勧告候補となる^[13]

特徴

ベクタ形式であるため、拡縮自在である。その他に、XMLベースの為、ウェブブラウザで（画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で）閲覧でき、テキストエディタ等で編集できる。また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。

パス

SVGはベクター形式の基礎であるパスを <path> 要素としてサポートしている。パスは輪郭線・クリッピングパス・アニメーションパス等に利用される^[14]。

1つのパスは複数のセグメント path segment からなる^[15]。セグメントの形を指定する命令はコマンドと呼ばれ^[15]、<path> 要素の d 属性にコマンドを並べることでパスの形状が指定される^[16]。

コマンドは以下の20種類が定義されている^[17]：

表. パスコマンド

コマンド	コマンド名	機能	出典
点
M/m	moveto	始点を置く	[18]
線分
L/l	lineto	線分を伸ばす	[19]
H/h	horizontal lineto	水平な線分を伸ばす	[20]
V/v	vertical lineto	垂直な線分を伸ばす	[21]
Z/z	closepath	始点へ線分を伸ばす	[22]
曲線
C/c	curveto	3次ベジェ曲線を伸ばす	[23]
S/s	smooth curveto	ポリ3次ベジェ曲線を滑らかに伸ばす	[24]
Q/q	quadratic Bézier curveto	2次ベジェ曲線を伸ばす	[25]
T/t	smooth quadratic Bézier curveto	ポリ2次ベジェ曲線を滑らかに伸ばす	[26]
A/a	elliptical arc	楕円弧を伸ばす	[27]

SVG図形はパスの集合であるため大量の d 属性を記述することになる。容量最小化の観点から以下の工夫がなされている^[28]：

• コマンドのアルファベット表現（lineto → L）
• 簡易版コマンドの採用（l 0 300 → v 300）
• 連続コマンドの省略（L 300 100 L 200 300 → L 300 100 200 300）
• 区切り文字の省略（L 300 100 L 200 300 → L300 100L200 300）

基本図形

SVGは基本図形（Basic Shape）を定義している^[29]。基本図形を組み合わせて描画・クリッピングすることで複雑な表現を容易に実現できる。

基本図形 circle <circle>タグのみで描画可能

基本図形は以下の7種類が定義されている：

• path: パス
• line: 線分^[30]
• polyline: 折れ線（連結した線分）^[31]
• rect: 長方形。角の丸めが rx / ry 属性により可能^[32]。
• polygon: 多角形。閉じた（始点と終点が同一である）polyline で囲まれた領域として表現^[33]。
• circle: 正円
• ellipse: 楕円

基本図形にはタグ（DOMインターフェース）が用意されており容易に描画できる。例えば長方形を描画するために四辺全ての位置と長さを定義する必要はなく、<rect> タグに左上角の座標および縦横長さを指定するだけで描画できる（タグ例: <rect x="400" y="100" width="400" height="200"> ）。

基本図形は本質的には糖衣構文であり、等価な図形をパスにより描画できる^[34]。

編集

SVG は、拡張の自由度が高い XML (Extensible Markup Language) で記述されており、XML ならではの各種機能を定義した要素を持つ。SVG ではそれ自身に回転・拡大・移動などの表現を定義しているため、単体で多様な表現をすることが可能である。

従来のウェブサイトでは、いわゆるインタラクティブな双方性のある画面変化を伴う表示を JavaScript や FLASH を用いてきた。HTML/XHTML に SVG を組み合わせることにより、JavaScript や FLASH を導入せずとも同様の効果が発揮されることが期待される。

XML なので、原理的には専用のアプリケーションを用いることなく通常のテキストファイルとして作製・編集できる。

レイヤー

ビットマップデータとベクターデータを拡大した場合

SVG の特筆すべき点としてレイヤー機能がある。SVG では写真や挿絵などのビットマップデータ部分と座標値で指定された円・線分等を組み合わせた図形をベクターデータ部分として個々に指定でき、互いの苦手とする部分を補完しながら共存して画面表示できる。

• ビットマップデータ: 写真・挿絵・統計グラフ
• ベクターデータ: 円弧・線分・点・文字・統計グラフ

SVG では文字をベクター情報の領域に有することで拡大縮小した際にはアウトラインフォントで表現する。この機能により、拡大するとジャギーと呼ばれる文字外延部のギザギザが生じて見にくくなる点が解決されている。具体的には Adobe Acrobat による PDF 形式の文字とほぼ同じ機能を有する。

これらのレイヤー機能により、背景に写真などの画像を置き、ベクターデータによる線画や文字を配置させることが可能である。具体的には等高線を表示した地図画像（ビットマップ）の上に鉄道路線や道路網（ベクターデータ）を重ね、電車や自動車等の移動体を配置して同時表示が可能になる。更に、ベクターデータのみで表現した塗りつぶしでは色の重ね合わせが可能であり、塗りつぶしの透過度の指定により集合論で用いるベン図のような形を必要最低限度の色数で表現できる。

表示設定

SVG はレンダリング設定機能を提供している。

shape-rendering 属性ではパスと基本図形のレンダリング時にビューアー実装が参照するヒントを設定できる^[35]。4種類の設定値が存在し、optimizeSpeed は速度優先（負荷によってはアンチエイリアス OFF）^[36]、crispEdges は図形のパキッとさ優先（図形によってはアンチエイリアス OFF や位置・幅の微調整）^[37]、geometricPrecision は正確さ優先になる^[38]。

SVG はビューアーに対してアンチエイリアスを必須適合性要件としていないが、各種ブラウザなどのビューアー実装はアンチエイリアスを実装し shape-rendering 属性でその ON/OFF を管理しているケースが多い。

ファイル形式

基本的に SVG は MIME 形式指定では image/svg+xml で指定された画像フォーマットである。ファイルの拡張子は .svg と gzip 圧縮された .svgz がある。拡張子 .svg はテキストファイルであるため、大きなデータではネット間の通信トラフィックにおいてのデメリットが大きいが、圧縮した .svgz では数分の一のファイルサイズになる。展開機能はWebブラウザ側が受け持つ。

親和性

SVG は基本的に文章で構成されており、ブラウザの利用者が入力した情報を CGI や JavaScript を介して SVG データに組み入れることが可能である。これにより、ベクターデータを用いた統計グラフでは可変性のある表示が可能になる。

長所

文書で制作できるため、独自タグを用いることで高品質な表現が可能である。文字情報は文字データのみを明示的にグループ化しているため、文字のグループのみを抽出することで多言語化が比較的容易にできる。

欠点

ビットマップデータの大きさは各形式によってある程度左右されるが、ほぼ面積比によってある程度のサイズに納まることが多い。それに対し、ベクターデータは画面表示サイズに関わらず全ての情報を常に保持し続けるため、表示情報が多い場合はビットマップデータよりもサイズが大きくなる傾向がある（ただし、これはベクターデータ形式全般に言えるものであり、SVG のみの欠点ではない）。

規格

いくつかのSVG規格が存在している。

表. SVG関連規格

規格書名	状態	更新日	リンク
主要規格
Scalable Vector Graphics (SVG) 1.0 Specification[8]	W3C勧告[8]	2001-09-04[8]	W3C 2001
Scalable Vector Graphics (SVG) 1.1 (Second Edition)[12]	W3C勧告[12]	2011-08-16[12]	W3C 2011
Scalable Vector Graphics (SVG) 2[13]	W3C勧告候補[13]	2018-10-04[13]	W3C 2018
派生規格
Scalable Vector Graphics (SVG) Tiny 1.2 Specification[11]	W3C勧告[11]	2008-12-22[11]	W3C 2008

• SVG Basic: 携帯電話や携帯情報端末等の携帯情報機器を対象にした軽量規格

現状

SVG は版を重ねるごとに高度な機能を盛り込んでいる。1.1 版以降から、格納しようとする描画情報に当該情報が使用している座標参照系をメタデータとして記述することが可能となった。これにより、SVG を地図として利活用できる道ができ、国土地理院ではその保有する電子国土基幹情報を SVG で配信し、PC のみならず様々な媒体で活用する方法を提案して広く社会実験に供する試みを実施している。

一方で、SVG の高度な機能を用いるものでは、それに対応した編集ツールや、データを忠実に再現してくれるビューアやブラウザのプラグイン等が必須となる。高度な機能を持ちつつも、それを活かせるインフラが追いついていないのが現状である。

これとは別に、比較的利用頻度の高い重要な機能に絞り込み、小型機器にも搭載可能な軽量な規格も登場している。

日本産業規格

JIS X 4197:2012「可変ベクタグラフィクス SVG Tiny1.2」としてW3C発行のSVG Tiny 1.2規格を技術的内容を変更することなく邦訳した規格表が発行されている（2012年最終改訂）^[39]。

SVG 編集ソフト

SVG は XML を用いているのでテキストエディタによるデータの作成も一応可能であるが、記述は非常に複雑なため実用的には GUI を前提にした編集ソフトが必須となる。

用途により、高度なグラフィクス作成に主眼を置いた描画ソフトから図、表、フローチャートなどの作成に主眼を置いたソフトまで幅がある。

SVG を標準データとして扱い、読み書きが可能なもの

• SVG Cats
• Inkscape

SVG の読み書きが可能なもの

• Adobe Illustrator
• Microsoft Office Visio
• Microsoft Officeのうち、Word、Excel、PowerPoint、Outlook^[40][41]。
• CorelDRAW
• Affinity Designer
• Justsystems Xfy
• Dia
• Mathematica
• LibreOffice Draw
• Googleドキュメント

一部制限があるもの

• GIMP - 読み込みに対応。書き出しはパスの書き出しのみ。

SVG の出力が可能なもの

• 花子2006は、SVG (Ver.1.0 に準拠) の書き出しに対応。
• OpenOffice Draw - 1.1 までは日本語出力が一部乱れるなど難あり。2.0 から書き出しに対応。SVG Import Filter(アーカイブ)^[42]を導入すれば読み込みも可能。
• Omni GroupのOmniGraffle Professional 4 は、SVG 書き出しに対応。
• R はデータ解析結果のグラフ出力形式として SVG に対応。
• Gnuplot および GNU Plotutils は、プロットの出力形式として SVG に対応。
• Geometry Expressions は、図形の出力形式として SVG に対応。

この他、CAD ソフトウエアには読み書きともに対応しているものが多く存在する。

ウェブブラウザによる SVG 画像の表示

2010年代にはパソコン用の主要ウェブブラウザでネイティブサポートされるようになった。

2018年5月時点で^[43]、HTML標準の仕様ではSVG 2を参照している。さらに、SVGを実装するならそれ以前のバージョンではなくSVG 2を実装しなければならないと規定されている^[44]。

ネイティブサポート

• Internet Explorer - Internet Explorer 9からSVG 1.1に標準対応^[45]。
• Mozilla Firefox - 1.5から対応。
• Google Chrome - 最初のバージョンから対応。
• Android標準ブラウザ - Android 3.0から対応。
• Safari - Safari 3.0からSVG 1.1に完全ではないが対応^[46]。対応状況は環境毎に異なる。
  • OS X - バージョン 3.1.2の時点で、カラープロファイルなど一部機能を未実装。現状の対応状況は、WebKit SVG Status。
  • iOS - iPhone OS 2.1のMobile SafariでSVGに対応した。
  • Windows - Safari 3.1.2現在、フィルタなど一部の機能を除いて、実装している。
• OperaおよびOpera Mobile - 2005年4月に発表された Opera v8.0でSVG Tinyに、2006年発表のv9.0でSVG Basicに対応した。
  • Opera Miniは5から対応。
• NetFront Browser - 未対応。
• KDE Konqueror - KSVGを使って表示させることができる。
• W3C Amaya - 標準対応。

プラグインサポート

Internet Explorer 8以前のIEや、そのレンダリングエンジンを用いているブラウザなどにおいては、第三者製のプラグインを用いることで、SVG 画像を表示させる必要があった。

• Adobe - Adobe SVG Viewer。Internet Explorer や Netscape 向け。2009年1月1日にサポートを終了と発表した^[47]。
• Corel - Corel SVG Viewer
• GNOME - Mozilla 向けにプラグインの librsvg
• Examotion（開発元が Emia Systems から移った） - Renesis Player

デスクトップ

GNU/Linuxなどの Unix系オペレーティングシステム (OS) では、Freedesktop.org の標準に採用されるなど、様々な利用がされている。GNOME は librsvg を使いアイコンや壁紙に SVG を利用でき、また、KDE では KSVG を利用してアイコンを表示できるほか 3.4 からは SVG を使った壁紙に対応した。

Windows 系では2007年現在では特に動きはない。