SVG

SVG (Scalable Vector Graphics) 是一種基於 XML 的矢量圖形格式. 它由 W3C (World Wide Web Consortium) 在 1999 年開始制定, 並於 2001 年發佈了第一個版本. SVG 主要用於在網頁上顯示矢量圖形, 因為它可以隨著視窗大小的變化而無損縮放

• 矢量圖形: 與位圖圖像 (如 JPEG 和 PNG) 不同, SVG 使用數學方程來描述圖形, 因此它可以無損地縮放到任意大小而不會失去清晰度. 這使得 SVG 特別適合需要不同尺寸顯示的圖形, 如圖標和標誌
• 基於 XML: SVG 文件是以 XML 格式編寫的, 這意味著它們是純文本文件, 可以被人類閱讀和編輯. 同時, 這也使得 SVG 文件可以輕鬆地與其他基於 XML 的技術（如 XSLT 和 XPath）集成
• 可編輯性: 由於 SVG 是基於文本的格式, 它可以使用任何文本編輯器來編輯. 此外, 許多圖形設計軟體（如 Adobe Illustrator 和 Inkscape）都支持 SVG 格式, 使其成為設計和編輯矢量圖形的理想選擇
• 互動性和動畫: SVG 支持內嵌腳本 (如 JavaScript), 這意味著可以通過腳本來實現圖形的交互和動畫效果. 這使得 SVG 在創建動態和互動網頁內容方面非常強大
• 壓縮性: 雖然 SVG 本身是一種文本格式, 但可以通過 gzip 等壓縮算法有效地減少文件大小. 大多數現代瀏覽器都能直接解壓縮和顯示壓縮後的 SVG 文件

• 無損縮放: SVG 圖像可以無損地縮放到任意大小, 非常適合需要不同尺寸顯示的圖形
• 文件大小較小: 對於簡單的圖形, SVG 文件通常比對應的位圖文件小, 這可以減少網頁加載時間
• 可編輯性強: SVG 文件可以用文本編輯器直接編輯, 並且可以很容易地集成到網頁中
• 互動和動畫: 可以使用腳本來實現圖形的交互和動畫效果, 使得網頁內容更加動態和吸引人

• 複雜圖像不適用: SVG 不適合用來表示複雜的位圖圖像, 如照片, 因為這些圖像的數據量太大, 不適合用矢量方式描述
• 瀏覽器兼容性: 雖然現代瀏覽器大多數都支持 SVG, 但在一些舊版本的瀏覽器中可能存在兼容性問題

• 網頁圖標和標誌: SVG 非常適合用來創建可以在不同設備和解析度下顯示清晰的圖標和標誌
• 數據可視化: SVG 常用於創建交互式圖表和數據可視化工具, 因為它可以與 JavaScript 結合使用來實現動態效果
• 網頁動畫: 使用 SVG, 可以創建複雜的動畫和交互效果, 增加網頁的吸引力和用戶體驗
• 設計原型: 設計師可以使用 SVG 來快速創建和分享設計原型, 因為它們可以在任何支持 SVG 的軟體中打開和編輯