• SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。它可以通過<SVG>標(biāo)簽嵌入HTML文檔，也可以用<IMG SRC="file.svg">來引用。
• 下面舉一個(gè)很常見的例子，即鼠標(biāo)懸浮改變圖片顏色，通常，如果我們采用JS來做這件事情的話，會(huì)設(shè)置兩張圖片，通過代碼來對懸浮/離開這兩種狀態(tài)進(jìn)行圖片切換。但如果采用SVG方案則不需要任何JS代碼，矢量圖片本身就可以實(shí)時(shí)動(dòng)態(tài)變化，我們只需要通過CSS修改其中相關(guān)的屬性即可。
• 首先是制作一張SVG矢量圖，可以通過這個(gè)網(wǎng)站創(chuàng)建一些簡單的圖片：
  https://c.runoob.com/more/svgeditor/
  畫好之后，選擇【視圖】【代碼】生成SVG代碼，把這些代碼嵌入HTML文檔就可以直接顯示了。另外，也可以通過【文件】【保存】將圖形保存為一個(gè)SVG文件，在使用上這個(gè)文件和普通的jpeg、png等沒有太大區(qū)別。
  
  image.png
• 下面以代碼方式進(jìn)行實(shí)驗(yàn)，這是剛才那幅愛心圖的代碼：

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="52" width="52" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_3" d="m25,18.42834c5.97828,-14.96314 29.40138,0 0,19.23833c-29.40138,-19.23833 -5.97828,-34.20147 0,-19.23833z" stroke-width="1.5" stroke="#000" fill="#FFAFCC"/>
 </g>
</svg>

• 在上面這些代碼中，就本例而言，真正最關(guān)鍵的是<path d="...">這一行，d是data的意思，也就是構(gòu)成整個(gè)愛心輪廓的矢量數(shù)據(jù)。為了方便起見，本例中刪除了一些與本例不相關(guān)的代碼，經(jīng)過整理的代碼如下，將它嵌入任何支持HTML5的瀏覽器中即可運(yùn)行：

<svg>
<style>
     #mysvg:hover { fill: red; }
</style>
  <g id = "mysvg">
  <rect fill="white" height="52" width="52" y="-1" x="-1"/>
  <path d="m25,18.42834c5.97828,-14.96314 29.40138,0 0,19.23833c-29.40138,-19.23833 -5.97828,-34.20147 0,-19.23833z" />
 </g>
</svg>

• 效果：當(dāng)鼠標(biāo)移動(dòng)到愛心上面時(shí)，變成紅心。
• 要點(diǎn)：

1. <rect>是矩形框，它在本例的作用是產(chǎn)生一個(gè)白色的背景。
2. <path>是矢量路徑，它構(gòu)成了愛心的輪廓。
3. <g>是元素分組，它將背景和愛心歸為一組，當(dāng)鼠標(biāo)懸浮的時(shí)候愛心將整體變成紅色，如果沒有這個(gè)分組，則鼠標(biāo)懸浮在愛心的“中空位置”時(shí)，不會(huì)觸發(fā)hover效果。
4. #mysvg:hover { fill: red; }，這個(gè)就不贅述了，它屬于CSS偽類的常規(guī)使用方法。