プログラミング基礎 I

第十二回 (2012年 6月25日)

SVG の基礎

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

Martin J. Dürst

前回のまとめ

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

前回の演習 1: 本格的な Web ページの拡張

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

特に表と二段組みに挑戦してください。

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

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

投稿前には Validator でチェック

前回の演習 2: 簡単な SVG の図形

SVG の外枠と初歩の形を使って簡単な図形を作ってください。

前回の演習 3: 作りたい面白い図形

(提出不要)

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

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

SVG の名前

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

ベクトル対ラスタ

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

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

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 の仕様書 (日本語)

丸角の長方形

例:

<rect x=左のx座標 y=上のy座標 width=幅 height=高さ
    rx=角のx方向の半径 ry=角のy方向の半径/>

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

fill: (形の内部の) 色、初期値は black
stroke: (形の周りの) 線の色、初期値は none (透明)
stroke-width: 線の幅、初期値は 1

透明度

色を none にするとその部分が透明になる
例: <rect style='fill: none; stroke: blue; stroke-width: 4' ... />
fill-opacity: 1.0 は完全不透明、0.0 は完全透明
stroke-opacity は fill-opacity と同様

SVG のスタイル付け

外部スタイルシート: 一般の XML と同様
内部スタイルシート: <defs> 要素内の <style> 要素
style 属性: XHTML と同様
特性を属性として使用: SVG 独特
(例: <rect fill='green' /> は
<rect style='fill: green;' /> と同等)
class 属性: XHTML と同様
id 属性: XHTML と同様
任意の形の組み合わせ: <g> (XHTML: <div>)

部品の使用

再利用したい部品に id 属性で識別子を指定
(例: <g id='part1'>)
<use> 要素で部品を使用
xlink:href 属性で使用する部品を指定
#識別子 でファイル内の部品の識別子を指定

<use xlink:href='#part1' /> <!-- 同じファイル内 -->
<use xlink:href='file.svg#part1' /> <!-- 別のファイル -->

部品の簡単な移動や回転

transform 属性で様々な変更ができる
transform 内の指定:
- translate (t_x t_y): 移動 (t_x t_y は移動方向、距離)
- rotate (α c_x c_y): 回転 (α は時計回りの角度 (度)、c_x c_y が回転の中心点)
具体例:
<use xlink:href='#part1' transform='rotate(-30 100 100)' />

演習: 面白い SVG の図形

習った様々な部品や機能を使って面白い SVG の図を作って下さい。

簡単でもいいですが、何か意味のあるものを作って下さい。