Transcript SVG網頁程式設計
Slide 1
指導老師：祁苗豐 老師
陳文夏 老師
班級：資管四2
組員：24966047 施慧雨
24966093 黃憶元
Slide 2
大綱
摘要
研究背景、動機
系統分析與設計
系統功能與特色
程式範例
相關專有名詞
評估與展望
結語
Slide 3
摘要
HTML是種以文字為主的網路語言，單純
的文字排版與圖片顯示以及GIF的動畫，
對一般使用者來說已經無法滿足他們的需
求了，而Flash與SVG應使用者的需求出
現了。
SVG讓網頁開發人員可以在網頁上運用
清晰的向量圖形，以XML編寫，所以也
延續了XML的優點，可以容易地被搜尋
引擎找到。
Slide 4
研究背景
在網路科技與多媒體技術的驅使之下，使
用者藉著操作這些商用軟體，就能夠建立
在網路上使用的地理資訊系統，不過這些
商用軟體仍有些缺點。
SVG的出現是為了改善網路上圖形的展
示，允許在多種不同平台上使用，包括
Windows系列、Mac、Linux與Solaris。
Slide 5
研究動機
SVG是屬於向量格式的圖形，向量圖形
有別於一般的點陣圖格式，意思是說不論
圖形在何種解析度之下，或者是縮放的大
小更改之後，圖形也不會出現鋸齒狀，影
響圖片的品質。
純文字的格式編修方便、易讀易懂，且純
文字格式的檔案在資料的壓縮上效能非常
的高。
Slide 6
系統分析與設計摘要
本系統所提供的功能為提供公司內部電力
控制設備管理之需求，給予公司內部員工
使用。
管理者可使用系統來進行電力控制系統等
等的相關功能。
公司會分配給每個區域的管理者帳號、密
碼，系統傳送簡訊或E-mail通知內部管理
人員(問題回報)，可隨時掌握最新資訊及
狀態。
Slide 7
系統功能與特色
本系統主要分為兩大部分，分別為主管及
電力控制管理者。
電力控制管理者方面則有區域電力控制的
管理。
主管功能為監視管理者有沒有確實做到電
力控制的管理相關動作，當管理者發生問
題時，應立刻通知主管，讓主管能在第一
時間得知問題的發生來源以便解決。
Slide 8
解釋SVG
可縮放向量圖形(Scalable Vector
Graphics，SVG)是用來描述網頁二維向
量圖形的標記語言，為全球資訊網協會
(World Wide Web Consortium，W3C)為
實現圖形化網頁所制定的向量圖形標記語
言規範，為W3C標準XML影像模型。
Slide 9
文字、顏色程式範例
fill:green" x="10" y="40"
startOffset="0">
I Love Xml......
顏色
字型大小
字型
Slide 10
跑出結果
Slide 11
時鐘圖形範例
畫大圓
stroke-width="9"/>
stroke-width="9"/>
stroke-width="9"/>
stroke-width="9"/>
stroke="green" stroke-width="2" />
stroke="green" stroke-width="2" />
畫小圓
Slide 12
跑出結果
畫線1
大三角形
小三角形
畫線4
畫線2
畫線3
Slide 13
相關專有名詞
W3C
全球資訊網協會
SVG
可變式向量圖形
XML
延伸標記語言
CSS
串接式樣式表
DOM
文件物件模型
MathML
數學標記語言
Namespace
名稱空間
RDF
資源描述架構
SMIL
同步多媒體整合語言
Slide 14
評估與展望
預期完成之工作項目及成果:
為了達到節能減碳與節省經費的目的，以及
做出容易辨識園區遊樂設施的電子地圖，更
能有效且有效率的方便整合與控制電源。
因時程規劃及實際開發與預期的需求不同，
與系統開發初期設計仍有一些差距，但大部
分功能開發皆已大致完成，未來還有改進的
空間，基於時間與技術面的考量，期待能在
專題進行期間繼續完成，或者讓有興趣的人
員來進行更深入的開發動作。
Slide 15
結語
目前的電力控制管理，大部分還是以人工作
業為主，在電力控制的部分還是相當緩慢、
沒效率。
本系統的設計及研究主要目的為讓管理者能
快速進行電力控制相關動作，管理者經由系
統清楚呈現區域電力有效控制管理，能更有
效率掌握電力的使用狀態。
希望透過本系統為公司組織內部帶來更多便
利性，電力的控制更容易，更有效率的使用
及掌握。
指導老師：祁苗豐 老師
陳文夏 老師
班級：資管四2
組員：24966047 施慧雨
24966093 黃憶元
Slide 2
大綱
摘要
研究背景、動機
系統分析與設計
系統功能與特色
程式範例
相關專有名詞
評估與展望
結語
Slide 3
摘要
HTML是種以文字為主的網路語言，單純
的文字排版與圖片顯示以及GIF的動畫，
對一般使用者來說已經無法滿足他們的需
求了，而Flash與SVG應使用者的需求出
現了。
SVG讓網頁開發人員可以在網頁上運用
清晰的向量圖形，以XML編寫，所以也
延續了XML的優點，可以容易地被搜尋
引擎找到。
Slide 4
研究背景
在網路科技與多媒體技術的驅使之下，使
用者藉著操作這些商用軟體，就能夠建立
在網路上使用的地理資訊系統，不過這些
商用軟體仍有些缺點。
SVG的出現是為了改善網路上圖形的展
示，允許在多種不同平台上使用，包括
Windows系列、Mac、Linux與Solaris。
Slide 5
研究動機
SVG是屬於向量格式的圖形，向量圖形
有別於一般的點陣圖格式，意思是說不論
圖形在何種解析度之下，或者是縮放的大
小更改之後，圖形也不會出現鋸齒狀，影
響圖片的品質。
純文字的格式編修方便、易讀易懂，且純
文字格式的檔案在資料的壓縮上效能非常
的高。
Slide 6
系統分析與設計摘要
本系統所提供的功能為提供公司內部電力
控制設備管理之需求，給予公司內部員工
使用。
管理者可使用系統來進行電力控制系統等
等的相關功能。
公司會分配給每個區域的管理者帳號、密
碼，系統傳送簡訊或E-mail通知內部管理
人員(問題回報)，可隨時掌握最新資訊及
狀態。
Slide 7
系統功能與特色
本系統主要分為兩大部分，分別為主管及
電力控制管理者。
電力控制管理者方面則有區域電力控制的
管理。
主管功能為監視管理者有沒有確實做到電
力控制的管理相關動作，當管理者發生問
題時，應立刻通知主管，讓主管能在第一
時間得知問題的發生來源以便解決。
Slide 8
解釋SVG
可縮放向量圖形(Scalable Vector
Graphics，SVG)是用來描述網頁二維向
量圖形的標記語言，為全球資訊網協會
(World Wide Web Consortium，W3C)為
實現圖形化網頁所制定的向量圖形標記語
言規範，為W3C標準XML影像模型。
Slide 9
文字、顏色程式範例
fill:green" x="10" y="40"
startOffset="0">
I Love Xml......
顏色
字型大小
字型
Slide 10
跑出結果
Slide 11
時鐘圖形範例
畫大圓
stroke-width="9"/>
stroke-width="9"/>
stroke-width="9"/>
stroke-width="9"/>
stroke="green" stroke-width="2" />
stroke="green" stroke-width="2" />
畫小圓
Slide 12
跑出結果
畫線1
大三角形
小三角形
畫線4
畫線2
畫線3
Slide 13
相關專有名詞
W3C
全球資訊網協會
SVG
可變式向量圖形
XML
延伸標記語言
CSS
串接式樣式表
DOM
文件物件模型
MathML
數學標記語言
Namespace
名稱空間
RDF
資源描述架構
SMIL
同步多媒體整合語言
Slide 14
評估與展望
預期完成之工作項目及成果:
為了達到節能減碳與節省經費的目的，以及
做出容易辨識園區遊樂設施的電子地圖，更
能有效且有效率的方便整合與控制電源。
因時程規劃及實際開發與預期的需求不同，
與系統開發初期設計仍有一些差距，但大部
分功能開發皆已大致完成，未來還有改進的
空間，基於時間與技術面的考量，期待能在
專題進行期間繼續完成，或者讓有興趣的人
員來進行更深入的開發動作。
Slide 15
結語
目前的電力控制管理，大部分還是以人工作
業為主，在電力控制的部分還是相當緩慢、
沒效率。
本系統的設計及研究主要目的為讓管理者能
快速進行電力控制相關動作，管理者經由系
統清楚呈現區域電力有效控制管理，能更有
效率掌握電力的使用狀態。
希望透過本系統為公司組織內部帶來更多便
利性，電力的控制更容易，更有效率的使用
及掌握。