welcome: please sign in
location: "SVG概要"の差分
6と7のリビジョン間の差分
⇤ ← 2013-01-16 02:31:26時点のリビジョン6 →
サイズ: 2518
編集者: masahiko
コメント:
← 2013-01-16 02:33:52時点のリビジョン7 → ⇥
サイズ: 2132
編集者: masahiko
コメント:
削除された箇所はこのように表示されます。 追加された箇所はこのように表示されます。
行 48: 行 48:
HTML5対応のほとんどのブラウザで表示できるようになりました。
行 58: 行 60:
 IE単独では表示できません。プラグインが必要です。
 アドビ社で作成（配布）しているSVG Viewerをインストールすると表示できるようになります。
 IEのActiveXの機能を使っていて、起動のたびにセキュリティの警告が出ます。

SVG ViewerをインストールするとSVGファイルをダブルクリックしたときにIEが起動し、Inkscapeが起動しないかもしれません。

機能はSVG Viewerが最も充実しています。		  バージョン9.0以降で表示できます。

SVG概要

svgデータはベクトルデータの形式として共通規格が作られています。
規格はW3Cのページ http://www.w3.org/ を参照してください。

  • http://www.w3.org/ のページでは、Web Design and Applications内のGraphicsに分類されています。 英語の規格のページ内のどこかに translation のリンクがあり、この中にSVG1.1 仕様の日本語版があります。

SVGとは

SVGはScalable Vector Graphicsの略です。

ベクトルグラフィックスには次のような特徴があります。

  • 図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く
  • 文字も同様
  • 拡大しても粗くならない
  • 修正しやすい（ビットマップと比べて）
  • 再利用しやすい（ビットマップと比べて）

アニメーションやスクリプトを使った動きのある絵を作ることもできます。
インタラクティブな動作も可能です。

SVGデータ

データはテキストデータです。 XMLで記述されます。

たとえば長方形を２つ描くSVGはこんなデータになります。 

  •  <?xml version="1.0" standalone="no"?>
 <svg width="5cm" height="4cm" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
 <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
 <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
 </svg>

テキストエディタを使って編集できます。

文字コードとしてはUTF-8を使うことを薦めます。

SVGを表示できるブラウザ

HTML5対応のほとんどのブラウザで表示できるようになりました。

１） Opera

  • PDAや携帯端末のブラウザとして有名ですが、Windows用もあります。動作が軽快です。

２） FireFox

  • Mozillaチームが開発（配布）しているWebブラウザです。バージョン1.5以降ではSVGの表示ができます。

３） IE

  • バージョン9.0以降で表示できます。

SVG概要 (最終更新日時 2013-01-16 02:33:52 更新者 masahiko)