このキーワード
友達に教える
URLをコピー

Scalable_Vector_Graphicsとは?

Scalable Vector Graphics

拡張子
.svg.svgz
MIMEタイプ
image/svg+xml
UTI
public.svg-image
【開発者】
W3C
【初版】
2001年9月4日 (2001-09-04)
最新版
1.1 (Second Edition)
(2011年8月16日 (2011-08-16))

【種別】
ベクターグラフィック
【派生元】
XML
オープン
フォーマット

Yes
【ウェブサイト】
W3C SVG Working Group

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

概要

1998年Adobe SystemsIBMネットスケープコミュニケーションズの3社によって提案されたPGML(Precision Graphics Markup Language)と、Autodeskヒューレット・パッカードMacromediaマイクロソフトVisio の5社によって提案された VML (Vector Markup Language)をもとにして、W3C SVG ワーキンググループにより開発された。

沿革

特徴

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

Circle タグを使用し円なども簡単に描画ができる

編集

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

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

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

レイヤー

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

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 を地図として利活用できる道ができ、国土地理院ではその保有する電子国土基幹情報を SVG で配信し、PC のみならず様々な媒体で活用する方法を提案して広く社会実験に供する試みを実施している。

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

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

日本産業規格

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

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 画像を表示させることができる。

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

ネイティブサポート

プラグインサポート

デスクトップ

GNU/Linuxなどの Unix系OSでは、Freedesktop.org の標準に採用されるなど、様々な利用がされている。GNOMElibrsvg を使いアイコンや壁紙に 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”、World Wide Web Consortium、2001年9月4日
  9. ^ Scalable Vector Graphics (SVG) 1.1 (Second Edition)”、World Wide Web Consortium、2011年8月16日
  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”、World Wide Web Consortium、2008年12月22日
  12. ^ Scalable Vector Graphics (SVG) 2”、World Wide Web Consortium、2018年10月4日
  13. ^ JIS X 4197
  14. ^ Microsoft Office で SVG 画像を挿入する”. Office のサポート. 2017年2月19日閲覧。
  15. ^ 若杉紀彦 (2016年10月27日). “OfficeアプリがIllustratorなどのSVG画像の挿入/編集に対応 ~無償のSVGアイコンライブラリも提供”. PC Watch. Impress Watch. 2017年2月19日閲覧。
  16. ^ SVG Import Filterのアーカイブ版はVersion 1.2.2 (2007-09-02) 以降、アップデートされていない。(アーカイブ版に更新日時:~~~~~)
  17. ^ Update to reference SVG 2 by dstorey ・ Pull Request #3692 ・ whatwg/html”. GitHub (2018年5月18日). 2019年5月4日閲覧。
  18. ^ 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.”
  19. ^ SVG in IE9 Roadmap - Internet Explorer ブログ (日本語版)
  20. ^ The official WebKit SVG status page

参考文献

関連項目

外部リンク

World Wide Web Consortium
【製品・標準】
推奨

【勧告候補】
  • Web Workers

【作業草稿】

【覚書】

【方針】

【発案】

【廃止】


【団体】
  • World Wide Web Foundation
  • SVG Working Group
  • WebOnt
  • W3C Device Description Working Group
  • WHATWG

【ソフトウェア】

【関連会議】
  • IW3C2
  • World Wide Web Conference
  • WWW1


画像ファイルフォーマット

ラスターイメージ
  • ANI
  • ANIM
  • APNG
  • ART
  • BEF
  • BMF
  • BMP
  • BPG
  • BSAVE
  • CAL
  • CGM
  • CIN
  • CPC
  • DPX
  • ECW
  • EXR
  • FITS
  • FLIC
  • FPX
  • GIF
  • HDRi
  • HEIF
  • ICER
  • ICNS
  • ICO
  • ICS
  • IGES
  • ILBM
  • JBIG
  • JBIG2
  • JNG
  • JPEG
  • JPEG 2000
  • JPEG-LS
  • JPEG-HDR
  • JPEG XR
  • MNG
  • MIFF
  • PBM
  • PCX
  • PGF
  • PGM
  • PICT
  • PICtor
  • Pixel
  • PNG
  • PPM
  • PSP
  • RAD
  • RGBE
  • SGI
  • TGA
  • TIFF
    • Logluv TIFF
  • WBMP
  • WebP
  • XAR
  • XBM
  • XCF
  • XPM

  • RAW画像

    ベクターイメージ

    【複合フォーマット】

    【関連項目】



    Webインターフェイス
    サーバーサイド
    プロトコル

    APIs

    【トピックス】


    クライアントサイド
    Web API
    W3C

    クロノス

    【その他】

    Gears - Web SQL Database



    Browser APIs

    ActiveX - Browser Helper Object - Google Native Client - WebAssembly


    【トピックス】

    Ajax - DHTML - Mashup - Web IDL


    ・・・・・・・・・・・・・・・・・・
    出典:wikipedia
    2020/06/06 10:29

    HAPPY Wikipedia

    あなたの考える「Scalable_Vector_G…」の意味を投稿しよう
    「Scalable_Vector_Graphics」のコンテンツはまだ投稿されていません。
    全部読む・投稿 

    Scalable_Vector_Graphicsスレッド一覧

    ・・・・・・・・・・・・・・・・・・
    「Scalable_Vector_Graphics」のスレッドを作成する
    Scalable_Vector_Graphicsの」
    友達を探す
    掲示板を探す
    このページ
    友達に教える
    URLをコピー

    注目のキーワード

    錦織圭/北島康介/2014_FIFAワールドカップ・アジア予選/サッカー日本女子代表/消費税/東京スカイツリー/ダルビッシュ有/イチロー/香川真司/野田内閣/復興庁/石川遼/HKT48/AKB48/ワールド・ベースボール・クラシック日本代表/黒田博樹/尖閣諸島/バレンタインデー/ONE_PIECE

    キーワードで探す

     
    友達を探す
    掲示板を探す
    ハッピーWiki
    ハッピーメール
    ハッピーランド
    HAPPY NEWS
    2010Happy Mail