SVG学習辞典のロゴ画像

<< |辞典ホーム |リンク集 |ヘルプ |>>

辞典ホーム >(011.522.5345


SVG学習辞典

SVG(スケーラブルベクターグラフィックス)言語を学習しやすい初心者向けの辞典。ブラウザ対応別に並べてある。

お知らせ

2015/3/15 [重要]サイトの移転完了。これからも新しいアドレスでSVG学習辞典をよろしくお願いします。

2012/9/9 SIEに対応させた

2008/11/30 基準にIE(SIE)とSafariを配慮した。

過去の履歴はこちら

目次

1,この辞典を読む前に

「要素」と「属性」という言葉については、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,索引

初心者は「優先度2(難しい図形を描くことができる)」まで読んでおけば問題ない。

  1. お知らせ(1ページ目)
  2. この辞典を読む前に(1ページ目)
  3. 索引(1ページ目)
  4. SVGの基礎知識(1ページ目)
  5. 優先度0(学ぶべき基本について)(2ページ目)
    SVGを学ぶために必要な基礎知識とを学ぶ。この時点では、図形はまだ、描けないだろう。
  6. 優先度1(基本の図形を描くことができる)(3ページ目)
    SVGでかなり使われている要素と属性を説明する。
  7. 優先度1.5(基本だが学ぶのに時間がかかる)
    自由線、曲線など、基本的な図ではあるが、理解や学習に時間がかかる要素や属性を解説する。
  8. 優先度2(複雑な図形を描くことができる)(5ページ目)
    グラデーション効果や他のラスター画像を使う要素など、多くのブラウザで採用されている要素を解説する。
  9. 優先度2.5(対応に不安なもの)(6ページ目)
    学ぶのに、とても慎重になるべき要素を集めた。対応が不安定である。
  10. 優先度3(別の知識が必要となるもの)(7ページ目)
    ジャバスクリプトやスタイルシートなど、たくさんの知識が要求される要素について。
  11. 優先度4(アニメーションができる)(8ページ目)
    図を動かせるようなアニメーション関連の要素を解説する。
  12. 優先度5(次世代のSVG)(9ページ目)
    SVG1.0の仕様の中でも、SVGを拡張した形になっている要素を集めた。また、独自要素も含めた。フィルター効果、外字SVGフォントは近い将来、使われるようになるだろう。

アルファベット順に探したい方は、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+(一部対応)
Firefox1.5+1.5+1.5+1.5+1.5+1.5+4+4+(一部対応)
Opera8.0+8.0+8.0+8.0+10.0+9.0+8.0+10.0+
Safari3.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の役目をする。

3,SVGの基礎知識

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ブラウザをダウンロードしておくと、いろいろと便利である。

(1/6) 次のページへ進みます (011.522.5345)

シンプル

>>索引一覧へ戻る

他の学習辞典も、よろしければお使い下さい。「スタイルシート(CSS)学習辞典」、「HTML学習辞典」。

© Copyright 2003 dhr(Eメールでdhrname@mail.goo.ne.jp)著作権の許諾に関してはヘルプのページをご覧下さい。