绘制 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。