SVG簡介

SVG是一種以快速開發和高性能爲目標來開發圖形的Google XML格式語言。

它有以下特點 -

SVG(Scalable Vector Graphics)是一種基於XML的語言，用於定義基於矢量的圖形。
SVG旨在通過網絡顯示圖像。
作爲矢量圖像，無論SVG圖像如何縮小或調整大小，都不會丟失質量。
SVG圖像支持交互性和動畫。
SVG是W3C標準。
其他圖像格式(如光柵圖像)也可以用SVG圖像杵着。
SVG與HTML的XSLT和DOM很好地集成。

優點

SVG有以下優點 -

使用任何文本編輯器來創建和編輯SVG圖像。
基於XML，SVG圖像是可搜索的，可索引的，並且可以被腳本化和壓縮。
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頁面 - test-svg.html

<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/Firefox/Opera直接查看SVG圖像，無需任何插件。在Internet Explorer中，需要使用activeX控件才能查看SVG圖像。

SVG簡介

SVG如何與HTML集成

<svg>元素表示SVG圖像的開始。
<svg>元素的width和height屬性定義了SVG圖像的高度和寬度。
在上面的例子中，使用了一個<circle>元素來繪製一個圓。
cx和cy屬性表示圓的中心。默認值是(0,0)。 r屬性表示圓的半徑。
其他屬性描邊和描邊寬度控制圓的輪廓。
fill屬性定義了圓的填充顏色。
閉合</ svg>標記指示SVG圖像的結束。

SVG教程

SVG實例

優點

缺點

示例

SVG如何與HTML集成