Scalable Vector Graphics

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

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

概要

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年現在では特に動きはない。

脚注

出典

1. “Media Type Registration for image/svg+xml”. W3C. 2019年9月1日閲覧。
2. JIS TR X 0095 2003.
3. 小町 2008.
4. “Precision Graphics Markup Language (PGML)”、World Wide Web Consortium、1998年4月10日
5. “VML - the Vector Markup Language”、World Wide Web Consortium、1998年5月13日
6. 「W3C、Web上でベクターグラフィックを表示する「SVG」のドラフトを公開」『INTERNET Watch』、インプレス、1999年2月12日
7. “W3C Working Draft: Scalable Vector Graphics (SVG)”、World Wide Web Consortium、1999年2月11日
8. ^ "Scalable Vector Graphics (SVG) 1.0 Specification W3C Recommendation 04 September 2001" W3C 2001 より引用。
9. W3C 2011
10. “Mobile SVG Profiles: SVG Tiny and SVG Basic”、World Wide Web Consortium、2003年1月14日
11. ^ "Scalable Vector Graphics (SVG) Tiny 1.2 Specification W3C Recommendation 22 December 2008" W3C 2008 より引用。
12. ^ "Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011" W3C 2011 より引用。
13. ^ "Scalable Vector Graphics (SVG) 2 W3C Candidate Recommendation 04 October 2018" W3C 2018 より引用。
14. "A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text." W3C 2018 より引用。
15. ^ "A path is made up of multiple segments, and every command, either explicit or implicit, other than moveto or closepath, defines one path segment." W3C 2018 より引用。
16. "A path is defined by including a ‘path’ element on which the d property specifies the path data." W3C 2018 より引用。
17. "SVG path data matches the following EBNF grammar. ... drawto_command::= moveto | closepath | lineto | horizontal_lineto | vertical_lineto | curveto | smooth_curveto | quadratic_bezier_curveto | smooth_quadratic_bezier_curveto | elliptical_arc" W3C 2018 より引用。
18. "The 'moveto' commands (M or m) must establish a new initial point and a new current point." W3C 2018 より引用。
19. "L (absolute) l (relative) lineto Draw a line from the current point to the given (x,y) coordinate which becomes the new current point." W3C 2018 より引用。
20. "H (absolute) h (relative) horizontal lineto Draws a horizontal line from the current point." W3C 2018 より引用。
21. "V (absolute) v (relative) vertical lineto Draws a vertical line from the current point." W3C 2018 より引用。
22. "The 'closepath' (Z or z) ends the current subpath by connecting it back to its initial point. An automatic straight line is drawn from the current point to the initial point of the current subpath." W3C 2018 より引用。
23. "curveto ... Draws a cubic Bézier curve from the current point" W3C 2018 より引用。
24. "smooth curveto ... Draws a cubic Bézier curve from the current point ... The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point." W3C 2018 より引用。
25. "quadratic Bézier curveto ... Draws a quadratic Bézier curve from the current point" W3C 2018 より引用。
26. "smooth quadratic Bézier curveto ... Draws a quadratic Bézier curve from the current point ... The control point is assumed to be the reflection of the control point on the previous command relative to the current point" W3C 2018 より引用。
27. "A (absolute) a (relative) elliptical arc Draws an elliptical arc from the current point" W3C 2018 より引用。
28. "The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:" W3C 2018 より引用。
29. "basic shape ... A graphics element that is defined by some combination of straight lines and curves. Specifically: ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’ and ‘rect’." W3C 2018 より引用。
30. "The ‘line’ element defines a line segment that starts at one point and ends at another." W3C 2018 より引用。
31. "The ‘polyline’ element defines a set of connected straight line segments." W3C 2018 より引用。
32. "For rounded rectangles, the computed values of the rx and ry properties define the x- and y-axis radii of elliptical arcs used to round off the corners of the rectangle." W3C 2018 より引用。
33. "The ‘polygon’ element defines a closed shape consisting of a set of connected straight line segments." W3C 2018 より引用。
34. "Mathematically, these shape elements are equivalent to a ‘path’ element that would construct the same shape." W3C 2018 より引用。
35. "The shape-rendering property provides a hint to the implementation about what tradeoffs to make as it renders vector graphics elements" W3C 2018 より引用。
36. "optimizeSpeed ... emphasize rendering speed ... will sometimes cause the user agent to turn off shape anti-aliasing." W3C 2018 より引用。
37. "crispEdges ... emphasize the contrast between clean edges of artwork ... might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels." W3C 2018 より引用。
38. "emphasize geometric precision over speed and crisp edges." W3C 2018 より引用。
39. JIS X 4197
40. “Microsoft Office で SVG 画像を挿入する”. Office のサポート. 2017年2月19日閲覧。
41. 若杉紀彦 (2016年10月27日). “OfficeアプリがIllustratorなどのSVG画像の挿入/編集に対応 ～無償のSVGアイコンライブラリも提供”. PC Watch. Impress Watch. 2017年2月19日閲覧。
42. SVG Import Filterのアーカイブ版はVersion 1.2.2 (2007-09-02) 以降、アップデートされていない。(アーカイブ版に更新日時：~~~~~)
43. “Update to reference SVG 2 by dstorey · Pull Request #3692 · whatwg/html”. GitHub (2018年5月18日). 2019年5月4日閲覧。
44. “HTML Standard 2.1.9 Dependencies” (英語). HTML Standard (2019年5月3日). 2019年5月4日閲覧。 “User agents that implement SVG must implement the SVG 2 specification, and not any earlier revisions.”
45. SVG in IE9 Roadmap - Internet Explorer ブログ (日本語版)
46. The official WebKit SVG status page
47. [1]

