プログラミング基礎 I

第十一回 (2007年 7月 2日)

SVG の基礎

http://www.sw.it.aoyama.ac.jp/2007/PB1/lecture11.html

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

これからの予定

今週二回の授業:

7月 2日 (月曜日) 3限
7月 4日 (水曜日) 3限 (今週の水曜日は月曜日の授業)

全体のスケジュール

ミニテスト

解答例 (解答を見るには Opera などで「表示」→「スタイル」→「answer_examples」を選ぶ)

先週の宿題: 本格的な Web ページの拡張

今まで作った Web ページに今日習った要素などを追加してもっと充実なものにして下さい。

スタイルシートも合わせて拡張してください。

アップロードの都合のため、内部スタイルシートを使い、リンクは絶対 URI にして下さい。

授業中の他の学生に見せてもいい内容にしてください。

7月 1日 (日曜日) の 22:00 までに Moodle に投稿。

先週のまとめ

XHTML の検証には W3C の Validator を使用
リンク: <a href='リンク先'>リンクのテキスト</a>
ページ内の画像: <img src='画像ファイルの URI' alt='代行文章' />
Web ページなどの指定には URI を使用
URI の国際化版は IRI
表は <table>、行は <tr>、コマは <th> (見出し) 又は <td> (データ)
表はページの配置に誤用するのはだめ

SVG の例

パンダの顔 (のつもり)

SVG の名前

Scalable 拡大縮小可能
Vector ベクトル (反対: ラスタ)
Graphics グラフィクス (図形、図)

ベクトル対ラスタ

(CSS で float と clear でページを配置する例でもある)

パンダの顔の絵 (ラスタ)

ベクタとラスタの比較
	ベクトル (左)	ラスタ (右)
指定方法	座標 (x,y)	画素 (pixel, ピクセル)
理想な応用	図	写真
拡大すると	綺麗のまま	どんどん粗くなる
ファイルの大きさ	小さい、図の複雑さによる	大きい、画素数と圧縮による

SVG 用のインストール

最新の Opera, Firefox, Safari に内蔵
Internet Explorer:
Adobe の SVG プラグインをダウンロード

SVG 文書の外枠

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg xmlns='http://www.w3.org/2000/svg'
    xmlns:xlink='http://www.w3.org/1999/xlink'
    version='1.1'
    width='200px' height='200px'>
  <title>This is a test of SVG</title>
  ..
</svg>

SVG の座標系

左上が原点
右方向が +x、左方向が -x
下が +y、上が -y
単位が指定されてない場合はピクセル

SVG の基本形

長方形: <rect x=左のx座標 y=上のy座標 width=幅 height=高さ />
円: <circle cx=中心のx座標 cy=中心のy座標 r=半径 />
楕円: <ellipse cx=中心のx座標 cy=中心のy座標 rx=x方向の半径 ry=y方向の半径 />
線: <line x1=出発点のx座標 x2=到着点のx座標 y1='...' y2='...'/>
多角形: <polygon points='x₁ y₁ x₂ y₂ x₃ y₃...'/>

SVG の仕様書 (日本語)

SVG の簡単なスタイルの特性

fill: (形の内部の) 色、通常は black
stroke: (形の周りの) 線の色、通常は none (透明)
stroke-width: 線の幅

SVG のスタイル付け

外部スタイルシート: 一般の XML と同様
内部スタイルシート: XHTML と似ている
style 属性: XHTML と同様
特性を属性として使用: SVG 独特
class 属性: XHTML と同様
id 属性: XHTML と同様
任意の形の組み合わせ: <g> (XHTML: <div>)

演習 1: 簡単な SVG の図

長方形、円、楕円などを使って簡単な SVG の図を作って下さい。

図に意味は必要ない。提出不要。

演習 2: 作りたい面白い図

作りたい面白い図を考えてください。

今日習った SVG の部品以外に欲しい部品を考えてください。