プログラミング基礎 I

第十二回 (2007年 7月4日)

SVG の応用

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

Martin J. Dürst

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

AGU

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

目次

これからの予定

全体のスケジュール

2006 年度の期末試験

ミニテストの返却

先週のまとめ

SVG の仕様書 (日本語)

月曜日からの宿題: 作りたい面白い図

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

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

XHTML と SVG の組み合わせ

  1. XHTML も SVG も XML のため、同ファイルで組み合わせ可能 (ネームスペースに注意、ブラウザのサポートは少ない)
  2. SVG を別のファイルにして、<object> 要素で XHTML に取り入れ

<object> 要素

<object type="image/svg+xml" data="panda.svg" height="200" width="200"> An sketch of a panda's face, with green background

<object type="image/svg+xml"
    data="panda.svg"
    height="200" width="200">
  <object type="image/gif"
      data="panda.gif">
    A sketch of a panda's face,
    with green background
  </object>
</object>

リンクの追加

部品の定義と使用

部品の定義

<defs>
  <g id='myPart'>
    <rect x='0' y='0' width='20' height='20'/>
    <circle cx='20' cy='20' r='15'/>
  </g>
</defs>

部品の使用

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

SVG のスタイル付け

回転、移動、拡大縮小

透明性

丸角の長方形

例:

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

演習: 面白い SVG の図

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

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

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

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