SVG网页程式设计.PPT

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