編輯培力/HTML到SVG

XML 包含 HTML 和 SVG

XML	{	HTML	文件
		SVG	向量繪圖

• XML，可延伸標記式語言(Extensible Markup Language)
• HTML，超文件標記語言(HyperText Markup Language)
• SVG，可縮放向量圖形(Scalable Vector Graphics)

style 屬性同時支援，HTML 與 SVG，只是樣式項目有相同，也有不同的。

一、SVG在教學上應用的例子：

1. 轉動的齒輪
2. 山脈的走向
3. 現代智人走出非洲的可能路線
4. 日本史
5. 鄭氏大事紀
6. 動物細胞

二、兩種寫法：

• 圖檔寫法：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>

</svg>

• HTML寫法：

<svg>

</svg>

青高的課前練習：

參考頁
看原始碼，然後自己寫出來：
http://jendo.org/~thisNasAdmin/base.svg
http://jendo.org/~thisNasAdmin/polygon.svg
http://jendo.org/~thisNasAdmin/text.svg
http://jendo.org/~thisNasAdmin/Shinycircle.svg
http://jendo.org/~thisNasAdmin/3petal1.svg
http://jendo.org/~thisNasAdmin/3petal2.svg

編輯培力/HTML到SVG

   <link href="css/from.css" rel="stylesheet" type="text/css">

隨堂練習

建立一個CSS檔，給另外三個HTML使用