cc.jpg
一、svg是什么？
SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。
SVG 是萬維網聯盟的標準。
二、svg的優勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于：
- SVG 圖像可通過文本編輯器來創建和修改；
- SVG 圖像可被搜索、索引、腳本化或壓縮；
- SVG 是可伸縮的；
- SVG 圖像可在任何的分辨率下被高質量地打印；
- SVG 可在圖像質量不下降的情況下被放大；
三、瀏覽器支持情況
image.png
四、使用方式
1、可在瀏覽器直接打開；
2、在HTML中的使用；
SVG 文件可通過以下標簽嵌入 HTML 文檔：<embed>、<object> 、 <iframe>和<img>。
SVG的代碼可以直接嵌入到HTML頁面中，或直接鏈接到SVG文件。
（1）使用 <embed> 標簽
- 優勢：所有主要瀏覽器都支持，并允許使用腳本
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
示例：
<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
（2）使用 <object> 標簽
- 優勢：所有主要瀏覽器都支持，并支持HTML4，XHTML和HTML5標準
- 缺點：不允許使用腳本。
示例：
<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
（3）使用 <iframe> 標簽
- 優勢：所有主要瀏覽器都支持，并允許使用腳本
- 缺點：不推薦在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>標簽
示例：
<img src="img/demo.svg" width="300px" height="300px"/>
（6）鏈接到svg文件
示例：
<a href="img/demo.svg">查看svg</a>
3、在css中使用
示例：
.container{
background: white url(img/demo.svg) repeat;
}
- 實例篇請訪問：svg入門詳解（實例篇）
- 理論篇請訪問：svg入門詳解（理論篇）
- path詳解篇請訪問：svg之path詳解
參考：svg教程