参考文献

• JIS TR X 0095:2003「変倍ベクタ図形 (SVG) 1.0」（日本産業標準調査会、経済産業省） - SVG 1.0仕様の日本語訳 (TR)
• 小町 祐史「マーク付け言語関連規定のこれまでの議論と今後の展望」『情報知識学会誌』第18巻第4号、情報知識学会、2008年11月29日、323-333頁、doi:10.2964/jsik.3、2019年8月26日閲覧。 
• 高木 悟『SVGによるオープンなWeb Mapプラットホームの動向』（PDF）（レポート）KDDI、2008年10月10日。http://www.gissoken.org/pdf/SSK090310_SVGMap.pdf。2019年8月26日閲覧。 
• W3C (2001年). “Scalable Vector Graphics (SVG) 1.0 Specification”. World Wide Web Consortium. 2024年9月9日閲覧。
• W3C (2008年). “Scalable Vector Graphics (SVG) Tiny 1.2 Specification”. World Wide Web Consortium. 2024年9月9日閲覧。
• W3C (2011年). “Scalable Vector Graphics (SVG) 1.1 (Second Edition)”. World Wide Web Consortium. 2024年9月9日閲覧。
• W3C (2018年10月). “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2024年9月9日閲覧。

関連項目

• Adobe Flash (Macromedia Flash)
• Apache Batik
• Canvas要素
• Commons:SVG変換
• Comparison of layout engines (SVG)（英語版）
• Computer Graphics Metafile (CGM)
• Direct2D
• Extensible Markup Language (XML)
• 地理情報システム
• List of vector graphics editors（英語版）
• List of vector graphics markup languages（英語版）
• PostScript (PS)- ベクタ形式の画像フォーマット
  • Encapsulated PostScript (EPS) - ベクタ形式の画像フォーマット
• Raster to vector（英語版）
• Resolution independence（英語版）
• SVG animation（英語版）
• SVG Working Group（英語版）
• SVG's XML Binding Language（英語版）
• WYSIWYG
• Windows Metafile (WMF, EMF) - ベクタ形式の画像フォーマット
• ビットマップ画像（ラスターグラフィック）
• ベクターイメージ

外部リンク

• W3C の SVG 公式サイト （英語）
• Scalable Vector Graphics (SVG) 2 （英語） - SVG 2の規格書
• SVG: Scalable Vector Graphics （日本語） - Mozillaによる、ウェブ開発者向けの説明