|
サイズ: 2894
コメント:
|
サイズ: 2573
コメント:
|
| 削除された箇所はこのように表示されます。 | 追加された箇所はこのように表示されます。 |
| 行 3: | 行 3: |
| SVGについて Inkscape を使ってイラストなどの作成を行ってきました。 Inkscape で作成したデータは svg 形式で保存されます。 svgデータはInkscape固有の形式ではなく、ベクトルデータの形式として共通規格が作られています。 |
svgデータはベクトルデータの形式として共通規格が作られています。<<BR>> |
| 行 11: | 行 6: |
| http://www.w3.org/ のページ内の左下付近にある SVG をクリック、 続いてSVG1.1 をクリック（これは英語）、 Table of Contents のすぐ上にある translation のリンクをクリック、 |
http://www.w3.org/ のページ内の左下付近にある SVG をクリック、<<BR>> 続いてSVG1.1 をクリック（これは英語）、<<BR>> Table of Contents のすぐ上にある translation のリンクをクリック、<<BR>> |
| 行 16: | 行 11: |
| SVGとは | ---- === SVGとは === |
| 行 21: | 行 17: |
| 図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く 文字も同様 拡大しても粗くならない 修正しやすい（ビットマップと比べて） 再利用しやすい（ビットマップと比べて） |
. 図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く . 文字も同様 . 拡大しても粗くならない . 修正しやすい（ビットマップと比べて） . 再利用しやすい（ビットマップと比べて） |
| 行 27: | 行 23: |
| アニメーションやスクリプトを使った動きのある絵を作ることもできます。 | アニメーションやスクリプトを使った動きのある絵を作ることもできます。<<BR>> |
| 行 30: | 行 26: |
| SVGデータ | ---- === SVGデータ === |
| 行 37: | 行 34: |
| <?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> |
{{{ <?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> }}} |
| 行 47: | 行 46: |
| メモ帳では扱えません。テラパッドなどを使いましょう。 | |
| 行 49: | 行 47: |
| SVGを表示できるブラウザ | ---- === SVGを表示できるブラウザ === |
| 行 51: | 行 50: |
| １） Opera | １） Opera |
| 行 53: | 行 52: |
| PDAや携帯端末のブラウザとして有名ですが、Windows用もあります。動作が軽快です。SVGのすべての機能に対応しているわけではありません。 | PDAや携帯端末のブラウザとして有名ですが、Windows用もあります。動作が軽快です。 |
| 行 55: | 行 54: |
| ２） FireFox | ２） !FireFox |
| 行 57: | 行 56: |
| Mozillaチームが開発（配布）しているWebブラウザです。バージョン1.5以降ではSVGの表示ができます。アニメーションなどいくつかの機能には対応していません。 | Mozillaチームが開発（配布）しているWebブラウザです。バージョン1.5以降ではSVGの表示ができます。 |
| 行 59: | 行 58: |
| ３） IE | ３） IE |
| 行 61: | 行 60: |
| IE単独では表示できません。プラグインが必要です。 アドビ社で作成（配布）しているSVG Viewerをインストールすると表示できるようになります。 機能は最も充実しています。IEのActiveXの機能を使っていて、起動のたびにセキュリティの警告が出ます。 |
IE単独では表示できません。プラグインが必要です。 アドビ社で作成（配布）しているSVG Viewerをインストールすると表示できるようになります。 IEのActiveXの機能を使っていて、起動のたびにセキュリティの警告が出ます。 |
| 行 66: | 行 65: |
機能はSVG Viewerが最も充実しています。 |
SVG概要
svgデータはベクトルデータの形式として共通規格が作られています。
規格はW3Cのページ http://www.w3.org/ を参照してください。
http://www.w3.org/ のページ内の左下付近にある SVG をクリック、
続いてSVG1.1 をクリック（これは英語）、
Table of Contents のすぐ上にある 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を表示できるブラウザ
１） Opera
- PDAや携帯端末のブラウザとして有名ですが、Windows用もあります。動作が軽快です。
２） FireFox
- Mozillaチームが開発（配布）しているWebブラウザです。バージョン1.5以降ではSVGの表示ができます。
３） IE
- IE単独では表示できません。プラグインが必要です。 アドビ社で作成（配布）しているSVG Viewerをインストールすると表示できるようになります。 IEのActiveXの機能を使っていて、起動のたびにセキュリティの警告が出ます。
SVG ViewerをインストールするとSVGファイルをダブルクリックしたときにIEが起動し、Inkscapeが起動しないかもしれません。
機能はSVG Viewerが最も充実しています。