プログラミング基礎 I

第十一回 (2011年 6月20日)

SVG の基礎

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

Martin J. Dürst

© 2006-11 Martin J. Dürst 青山学院大学

目次

• 前回の宿題とまとめ
• ベクトル画像とラスタ画像
• SVG の基本形とスタイル
• 部品の再利用
• 部品の移動・回転

これからの予定

• 6月20日: SVG の基礎
• 6月27日: SVG の応用
• 7月4日: 40分ぐらいの平常試験、SVG の応用

過去の問題 (60分の期末試験):

2006 年度の期末試験

2007 年度の期末試験

スタイルを変えると一部の正解例が見える。

前回のまとめ

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

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

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

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

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

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

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

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

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

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

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

(提出不要)

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

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

SVG の名前

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

ベクトル対ラスタ

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='x1 y1 x2 y2 x3 y3...'/>

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' />)
• 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 (tx ty): 移動
  • rotate (α tx ty): 回転 (t_x t_y が中心)

演習: 面白い SVG の図形

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

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

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

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