前面介紹了很多的基本元素，包括結構相關的組合和重用元素，這里先對SVG的文檔結構中剩下的相關元素簡單總結一下，然后繼續向前領略SVG的其他特性。
SVG文檔的元素基本可以分為以下幾類：
- 動畫元素：animate, animateColor, animateMotion, animateTransform, set；
- 解釋元素：desc, metadata, title；
- 圖形元素：circle, ellipse, line, path, polygon, polyline, rect；
- 結構元素：defs, g, svg, symbol, use；
- 漸變元素：linearGradient, radialGradient；
- 其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中圖形元素，漸變元素，文本，圖像元素和組合等都介紹過了，下面介紹另外幾個與結構相關的元素。
視窗 - svg元素
可以在svg元素中以任何順序放置任何的其他元素，包括嵌套svg元素。
svg元素支持的屬性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相關屬性。
svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。svg元素就不多說了，完整的屬性和事件列表參看后面的官方文檔。
解釋性元素 - desc元素與title元素
每個容器元素(可以包含其他容器元素或者圖形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和圖形元素都可以包含desc和title元素，這兩個元素都是輔助性的元素，用於解釋相關情境；它們的內容都是文本。當SVG文檔被渲染的時候，這2個元素不會被渲染到圖形中。這個2個元素之間差別不是太大，title在有些實現中是作為提示信息出現的，所以通常title是放到父元素的第一個位置上。
典型的用法如下：
version ="1.1" width ="4in" height ="3in" >
< g >
< title >Company sales by region </ title >
< desc >
This is a bar chart which shows
company sales by region.
</ desc >
<!-- Bar chart defined as vector data -->
</ g >
</ svg >
通常，最外層的svg元素要配以title說明，這樣程序可讀性更好。
標記 - marker元素
標記定義了附加到一個或者多個頂點(path,line,polyline或者polygon的頂點)上的圖形元素(箭頭和多點標記)。箭頭可以通過把一個標記附加到path,line或者polyline的起點或者終點上。多點標記可以把一個標記附加到path,line,polyline或者polygon的所有頂點上。
標記是由marker元素定義的，然后在path,line,polyline或者polygon中設置相關的屬性(marker,marker-start,marker-mid,和marker-end)就可以了。看個例子：
viewBox ="0 0 4000 2000" version ="1.1"
xmlns ="http://www.w3.org/2000/svg" >
< defs >
< marker id ="Triangle"
viewBox ="0 0 10 10" refX ="0" refY ="5"
markerUnits ="strokeWidth"
markerWidth ="4" markerHeight ="3"
orient ="auto" >
< path d ="M 0 0 L 10 5 L 0 10 z" />
</ marker >
</ defs >
< desc >Placing an arrowhead at the end of a path.
</ desc >
< path d ="M 1000 750 L 2000 750 L 2500 1250"
fill ="none" stroke ="black" stroke-width ="100"
marker-end ="url(#Triangle)" />
</ svg >
下面詳細看看marker的相關知識：
1. marker是容器元素，可以存放任意順序的圖形元素，容器元素，動畫，漸變元素等。
2. marker元素可以創建新的視窗：設置viewBox的值。
3. marker比較重要的屬性：
markerUnits = "strokeWidth | userSpaceOnUse"
這個屬性定義了屬性markerWidth,markerHeight和marker的內容使用的坐標系統。這個屬性有2個值可選，第一個值strokeWidth是默認值，代表屬性markerWidth,markerHeight和marker的內容使用的坐標系統的單位等於引用該marker的圖形元素的stroke-width設置的值。
例如上面的例子中，marker元素的width是400,height是300，不過千萬不要混淆了，mark元素中的path使用的坐標是viewBox設置的新的用戶坐標系。
該屬性另外一個取值userSpaceOnUse，代表屬性markerWidth,markerHeight和marker的內容使用引用該marker的圖形元素的坐標系統。
refX,refY：定義了引用的點與marker對齊的位置坐標。例如上面的例子中，引用的點是終點，要把它對齊到marker的(0,5)位置。注意refX,refY使用的是經過viewBox變換過的最終用戶坐標系。
markerWidth,markerHeight：marker視窗的寬和高，這個很好理解。
orient：定義了marker旋轉的角度。可以指定一個角度或者直接賦值auto。
auto代表x軸正方向按照下列規則旋轉：
a. 如果marker所在的點只屬於一個path，則marker的x軸正向與path走向相同。參看上面例子。
b. 如果marker所在的點屬於兩個不同的path，則marker的x軸正向與兩個path的夾角的角等分線走向一致。
4. 圖形元素的marker屬性
圖形元素要引用一個marker則需要使用相關的屬性，主要是這3個：marker-start(把引用的marker放到起點), marker-mid(把引用的marker放到除起點和終點外的所有點), marker-end(把引用的marker放到終點)。這3個屬性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(這個不用多說了)。
從上面的例子中也可以看到marker的用法。
腳本與樣式 - script元素與style元素
實際上，基本上所有的屬性(對於所有元素，不僅是文本)都可以用CSS與一個元素關聯，並且所有CSS屬性都在SVG圖像中可用。可以直接用樣式屬性設計元素的樣式，或者引用樣式表設計元素的樣式。對XML文件來說不應該解析樣式表(因為它們偶爾包含會引起問題的字符)，因此需要將它們置於XML CDATA節。腳本也是同樣的道理，需要放到XML CDATA節中。看下面的CSS例子：
< desc >Text </ desc > < defs >
< style type ="text/css" >
<![CDATA[
.abbreviation { text-decoration : underline ; }
]]>
</ style >
</ defs >
< g >
< text x ="20" y ="50" font-size ="30" >Colors can be specified </ text >
< text x ="20" y ="100" font-size ="30" >by their
< tspan fill ="rgb(255,0,0)" class ="abbreviation" >R </ tspan >
< tspan fill ="rgb(0,255,0)" class ="abbreviation" >G </ tspan >
< tspan fill ="rgb(0,0,255)" class ="abbreviation" >B </ tspan > values </ text >
< text x ="20" y ="150" font-size ="30" >or by keywords such as </ text >
< text x ="20" y ="200" >
< tspan style ="fill: lightsteelblue; font-size:30" >lightsteelblue </ tspan >,
</ text >
</ g >
</ svg >
再看腳本的例子：
< desc >Scripting the onclick event </ desc >
< defs >
< script type ="text/ecmascript" >
<! [CDATA[
function hideReveal(evt) {
var imageTarget = evt.target;
var theFill = imageTarget.getAttribute( " fill " );
if (theFill == ' white ' )
imageTarget.setAttribute( " fill " , " url(#notes) " );
else
imageTarget.setAttribute( " fill " , " white " );
}
]] >
</ script >
< pattern id ="notes" x ="0" y ="0" width ="50" height ="75"
patternTransform ="rotate(15)"
patternUnits ="userSpaceOnUse" >
< ellipse cx ="10" cy ="30" rx ="10" ry ="5" />
< line x1 ="20" y1 ="30" x2 ="20" y2 ="0"
stroke-width ="3" stroke ="black" />
< line x1 ="20" y1 ="0" x2 ="30" y2 ="5"
stroke-width ="3" stroke ="black" />
</ pattern >
</ defs >
< ellipse onclick ="hideReveal(evt)" cx ="175" cy ="100" rx ="125" ry ="60"
fill ="url(#notes)" stroke ="black" stroke-width ="5" />
</ svg >
條件處理 - switch元素
條件處理屬性是能控制所在元素渲染與否的屬性。基本上大多數的元素(特別是圖形元素)都可以指定條件處理屬性。條件處理屬性有3個：requiredFeatures, requiredExtensions和systemLanguage。這些屬性就是一組測試，都允許指定一個值列表(前面兩個屬性是空格隔開的，語言這個屬性是使用逗號隔開的)，默認值都為true。
SVG的switch元素提供了按指定條件渲染的能力。switch元素是一個容器元素，可以包含圖形元素，解釋性元素，動畫元素，a, foreignObject,g,image,svg,switch,text,use等元素。switch元素會按順序檢查直接子元素的條件處理屬性，然后渲染滿足自身條件的的第一個子元素，其他的子元素都會被忽略。這些屬性與display屬性一樣，只會影響直接使用這些屬性的元素的渲染，不會影響引用的元素(比如use引用的元素)。簡單的說，這3個屬性會影響a, altGlyph, foreignObject, textPath, tref, tspan ,animate, animateColor, animateMotion, animateTransform, set等元素，不會影響defs,cursor, mask, clipPath, pattern等元素(這些元素那么不是可渲染的，要么就是引用別的元素)。
注意：子元素的display和visibility屬性值並不影響switch元素條件判斷的結果。
條件處理屬性的取值列表參看官方文檔，這里就看一個小例子：
< rect requiredFeatures = "http://www.w3.org/TR/SVG11/feature#Filter "
x = "10 " y = "10 " width = "322 " height = "502 " opacity = "0.6 "
fill = "black " stroke = "none " filter = "url(#gblurshadow) " />
< rect x = "10 " y = "10 " width = "322 " height = "502 " opacity = "0.6 "
fill = "black " stroke = "none " />
</ switch >
這個例子的意思簡單的說就是：使用的瀏覽器支持filter特性，那么就繪制上面的矩形(帶filter屬性)，如果不支持filter特性，就繪制下面的矩形。
其實更多的時候，用的比較多的屬性是systemLanguage，就是文本的多語言處理能力。例如：
version ="1.1" width ="5cm" height ="5cm" >
< switch >
< text x ='10' y ='20' systemLanguage ="de" >de - HAHA </ text >
< text x ='10' y ='20' systemLanguage ="en" >en - haha </ text >
</ switch >
</ svg >
實用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/