至于SVG到底是什么東東我就不廢話了，事實說明一切。讓我們開始吧。

一、輕松入門（Blueidea_1.svg）
------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="400" height="400">
<desc>Blueidea</desc>
<circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/>
</svg>
-----------------------------------------------------------------------------
說明：
文件名是以.svg作為后綴名的。
第1行是xml聲明，指定所遵循的xml標準的版本和文件的編碼方式。
2、3行是DOCTYPE聲明，指定SVG DTD所在的位置。
第4行是SVG元素，svg元素是SVG文件的根元素，所有其他的SVG元素都是他的子元素。可以使用width屬性和height屬性設(shè)置SVG圖象的高和寬。單位象素。
第5行是desc元素，包含了一些描述性的信息。
第6行是circle元素，它的作用是畫一個圓，style屬性設(shè)置為"fill:blue"表示用藍色填充這個圓，cx和cy屬性用來定義圓心的x和y坐標，r屬性定義圓的半徑。
用瀏覽器可以打開這個文件，可以到http://www.adobe.com/svg/viewer/install/main.html去下載Adobe公司的SVG Viewer瀏覽器插件(2.24Mb Win 98 - XP SVGView.exe 3.0 11/2001 )。
---------------------------------------------------------------------------------


二、使用顏色（Blueidea_2.svg）
---------------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="400" height="400">
<desc>Blueidea</desc>

<circle style="fill:black" cx="100" cy="70" r="50"/>
<circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/>
<circle style="fill:none;stroke:red;" cx="160" cy="70" r="50"/>

</svg>
--------------------------------------------------------------------------------
說明：
如果你看了第一個例子就會知道這個例子構(gòu)造了三個不同的圓，第1個圓用黑色填充，線條顏色沒有設(shè)定，默認是黑色。第2個圓用藍色填充，線條是綠色。第3個圓不使用填充，線條是紅色。
語法形式>>> style="fill:color;stroke:color"
---------------------------------------------------------------------------------


三、不透明性（Blueidea_3.svg）
--------------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="400" height="400">
<desc>=Blueidea=Opacity</desc>

<circle style="fill:red;opacity:.5" cx="100" cy="70" r="50"/>
<circle style="fill:yellow;fill-opacity:.5" cx="130" cy="120" r="50"/>
<circle style="fill:blue;opacity:0" cx="160" cy="70" r="50"/>

</svg>
----------------------------------------------------------------------------
說明：
在SVG中，使用style屬性指定fill-opacity,stroke-opacity和opacity的值，可以控制圖象的透明度。
例如：fill-opacity表示填充顏色的透明程度。stroke-opacity表示線條顏色的透明程度?？扇≈档姆秶菑?到0；1表示完全不透明，0表示完全透明；如果圖象是完全透明的(opacity=0),那么圖象就看不見了。
------------------------------------------------------------------------------


四、線條（Blueidea_4.svg）
------------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="400" height="400">
<desc>Blueidea Strokes</desc>

<circle style="fill:none;stroke:red;stroke-width:5;" cx="100" cy="70" r="50"/>
<circle style="fill:none;stroke:blue;stroke-width:3;stroke-dasharray: 5 5 15 25"
cx="130" cy="180" r="100"/>

</svg>
----------------------------------------------------------------------------------
說明：
在SVG的style屬性中，stroke控制線條的顏色，stroke-width控制線條的寬度，stroke-dasharray是用來描述線段和空隙長度的。第1個"5"表示小線段的長度，第2個"5"表示小線段和長線段之間的長度，"15"表示長線段的長度，"25"表示長線段到短線段之間的長度。事實上，可以給上述數(shù)字序列再添上幾個數(shù)字，那么該圓的邊框線段和空隙就更多了。
-----------------------------------------------------------------------------------


五、文本（Blueidea_5.svg）
---------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="200" height="50">
<text x="50" y="13" style="fill: red; text-anchor: middle">
Blueidea
</text>
</svg>
---------------------------------------------------------------------------
說明：
在SVG中使用text元素定義文字。Text元素用x和y屬性定義文字的位置。Text元素默認是左對齊，可以用text-anchor子屬性指定文字的對齊方式，中對齊（text-anchor: middle），右對齊（text-anchor: end）
（按照XML的規(guī)則，顯示中文應(yīng)該是<?xml version="1.0" encoding="GB2312"?>，可在SVG中則通不過。誰知道的話請告訴我一聲，謝謝。）
文字顏色的定義：可以在text元素的style屬性中設(shè)置fill:color
---------------------------------------------------------------------------


