今回は、「ごく簡単で、基本的な図形を作成する」事を目的にしています。今回からは、SVG言語の利点を説明していきながら、実際に図形を作ります。
SVG言語は便利ですが、覚えたり書くのに苦労します。そこで、まず、SVGの中でも最も簡単な図形から描いていきましょう。
今回からは、文章を編集するための、普通のテキストエディターを使っていきますので、それをご用意下さい。ウィンドウズならば、付属している「メモ帳」で十分です。その他にも、たくさん無料のテキストエディターがネットにありますので、自分で探すのも一つの手かもしれません。
SVG言語の形式に関しては、覚えることがそんなに多くありません。初心者の人は、かっこの「<」と「>」の中に、色々な文字を書いていくのだと覚えてくだされば結構です。
例えば、<svg xmlns="http://www.w3.org/2000/svg"></svg>という具合です。
まずは、単純な図形の四角形（rectangle)から作っていきましょう。テキストエディターを起動させてください。そして、前々回の「パソコン初心者向け」の回で学んだコピペをやってみます。以下の文章を自分のエディターにコピー複写してみてください。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" width="100" height="100"></rect> </svg>
あなたのエディターで、保存を行います。保存方法としては、ファイル名に「test.svg」とでも付けておいて下さい。とにかく、「.svg」（ドット点を忘れずに）を最後に付けておくことが重要なのです。
そのファイルをブラウザで開くと、次の図のように、四角が表示されるはずです。このように、文章を写すだけで、図形をコピーできるのは、SVGの大きな利点です。
以上のように、入れ子方式になっていることに気づきます。つまり、<rect..></rect>は、<svg..>と</svg>に挟まれていますね。
ですが、<rect ..></rect>の間には何も挟まれていません。これは無駄なので、最後の</rect>を省略して、<rect../>とします。
<rect x="50" y="50" width="100" height="100"/>
すなわち、「<rect..></rect>」と「<rect../>」は同じ意味です。
SVG言語では英語を使いますので、単語を覚えておきましょう。しかし、まだ、今の段階では学ぶのが早いので、とりあえず、簡単な説明だけにとどめておきます。
上の文章をあえて、日本語に和訳すると、以下の文章になります。
<svg xml名前空間="http://www.w3.org/2000/svg" xml名前空間:xlink="http://www.w3.org/1999/xlink"> <四角形 位置上から="50" 位置左から="100" 幅="100" 高さ="100"/> </svg>
分かりやすく言いますと、幅100で高さ100という大きさの四角形が、上から50、左から100の位置にあるということです。
このように、画像を数で調節していくのです。数には単位（例：cmなど）を付けることができますが、単位のない方が便利なので、これからは単位を付けないで説明していきます。
精密な図形を作っていくためには、数を相手にしていきます。これがHTML文書とはちがう部分です。
四角形を描くことはできましたが、もっと、色々なことができます。次回ではもっと、色をつけたり、様々な四角形について説明していきましょう。
