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>元素的widthheight屬性定義了SVG圖像的高度和寬度。
  • 在上面的例子中,使用了一個<circle>元素來繪製一個圓。
  • cxcy屬性表示圓的中心。 默認值是(0,0)r屬性表示圓的半徑。
  • 其他屬性描邊和描邊寬度控制圓的輪廓。
  • fill屬性定義了圓的填充顏色。
  • 閉合</ svg>標記指示SVG圖像的結束。
0 條評論,你可以發表評論,我們會進行改進
Comment author placeholder