可縮放向量圖形 (SVG) 是基於向量的圖形家族的一部分。 它們與基於光柵的圖形不同，後者在一個資料陣列中存儲每個圖元的顏色定義。 如今，網路上使用的最常見的點陣圖形格式包括 HTTP://www.aliyun.com/zixun/aggregation/16701.html">JPEG、GIF 和 PNG，每種格式都具有優缺點。
相比任何基於光柵的格式，SVG 具有多項優勢：
SVG 圖形是使用數學公式創建的，需要在原始檔案中存儲的資料要少得多，因為您無需存儲每個獨立圖元的資料。 向量圖形可更好地縮放。 對於網路上的圖像，嘗試從原始大小放大圖像可能產生失真（或像素化的）圖像。原始圖元資料是針對特定大小進行設計的。 當圖像不再是該大小時，顯示圖像的程式會猜測使用何種資料來填充新的圖元。 向量圖像具有更高的彈性；當圖像大小變化時，資料公式可相應地調整。
源檔案大小可能更小，所以 SVG 圖形比其他點陣圖形的載入速度更快，使用的頻寬更少。 SVG 圖像由瀏覽器渲染，可以以程式設計方式繪製。 SVG 圖像可動態地更改，這使它們尤其適合資料驅動的應用程式，比如圖表。 SVG 圖像的原始檔案是一個文字檔，所以它既具有易於訪問和搜尋引擎友好特徵。本文風信網(www.ithov.com)將介紹 SVG 格式的優勢，以及它們如何在 HTML5 中的 Web 設計工作中提供説明。
SVG 基礎知識
要創建 SVG 圖形，您會經歷與創建 JPEG、GIF 或 PNG 檔完全不同的流程。 JPEG、GIF 和 PNG 檔通常使用圖像編輯程式創建，比如 Adobe Photoshop。 SVG 圖像通常使用基於 XML 的語言創建。 有一些 SVG 編輯 GUI 將為您生成基礎的 XML。 但是，對於本文，我們假設您使用的是原始的 XML 語言。
清單 1 給出了一個簡單 SVG XML 檔的示例，該檔繪製一個具有 2 圖元寬的黑色邊框的紅色圓形。
清單 1. SVG XML 檔
<svg xmlns="HTTP://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>上述代碼會得到圖 1 中的圖形。
圖 1. 具有 2 圖元寬的黑色邊框的紅色圓形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