六、分行顯示（Blueidea_6.svg）
-------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www./TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="50" height="50">
<text x="0" y="13" style="fill: red">
Line 1
<tspan x="0" dy="0.5cm">Line 2</tspan>
</text>
</svg>
-------------------------------------------------------------------------------------
說明：
在SVG中，可以使用tspan元素使文字分行顯示。Tspan元素作用于對文字顯示進行單獨控制。Tspan元素的dy屬性表示一個縱向相對位移值，他作用于區(qū)分上下兩行文字間的縱向相對位移。如果將dy屬性刪掉，將會發(fā)現(xiàn)line1被line2覆蓋而無法顯示。
Tspan元素除了dy還有x,y,dx,rotate,textlength等屬性。
-------------------------------------------------------------------------------------


七、形狀（Blueidea_7.svg）
前面的例子全是畫圓的，別誤會SVG只能畫圓哦，其實SVG可以畫很多復(fù)雜的形狀的。

創(chuàng)建橢圓

在SVG中可以使用ellipse元素創(chuàng)建橢圓，ellipse元素的cx和cy屬性表示橢圓中心的坐標，rx和ry表示橢圓的長軸和短軸。Style屬性決定橢圓的顯示樣式。
<ellipse cx="25" cy="25" rx="20" ry="10" style="fill:blue" />

創(chuàng)建矩形

在SVG中可以使用rect元素創(chuàng)建矩形，rect元素的x和y屬性表示矩形左上角的坐標，width和height表示矩形的長和高。Style屬性決定矩形的顯示樣式。
<rect x="10" y="10" width="20" height="10" style="fill:blue" />

創(chuàng)建圓角矩形

在SVG中可以使用rect元素創(chuàng)建圓角矩形，rect元素的x和y屬性表示矩形左上角的坐標，width和height表示矩形的長和高。Style屬性決定矩形的顯示樣式。
圓角矩形是矩形的一種特殊情形，只是又多了兩個和圓角相關(guān)的內(nèi)容：rx和ry屬性。
<rect x="10" y="10" rx="5" ry="5" width="20" height="30" style="fill:blue" />

創(chuàng)建線條

在SVG中可以使用line元素創(chuàng)建線條，line元素的x1和y1屬性表示線條的開始端的坐標，x2和y2表示線條的終點的坐標。Style屬性決定線條的顯示樣式。Stroke元素定義線條的顏色，stroke-width定義線寬
<line x1="10" y1="10" x2="50" y2="50" style="stroke:blue;stroke-width=5" />

創(chuàng)建折線

在SVG中可以使用polyline元素創(chuàng)建線條，polyline元素的points屬性依次記錄折線的起點、折點、終點的坐標，polyline元素的style屬性決定線條的顯示樣式。Stroke元素定義線條的顏色，stroke-width定義線寬。
< polyline points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />

創(chuàng)建多邊形

在SVG中可以使用polygon元素創(chuàng)建線條，polygon元素的points屬性依次記錄多邊形的起點、折點、終點的坐標，polygon元素的style屬性決定線條的顯示樣式。Stroke元素定義線條的顏色，stroke-width定義線寬。
< polygon points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />

定義路徑

在SVG中，可以使用path元素定義路徑.
<path d ="M5,5 C5,45 45,45 45,5" style="stroke:blue;stroke-width=5" />
path元素的d屬性代表數(shù)據(jù)聲明標簽，他的值就是路徑上的關(guān)鍵點的信息集合。在d屬性值中，M代表Moveto(移動到)，M5和5表示先將起點移動到（5,5）處，C 代表Curve（貝賽爾曲線控制），C5,45 45,45 45,5中的點（45,5）表示第2個點的位置，中間的兩點（5,45），（45,45）分別代表前一個點（5,5）和后一個點(45,5)之間的曲柄點的位置。

對象的調(diào)用

如果一個SVG對象需要被多次使用，可以首先對該對象進行聲明定義。使用defs元素，該定義中必須包括ID標志。當需要使用預(yù)定義好的對象時，必須使用use元素，并確定放置對象的位置，利用xlink屬性指定對象的ID標志，完成調(diào)用。
<defs>
<rect id="rect" width="20" height="15" style="fill:red" />
</defs>
<use x="10" y="10" xlink:href="#rect" />
<use x="25" y="25" xlink:href="#rect" />