プログラミング基礎 I

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

SVG の基礎

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

Martin J. Dürst

AGU

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

目次

前回のまとめ

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

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

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

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

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

投稿前には Validator でチェック

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

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

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

(提出不要)

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

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

SVG の名前

ベクトル対ラスタ

パンダの顔の図 (ベクトル)

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

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

 

SVG の基本形

SVG の仕様書 (日本語)

丸角の長方形

例:

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

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

透明度

SVG のスタイル付け

 

部品の使用

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

 

部品の簡単な移動や回転

演習: 面白い SVG の図形

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

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

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

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