Scalable Vector Graphics

提供: miniwiki
移動先:案内、検索
Scalable Vector Graphics
拡張子 .svg
.svgz
MIMEタイプ image/svg+xml
開発者 World Wide Web Consortium
種別 ベクターグラフィック
派生元 XML

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

沿革

1998年に発足した W3C SVG ワーキンググループにより開発された。しかし、その時点でマクロメディアとマイクロソフトが VML 、アドビシステムズとサン・マイクロシステムズが PGML として知られる競合形式を提案していた。

  • 2001年9月4日 - SVG 1.0 が W3C 勧告となる
  • 2003年1月14日 - SVG 1.1 が W3C 勧告となる
  • 2003年1月14日 - SVG Tiny と SVG Basic （モバイル SVG プロファイル）が W3C 勧告となる
  • 2008年12月22日 - SVG Tiny 1.2 が W3C 勧告となる
  • 2011年8月16日 - SVG 1.1 (Second Edition) が W3C 勧告となる

特徴

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

ファイル:SVG Circle.svg
Circle タグを使用し円なども簡単に描画ができる

編集

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

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

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

レイヤー

ファイル:Bitmap VS SVG.svg
ビットマップデータとベクターデータを拡大した場合

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

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

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

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

ファイル形式

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

親和性

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

長所

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

欠点

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

規格の概要

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

現状

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

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

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

2017年2月現在、HTMLの標準仕様(HTML Living Standard)では、現在のSVGの規格は実情に即していないとして、SVG 1.1とSVG Tiny 1.2を元に一部追加・修正を行った実装を行うよう指示している[1][2]。

SVG 編集ソフト

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

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

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

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

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

2011年現在、パソコン用の主要ブラウザでネイティブサポートされている。しかし、Internet Explorer 8 以前のマイクロソフト製のレンダリングエンジンを用いているブラウザでは対応していない。これに対し、Internet Explorer 9 以上に移行するか、第三者製のプラグインを用いることで、SVG 画像を表示させることができる。

ネイティブサポート

  • Internet Explorer 9 は、SVG 1.1 に標準対応している[5]。
  • Firefox (Gecko) では、Firefox 1.5 から対応している。
  • Google Chrome は最初のバージョンから対応。
    • Android ブラウザは Android 3.0 から対応
  • Safari は、Safari 3.0 から SVG 1.1 に完全ではないが対応した[6]。対応状況は環境毎に異なる。
  • Opera および Opera Mobile は2005年4月に発表された Opera v8.0 で SVG Tiny に、2006年発表の v9.0 で SVG Basic に対応した。
  • NetFront Browser - 未対応
  • KDE の Konqueror は KSVG を使って表示させることができる。
  • W3C の Amaya が標準対応している。

プラグインサポート

デスクトップ

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

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

脚注

  1. ↑ “HTML Standard 2.1.8 Dependencies” (英語) (2017年2月17日). . 2017閲覧. “Also, the SVG specifications do not reflect implementation reality. Implementations implement subsets of SVG 1.1 and SVG Tiny 1.2. Although it is hoped that the in-progress SVG 2 specification is a more realistic target for implementations, until that specification is ready, user agents that implement SVG must do so with the following willful violations and additions.”
  2. ↑ “HTML Standard 日本語訳 2.1.8 依存関係” (2017年1月4日). . 2017閲覧. “また、SVG仕様は実装の現実を反映していない。実装は、SVG1.1とSVG Tiny 1.2のサブセットを実装している。進行中のSVG2仕様の準備ができるまで、SVG2仕様は実装のためのより現実的な目標であることが期待されるが、SVGを実装するユーザーエージェントは、次の故意の違反および追加を行わなければならない。”
  3. ↑ “Microsoft Office で SVG 画像を挿入する”. Office のサポート. . 2017閲覧.
  4. ↑ 若杉紀彦 (2016年10月27日). “OfficeアプリがIllustratorなどのSVG画像の挿入/編集に対応 ～無償のSVGアイコンライブラリも提供”. PC Watch. Impress Watch. . 2017閲覧.
  5. ↑ SVG in IE9 Roadmap - Internet Explorer ブログ (日本語版)
  6. ↑ The official WebKit SVG status page

関連項目

外部リンク


テンプレート:Graphics file formats



「http:///http:///mymemo.xyz/mymemo.xyz/wiki/index.php?title=Scalable_Vector_Graphics&oldid=52782」から取得