プログラミング基礎 I

第十二回 (2010年 7月 5日)

SVG の基礎

http://www.sw.it.aoyama.ac.jp/2010/PB1/lecture12.html

Martin J. Dürst

前回の宿題: 本格的な Web ページの拡張

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

スタイルシートも合わせて拡張してください。特に二段組みに挑戦してください。

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

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

前回のまとめ

段落内には様々なマークアップが使用可能
表は <table>、行は <tr>、コマは <th> (見出し) 又は <td> (データ)
表はページの配置に誤用するのはだめ
ページの配置には float 又は position が使用可能
XHTML の検証には W3C の Validator を使用

SVG の例

パンダの顔 (のつもり)

SVG の名前

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

ベクトル対ラスタ

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

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

SVG 用のインストール

最近の Opera, Firefox, Safari などに内蔵
Internet Explorer:
Adobe の SVG プラグインをダウンロード
(2009年からサポートなしだが、Windows Vista/IE7 で動くこともある)

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.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 と同様
内部スタイルシート: <defs> 要素内の <style> 要素
style 属性: XHTML と同様
特性を属性として使用: SVG 独特
class 属性: XHTML と同様
id 属性: XHTML と同様
任意の形の組み合わせ: <g> (XHTML: <div>)

演習 1: 簡単な SVG の図

長方形、円、楕円、線、多角形などをスタイルとともに使って、簡単な SVG の図を作って下さい。

図に意味は必要ない。

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

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

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

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