SVG概述

什麼是SVG？

SVG，可縮放向量圖形，是一種基於XML的語言，用於定義基於向量的圖形。
SVG旨在在網路上顯示影像。
作為向量影像，無論SVG影像如何縮放或調整大小，都不會損失質量。
SVG影像支援互動性和動畫。
SVG是W3C標準。
其他影像格式，如光柵影像，也可以與SVG影像組合。
SVG與HTML的XSLT和DOM很好地整合。

優勢

使用任何文字編輯器建立和編輯SVG影像。
基於XML，SVG影像可搜尋、可索引、可編寫指令碼和可壓縮。
SVG影像具有高度的可縮放性，因為無論如何縮放或調整大小，它們都不會損失質量。
任何解析度下都能獲得良好的列印質量。
SVG是一個開放標準。

劣勢

作為文字格式，其大小比二進位制格式的光柵影像大。
即使是很小的影像，大小也可能很大。

示例

以下XML程式碼片段可用於在Web瀏覽器中繪製一個圓。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

將SVG XML直接嵌入HTML頁面中。

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

輸出

在Chrome瀏覽器中開啟textSVG.htm。您可以使用Chrome/Firefox/Opera直接檢視SVG影像，無需任何外掛。在Internet Explorer中，需要activeX控制元件才能檢視SVG影像。

SVG如何與HTML整合

<svg>元素表示SVG影像的開始。
<svg>元素的width和height屬性定義SVG影像的高度和寬度。
在上面的示例中，我們使用了<circle>元素來繪製一個圓。
cx和cy屬性表示圓的中心。預設值為(0,0)。r屬性表示圓的半徑。
其他屬性stroke和stroke-width控制圓的輪廓。
fill屬性定義圓的填充顏色。
結束標籤</svg>表示SVG影像的結束。

列印頁面

廣告