在HTML网站中嵌入SVG / SVGZ矢量图形的最简单方法(适用于所有主要的2016浏览器)

时间:2011-02-11 02:49:25

标签: svg vector graphics embed svgz

在网站中嵌入矢量SVG或拼写SVGZ插图的最简单方法是什么?
必须在2016版本的Firefox,Chrome,Opera和Safari以及Internet Explorer下正常工作。

4 个答案:

答案 0 :(得分:8)

这会对你有帮助......

<embed src="svg.svgz" width="200px" height="200px" type="image/svg+xml" /> 

答案 1 :(得分:5)

IE8不支持任何方式的SVG(没有额外的库,如SVGWeb),因此无论你的标记是什么,你都不会让它工作。

虽然你描述的方法运行良好,但我个人更喜欢在XHTML中包含我的SVG内联,因为它允许我将HTML和SVG的CSS样式混合在一起,并提供完整的JavaScript混合。我在这里有一个例子:http://phrogz.net/svg/3-point-circle.xhtml

请务必从您的网络服务器上将.xhtml文件作为Content-Type:application/xhtml+xml投放。

答案 2 :(得分:3)

您可以将SVG转换为Raphael.is 这将使它在IE6及更高版本以及Webkit浏览器中运行。 只需查看此图片,当您完成单击链接以进入页面和SVGTOHTML工具时。 不确定SVGZ,但这些文件非常紧凑,适用于SVG for Webkit和在专有IE中称为VML的痛苦。

http://www.irunmywebsite.com/raphael/teacup.php 在iPod上拼写拼写的道歉!

答案 3 :(得分:2)

您可以使用svgweb,这是一个创建与浏览器兼容的SVG嵌入的工具包。对于IE,它会自动创建一个Flash文件。

http://code.google.com/p/svgweb/