SVGで遊ぶ-SVG言語をシンプル解説（第1回）

はじめに

SVG言語は画像を描くことができます。でも、SVG言語は、単純な仕組みですが、私達が使うような普通の言語とはちがいます。

そこで、学生やパソコン初心者のために、SVG言語をシンプル解説していきましょう。

今回は、「SVGで遊ぶ」事を目的にしています。合わせて、重要なAdobe SVG Viewer（以下、アドビSVG）の使い方も理解できるようになっていますので、この回の終わりごろには、使いこなせるようになっている人が多いはずです。

アドビSVGを利用して、遊んだり、解説しますので、無料配布のアドビSVGを手に入れておいて下さい。（前回の「パソコン初心者向け」を参照）

まずは、アドビSVGを使った遊びをやってみましょう。遊びながら、使い方も覚えられるはずです。

まずはSVG画像を動かしてずらしてみましょう。次のSVG画像（１）をご覧下さい。

あなたの目の前には、パソコンに文字を打ち込むためのボタン、「キーボード」があります。その中から、「Alt」という文字の書かれたボタンを、（左下）探して押し続けてください。
Altを押したまま、SVG画像（１）にマウスの矢印を合わせると、矢印から手に変わります。
マウスのボタンを押したまま、動かすと、画像が動くはずです。試してください。
つまり、SVG画像の上で、Altとマウスの左ボタンを同時に押しながら、動かしていきます。途中でAltだけを離しても構いません。

この作業は、誤って、動かしたり、リンクをクリックしないための操作ですので、必ず、覚えておきましょう。後で必要になってきますから、今のうちに練習しておくと良いかもしれません。

次に、SVG画像を拡大縮小してみましょう。これは最も簡単な操作です。

まず、画像の拡大したい部分に、マウスの矢印を当てます。マウスの右ボタンを押して、「Zoom In」（拡大という意味）、「Zoom Out」（縮小という意味）の項目を探して選んでください。それで、自由に、拡大縮小ができるはずです。

Ctrlとマウスの左ボタンを同時に押しても、拡大ができます。

もちろん、大きくしたり小さくした後でも、画像は動かせます。

以下のSVG画像で、Ctrlとマウスの左ボタンを同時に押してみよう。また、押しながら動かしてみると、枠ができる。そのまま離すと、その枠内に沿うように、図が大きくなるので試してみよう。

これまで基本的な使い方を覚えていきました。次回は、SVGを作っていきますので、ご期待下さい。