SVG在html頁面中有兩種引用方式：
1. 內聯。就是直接將SVG圖形寫在html的svg標簽中，比如：
<html> <head></head> <body> <svg ...> > ... > 內聯式 </svg> > </body> </html>
2. 外部引用。就是以img標簽，embed標簽，object標簽或iframe標簽引用外部的svg文件，比如：
<html> <head></head> <body> <img src="sample.svg"> > <embed src="sample.svg"></embed> > 外部引用式 <iframe src="sample.svg"></iframe> > <object data="sample.svg"></object> > </body> </html>
對於以img標簽形式的外部引用，將不支持腳本訪問內部元素，仿佛真的就變成“img”了，因此僅適用於靜態使用場景，應用范圍比較有限。而其他幾種方式都支持腳本訪問。
那么問題來了，有這么多種引用方式，究竟哪種比較好呢？
經過這幾天對SVG的折騰，我發現：對於靜態使用場景，無所謂。對於動態使用場景，推薦內聯方式，外部引用方式有不少坑。
內聯方式可以滿足你的任何需求：
1. 可以直接使用Javascript進行DOM操作（注意，Jquery也可以哦，但有些方法沒有效果，因為SVG和HTML的DOM不同）
2. 可以直接使用CSS修飾
換句話說，用內聯方式引用的SVG就跟普通HTML標簽沒什么區別！
唯一的不爽嘛，就是SVG的代碼必須硬編碼進HTML頁面中，看着不爽，靈活性也差。
外部引用就比較悲劇了：
1. 無法直接使用Javascript進行DOM操作。
直接調用getElement系列方法得到的是引用的那個標簽而不是SVG內容，比如：
<object id="svg-sample" src="sample.svg"></object>
你用document.getElementById("svg-sample")得到的只是object那個標簽，而sample.svg的內容是沒有的。為了得到svg的內容，必須還得通過contentDocument屬性或getSVGDocument()方法。像這樣：
document.getElementById("svg-sample").contentDocument
或是
document.getElementById("svg-sample").getSVGDocument()
（getSVGDocument是個被廢棄的方法，不推薦使用）
但是要注意，上面這個方法只對XHTML類型的頁面有效，Content-Type得是application/xhtml+xml，否則對於text+html類型的頁面還是取不到SVG的內容。因此，在本地調試的時候，還要對服務器進行特殊配置，使其返回正確類型的頁面。好蛋疼。只有取到SVG的內容，才能夠繼續使用Javascript操縱內部元素。
可以參考StackOverflow上這個問題
2. 無法直接用CSS修飾
這個好解決，在SVG內部引入外部CSS即可。但我最開始被這個問題困擾了很久。。一直不知道原因。
SVG成為標准都10多年了，沒想到直到今天用起來還這么蛋疼。。