以下是百度百科的解釋。
可縮放矢量圖形（Scalable Vector Graphics，SVG）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個開放標準。
[size=xx-large]2.怎麼用？[/size]
先提幾個問題：
a.怎樣繪製svg圖形？
b.svg怎麼用在網頁上？
c.svg怎麼和html進行交互？
[size=large]a.怎樣繪製svg圖形？[/size]
這裏就請到[url]http://www.w3school.com.cn/svg/svg_inhtml.asp[/url]
[size=large]b.svg怎麼用在網頁上？[/size]
這裏有幾種方法：
1.embed標籤
這個在w3裏面有提到，這裏省略
2.直接以標籤形式使用
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
</head>
<body>
<h3>在html裏面直接添加svg</h3>
<hr />
<svg:svg id='diagram' version="1.1" width="600" height="220">
<svg:g id="svgele" onclick="svgctrl()">
<svg:rect
style="fill:#ff0067;fill-opacity:1;fill-rule:nonzero;stroke:#00d1ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2816"
width="120"
height="32.142857"
x="7.1428571"
y="6.6478992" />
<svg:a
id="a3618"
transform="translate(-7.5714286,-21.428571)">
<svg:text
transform="scale(1.2412467,0.80564161)"
id="text3610"
y="60.196808"
x="17.778425"
style="font-size:21px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
xml:space="preserve">I'm svg</svg:text>
</svg:a>
</svg:g>
</svg:svg>
</body>
</html>
不要被svg的東西嚇到，那不是我敲的，是我用工具畫了之後複製過來的，當然也經過稍微的修改。svg的繪製工具很多，我用的是Inkscape.
每個svg的標籤前面加個svg:標識就可以了，這個很簡單
[size=large]c.svg怎麼和html進行交互？[/size]
svg現在也能夠利用js進行操控，這裏貼出個自己寫的小demo
(jquery 也有對svg的支持，可惜沒有找到詳細說明的api，看源碼也有點吃力)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>use svg to control html</title>
<style type="text/css"><![CDATA[
#diagram
{
border: solid;
}
#svgele
{
cursor: pointer;
}
]]></style>
<script type="application/javascript"><![CDATA[
function svgctrl()
{
var htmlEle = document.getElementById("htmlele");
htmlEle.innerHTML = "I have been changed！";
}
]]></script>
</head>
<body>
<h3>svg元素觸發事件操作html元素標籤</h3>
<hr />
<svg:svg id='diagram' version="1.1" width="600" height="220">
<svg:title>Create circles dynamically</svg:title>
<svg:g id="svgele" onclick="svgctrl()">
<svg:rect
style="fill:#ff0067;fill-opacity:1;fill-rule:nonzero;stroke:#00d1ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2816"
width="120"
height="32.142857"
x="7.1428571"
y="6.6478992" />
<svg:a
id="a3618"
transform="translate(-7.5714286,-21.428571)">
<svg:text
transform="scale(1.2412467,0.80564161)"
id="text3610"
y="60.196808"
x="17.778425"
style="font-size:21px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
xml:space="preserve">Click me</svg:text>
</svg:a>
</svg:g>
</svg:svg>
<p id="htmlele">I'm html element</p>
</body>
</html>
如果想直接看效果，請注意將文件後綴名寫爲.svg而不是.html
引用的格式和html大同小異，可以看到，如果能與html元素進行交互了，實際上就可以將svg看做成html的成員了，這樣，能做的事情就很多了，可以自由想象發揮。
更詳細的說明可以參考這裏：
[url]http://www.ibm.com/developerworks/cn/education/xml/x-dynamicsvg/section3.html[/url]
[size=xx-large]3.適用範圍[/size]
我現在只能用這些提到的操作使得我的網頁更加美觀一點，svg用處很多，網上說是沒有svg繪製不了的東西，svg的確很好玩，有時間還要多研究研究。