SVG 格式詳細說明：向量圖形的網頁標準

當你放大一張 JPG 或 PNG 圖片到 400%，你會看到像素——那些馬賽克方塊是所有點陣圖格式的本質限制。但如果你放大一個 SVG 圖形，它永遠保持清晰，邊緣銳利，沒有任何劣化。這就是向量圖形的核心魔法，而 SVG 是網頁世界實現這個魔法的標準格式。

向量 vs 點陣：兩種根本不同的思維

理解 SVG 首先要理解向量和點陣的根本差異。

點陣圖（Bitmap/Raster）：圖像由固定數量的像素格子組成，每個格子有一個顏色值。JPG、PNG、GIF、BMP 都是點陣圖。點陣圖的解析度是固定的——一張 100×100 像素的圖放大到 1000×1000 的顯示尺寸，電腦只能猜測和插值中間的像素，結果必然模糊。

向量圖（Vector）：圖像由數學描述的幾何形狀組成——點、線、曲線、多邊形，以及填充顏色和筆畫屬性。向量圖沒有「解析度」的概念，因為每次渲染都是根據數學公式重新計算的。放大 10 倍、100 倍、1000 倍，結果都同樣清晰。

這就是為什麼 Logo、圖示、插圖通常用向量格式設計，而照片只能是點陣圖——你沒辦法用幾個數學公式來描述一張複雜的人臉照片。

SVG 的獨特性：它是 XML 文字

SVG 全名是 Scalable Vector Graphics（可縮放向量圖形），由 W3C（萬維網聯盟）制定，1999 年首次發布。SVG 在向量圖形格式中有一個非常獨特的特性：它是純文字的 XML 格式。

你可以用任何文字編輯器開啟和編輯 SVG 文件。一個簡單的 SVG 圓形看起來像這樣：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" stroke="navy" stroke-width="3"/>
</svg>

這段 XML 描述了一個圓心在 (50,50)、半徑 40、藍色填充、深藍色外框的圓形。不管你把這個圓形顯示在多大的螢幕上，它都是完美的圓形。

文字格式帶來的好處：

• 可用版本控制管理：SVG 文件可以用 Git 進行差異比較（diff），追蹤每次修改。
• 可程式化生成：可以用任何程式語言動態生成 SVG，用於資料視覺化、動態圖表等。
• 可搜尋和索引：SVG 中的文字內容可以被搜尋引擎索引。
• 可直接嵌入 HTML：SVG 程式碼可以直接寫在 HTML 文件裡，成為 DOM 的一部分。

可縮放的實際意義

「可縮放」對現代多裝置網頁來說意義重大：

• Retina/高 DPI 螢幕：現代手機和螢幕的像素密度是傳統螢幕的 2–3 倍。JPG/PNG 圖示在高 DPI 螢幕上如果沒有提供對應解析度的版本，就會顯得模糊。SVG 完全沒有這個問題。
• 響應式設計：一個 SVG Logo 可以在行動裝置的 32px 導覽列和大型螢幕投影的 1920px 橫幅上同樣清晰，不需要準備多個不同解析度的版本。
• 列印：SVG 在列印到高解析度印表機時同樣完美，沒有點陣化的問題。

SVG 的網頁使用

SVG 在網頁上有多種使用方式：

• 圖片標籤：<img src="logo.svg">，最簡單的使用方式，SVG 作為圖片顯示。
• CSS 背景：background-image: url('icon.svg')，作為 CSS 背景使用。
• 內聯 SVG：直接把 SVG 程式碼寫進 HTML，可以用 CSS 控制樣式、用 JavaScript 操作 DOM 元素，實現動畫和互動效果。
• 字型替代：圖示字型（如 Font Awesome）正在被 SVG 圖示取代，因為 SVG 在可存取性和效能上都更好。

SVG 的動畫能力

SVG 支援多種動畫機制：

• CSS 動畫：用 CSS animation 和 transition 屬性控制 SVG 元素的動畫。
• SMIL 動畫：SVG 內建的動畫標籤（<animate>、<animateTransform>），雖然 Chrome 曾宣布要棄用，但最終保留了支援。
• JavaScript 操控：透過 JavaScript 動態修改 SVG DOM，實現任意複雜的動畫和互動效果。

設計工具支援

主流的向量設計工具都原生支援 SVG：

• Adobe Illustrator：最專業的向量設計工具，匯出 SVG 需要注意設定才能獲得乾淨的程式碼。
• Figma：現代 UI 設計的主流工具，支援直接匯出 SVG，程式碼相對乾淨。
• Sketch：Mac 平台的 UI 設計工具，原生 SVG 匯出。
• Inkscape：免費開源的向量繪圖工具，原生格式就是 SVG。
• Affinity Designer：Adobe 的替代品，支援完整的 SVG 工作流程。

SVG 的限制

• 不適合照片：複雜的自然圖像無法用向量路徑有效描述。
• 複雜 SVG 可能比 PNG 大：一個包含數千個路徑的複雜插圖，其 SVG 文件可能比等效的 PNG 截圖大得多。
• 安全問題：SVG 可以包含 JavaScript，在某些情境下（如允許用戶上傳 SVG）需要考慮 XSS 安全風險。
• 渲染差異：不同瀏覽器對 SVG 進階功能的支援程度略有差異。

不上傳的做法

如果這個檔案是機密的，最安全的做法是讓它根本不離開你的電腦。圖片格式轉換完全在瀏覽器裡執行：檔案從你的硬碟讀進記憶體、在本機處理、再寫回硬碟，不會送到任何伺服器。

1. 開啟圖片格式轉換。
2. 從你的電腦選擇檔案。它是在本機讀取的，不會上傳。
3. 選擇輸出格式，需要的話調整品質。
4. 下載結果。原始檔案留在原處。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片格式轉換