SVG 嵌入 HTML页面的几种方式

SVG 嵌入 HTML页面的几种方式
SVG目前嵌入HTML页面中有下面几种方式

OBJECT


< object data = " rect.svg " width = " 300 " height = " 100 "
type = " image/svg+xml "
codebase = " http://www.adobe.com/svg/viewer/install/ " />
采用Object标签的一个好处是，这是一个标准的Html 4及以上规范的有效Tag,但可惜的如果你用的是最新的Adobe Viewer，那么反而是显示不出图象来：）

EMBED

< embed src ="rect.svg" width ="300" height ="100"
type ="image/svg+xml"
pluginspage ="http://www.adobe.com/svg/viewer/install/" />
这是推荐的一种写法，在ie与ff中，皆可工作，也可通过script使HTML与SVG相互通信，但不幸的是，embed不是一个规范的标签，所以不能直接用在严格的XHTML中，不过这个可以能过一个简单的trick来解决，改动一下DTD定义即可。

IFRAME

< iframe src ="rect.svg" width ="300" height ="100" >
</ iframe >
这个方式没什么好说的，完全OK，就是iframe的边框需要额外设置一下。


当然最希望看到的就是类似于下面的代码能早点在主流Browser中支持

< html
xmlns:svg ="http://www.w3.org/2000/svg" >
< body >< p > This is an HTML paragraph </ p >< svg:svg width ="300" height ="100" version ="1.1" >
< svg:circle cx ="100" cy ="50" r ="40" stroke ="black"
stroke-width ="2" fill ="red" />
</ svg:svg ></ body >
</ html >
目前还不行，呵呵。