繪製 svg 影象

要繪製向量 SVG 影象，操作與光柵影象沒有區別：
首先需要將 SVG 影象載入到 HTMLImage 元素中，然後使用 drawImage() 方法。

var image = new Image();
image.onload = function(){
    ctx.drawImage(this, 0,0);
}
image.src = "someFile.SVG";

SVG 影象與光柵影象相比具有一些優勢，因為無論你在畫布上繪製的尺度如何，都不會失去質量。但要注意，它也可能比繪製光柵影象慢一點。

但是，SVG 影象比光柵影象具有更多限制。

• 出於安全目的，不能從 HTMLImageElement（<img>）中引用的 SVG 影象載入外部內容
  。無外部樣式表，SVGImage（<image/>）元素中沒有引用外部影象，沒有外部過濾器或 xlink:href 屬性連結的元素（<use xlink:href="anImage.SVG#anElement"/>）或 funcIRI（url()）屬性方法等。
  另外，主文件中附加的樣式表一旦在 HTMLImage 元素中引用，就不會對 SVG 文件產生任何影響。
  最後，SVG Image 中不會執行任何指令碼。
  解決方法： 在引用 HTMLImage 元素之前，你需要在 SVG 中附加所有外部元素。 （對於影象或字型，你需要附加外部資源的 dataURI 版本）。

• 根元素（<svg>）必須將其 width 和 height 屬性設定為絕對值。
  如果你要使用相對長度（例如%），那麼瀏覽器將無法知道它的相對長度。有些瀏覽器（Blink）會嘗試進行猜測，但大多數瀏覽器會忽略你的影象並且不會在沒有警告的情況下繪製任何內容。

• 有些瀏覽器會在繪製 SVG 影象時汙染畫布 。
  具體來說，Internet Explorer 在任何情況下都是<Edge，而在 SVG 影象中存在 <foreignObject> 時則是 Safari 9。