SVG在html文件中

与canvas 的区别

1. canvas是属于位图，svg是矢量图（位图是有一个一个的像素组成，放大会失真）

总结

SVG在HTML文件中可以通过 <embed> object iframe 将.svg文件嵌入到文件中
也可以使用<svg></svg>标签在HTML 文件中绘制需要的图形

test.svg文件

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

使用<embed>标签

优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

用法

<embed src="./test.svg" type="image/svg+xml" />

使用<object>标签

优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。

用法

<object data="./test.svg" type="image/svg+xml"></object>

使用<iframe>标签

优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

用法

<iframe src="./test.svg"></iframe>

直接在HTML中使用

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>