SVG(スケーラブルベクターグラフィックス)言語を学習しやすい初心者向けの辞典。ブラウザ対応別に並べてある。
2015/3/15 [重要]サイトの移転完了。これからも新しいアドレスでSVG学習辞典をよろしくお願いします。
2012/9/9 SIEに対応させた
2008/11/30 基準にIE(SIE)とSafariを配慮した。
「要素」と「属性」という言葉については、SVGの基礎知識をご覧下さい。
「SVG学習辞典」は、SVG言語を学習するために作られた辞典。ブラウザ対応別に分けて、要素を解説する。上から順に読むと、学びやすいだろう。
辞典をひとまとめにダウンロードしたい>>ZIP形式の圧縮版(svg20050121.zip)
この辞典はW3Cの勧告仕様「SVG1.1」と「SVG1.0」に従う。SVG1.1の邦訳板(http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/index.html)を主に参考にしている。
初心者は「優先度2(難しい図形を描くことができる)」まで読んでおけば問題ない。
アルファベット順に探したい方は、ABC順索引を参考に。
| 優先度0 | 優先度1 | 優先度1.5 | 優先度2 | 優先度2.5 | 優先度3 | 優先度4 | 優先度5 | |
| Inernet Explorer(注1:SIE利用時) | SIE1.0以降(以下、+と称す) | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+(一部対応) | <1.0+(一部対応) |
|---|---|---|---|---|---|---|---|---|
| Firefox | 1.5+ | 1.5+ | 1.5+ | 1.5+ | 1.5+ | 1.5+ | 4+ | 4+(一部対応) |
| Opera | 8.0+ | 8.0+ | 8.0+ | 8.0+ | 10.0+ | 9.0+ | 8.0+ | 10.0+ |
| Safari | 3.1+ | 3.1+ | 3.1+ | 3.1+ | 3.1+ | 3.1+ | 4.0+ | 非対応 |
| Inkscape(エディター) | 0.37+ | 0.37+ | 0.37+ | 0.37+ | 0.37+? | 非対応 | 非対応 | 非対応(ごく一部対応) |
| SVG Tiny仕様サポート | 1.0+ | 1.0+(一部非対応) | 1.0+ | 1.2+ | 非対応 | 1.2+一部対応? | 1.0+ | 非対応(一部、1.2+) |
| SVG Basic仕様サポート | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+(一部対応) |
| SVG Full仕様サポート | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
注1:SIEとはオープンソースのプロジェクトで作られたJavaScriptのライブラリである。プラグインを使わずにviewerの役目をする。
SVGとはScalable Vector Graphic(スケーラブルベクターグラフィックス)の略である。XML形式であり、拡大縮小しても劣化しないグラフィック画像文書である。詳しくは「SVGとは何か」に書いてある。
基礎知識として、<>で囲まれた部分を「タグ」と呼ぶ。また、SVGの種類については、「要素」と、「属性」がある。
例として、svg要素(SVGの文書)を表現すると、
<svg>(ここに文書などを入れる)</svg>となる。<svg>の方を「開始タグ」、</svg>の方を「終了タグ」と呼び、開始タグと終了タグに囲まれた文が、「SVGの文書」となるのである。
要素の内容とは、タグに囲まれた部分を指す。例えば、<要素名>内容</要素名>などである。SVGの要素名にはアルファベットが使われている。大文字と小文字は区別される。例えば、「svg」要素を「SVG」要素と書いてはいけない。
属性は、開始タグに含まれている。たとえば、svg要素で「<svg xmlns:xlink="http;//www.w3.org/1999/xlink">(ここに要素などを)</svg>」がある。「svg」と「xmlns:xlink」の文字の間は半角スペースをを入れる。xmlns:xlinkはsvg要素の属性である。空白で区切れば、一つの要素に属性はいくらでも書ける。
また、SVGでは、例えば「<circle></circle>」のように、タグが何も囲んでおらず、要素の内容が書かれていないことが多い。このとき、「<circle/>」と省略できる。ちなみに、これは円を描画する要素である。
上記のようにタグなどを利用して画像を作成する。要するに、文書の編集と同じなのである。もちろん、文章を編集しなくても良いSVG作成専用のペイントソフト(Inkscapeなど)もあるが、ウィンドウズ付属の「メモ帳」や「xyzzy」など、普通の文書作成エディターでも構わない。また、Firefox+firebugも重宝する。
もし、SVGの画像を見られなかったり、問題がある場合は、検索エンジンで、FirefoxやOperaのダウンロードを探すのも良いし、または、BatikのSVGブラウザをダウンロードしておくと、いろいろと便利である。
>>索引一覧へ戻る
他の学習辞典も、よろしければお使い下さい。「スタイルシート(CSS)学習辞典」、「HTML学習辞典」。
© Copyright 2003 dhr(Eメールでdhrname@mail.goo.ne.jp)著作権の許諾に関してはヘルプのページをご覧下さい。