鍍金池/ 教程/ HTML/ SVG簡(jiǎn)介
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時(shí)鐘
SVG漸變
SVG <pattern>元素
SVG簡(jiǎn)介
SVG徑向漸變
SVG <filter>元素
SVG對(duì)話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽(tīng)器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動(dòng)
SVG模糊效果

SVG簡(jiǎn)介

SVG是一種以快速開(kāi)發(fā)和高性能為目標(biāo)來(lái)開(kāi)發(fā)圖形的Google XML格式語(yǔ)言。

它有以下特點(diǎn) -

  • SVG(Scalable Vector Graphics)是一種基于XML的語(yǔ)言，用于定義基于矢量的圖形。
  • SVG旨在通過(guò)網(wǎng)絡(luò)顯示圖像。
  • 作為矢量圖像，無(wú)論SVG圖像如何縮小或調(diào)整大小，都不會(huì)丟失質(zhì)量。
  • SVG圖像支持交互性和動(dòng)畫(huà)。
  • SVG是W3C標(biāo)準(zhǔn)。
  • 其他圖像格式(如光柵圖像)也可以用SVG圖像杵著。
  • SVG與HTML的XSLT和DOM很好地集成。

優(yōu)點(diǎn)

SVG有以下優(yōu)點(diǎn) -

  • 使用任何文本編輯器來(lái)創(chuàng)建和編輯SVG圖像。
  • 基于XML，SVG圖像是可搜索的，可索引的，并且可以被腳本化和壓縮。
  • SVG圖像具有高度的可擴(kuò)展性，因?yàn)椴还芩鼈內(nèi)绾慰s小或調(diào)整大小，它們都不會(huì)丟失質(zhì)量。
  • 在任何分辨率下都有良好的打印質(zhì)量。
  • SVG是一個(gè)開(kāi)放標(biāo)準(zhǔn)。

缺點(diǎn)

SVG有以下缺點(diǎn) -

  • 與二進(jìn)制格式的光柵圖像相比，文本格式大小更大。
  • 即使對(duì)于小圖像，尺寸也可能很大。

示例

以下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頁(yè)面 - 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圖像，無(wú)需任何插件。 在Internet Explorer中，需要使用activeX控件才能查看SVG圖像。

SVG如何與HTML集成

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

上一篇：SVG stroke屬性下一篇：SVG線性漸變