svg入門詳解（理論篇）

1、svg是什麼？

SVG 意爲可縮放矢量圖形（Scalable Vector Graphics）。 SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。 SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失。 SVG 是萬維網聯盟的標準。

2、svg的優點

與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：

• SVG 圖像可經過文本編輯器來建立和修改；
• SVG 圖像可被搜索、索引、腳本化或壓縮；
• SVG 是可伸縮的；
• SVG 圖像可在任何的分辨率下被高質量地打印；
• SVG 可在圖像質量不降低的狀況下被放大；

3、瀏覽器支持狀況

4、使用方式

一、可在瀏覽器直接打開； 二、在HTML中的使用； SVG 文件可經過如下標籤嵌入 HTML 文檔：、 、 和。 SVG的代碼能夠直接嵌入到HTML頁面中，或直接連接到SVG文件。

（1）使用 標籤

• 優點：全部主要瀏覽器都支持，並容許使用腳本
• 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許）

示例：

<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
複製代碼

（2）使用 標籤

• 優點：全部主要瀏覽器都支持，並支持HTML4，XHTML和HTML5標準
• 缺點：不容許使用腳本。

示例：

<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
複製代碼

（3）使用 標籤

• 優點：全部主要瀏覽器都支持，並容許使用腳本
• 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許）

示例：

<iframe width="300px" height="300px" src="img/demo.svg"></iframe>
複製代碼

（4）直接在HTML嵌入SVG代碼

示例：

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> 
</svg>
複製代碼

（5）使用標籤

示例：

<img src="img/demo.svg" width="300px" height="300px"/>
複製代碼

（6）連接到svg文件

示例：

<a href="img/demo.svg">查看svg</a>
複製代碼

三、在css中使用

示例：

.container{
  background: white url(img/demo.svg) repeat;
}
複製代碼

參考：svg教程