SVG教學 » SVG簡介

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如何與HTML整合

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