如何在网页中使用.svg文件？

Question

我想知道如何在网页中实际使用.svg文件？

Answer 1

请参阅svgweb quickstart和svgweb项目主页,了解适用于所有浏览器的内容,包括IE(需要flash插件).

有许多方法可以包含现有的svg文件:

我最喜欢的不在这个列表中,只需在文本编辑器中打开你的svg并将其内容内联到你的html文档中,这将允许你对它应用过滤器并使用css为svg图像设置样式. (3认同)
@chrisweb也适用于`<object>`.请参阅http://css-tricks.com/using-svg/上的"将SVG用作<对象>". (2认同)

Answer 2

如果您只想放置SVG图像(如徽标或静态图),则只需要小心为旧版Internet Explorer(即版本8及更早版本)提供回退.

我发现的最好和最简单的方法是使用.png或.jpg作为后备,使用普通的img标记放置.然后将img标记包装在object标记中,使用data属性放置SVG.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

仅当浏览器不理解SVG时才加载和使用img后备.

Answer 3

我建议将 svg 内联到您的文档中（html5 技术）。只需打开您的 SVG 文件，复制 SVG 标签和其中的所有内容，然后将其粘贴到您的 html 文档中。

<html>
    <body>
        <svg></svg>
    </body>
</html>

它的优点是允许您使用 css 对其进行样式设置，例如更改填充颜色或对其应用过滤器，例如模糊。另一个优点是，如果它在您的文档内，您可以保存一个用于获取 svg 文件的 http 请求。

例如，如果您想使用 css 更改其位置，则必须将 css 放在样式属性中。大多数浏览器不会应用外部 css 文件中的样式，因为这是安全限制。例如：

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

除了 IE8 及以下的浏览器以及 android 2.3 及以下的浏览器外，所有浏览器都支持此技术。

阅读内联 SVG 一章以了解更多详细信息：

如果您不想将它内嵌在您的页面中，那么最好的选择似乎是 object 标签并避免使用 embed 标签。

阅读本文以了解有关 object 与 embed 与 img 标签的更多详细信息：

Answer 4

最好的例子:

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

请注意,code-zoop的解决方案(RaphaelJS)通过在IE上实际上根本不使用SVG来"删除插件依赖性".如果您正在寻找专门显示"svg文件",那可能无法帮助您.对于SVG +所有主流浏览器,IE用户都需要一个插件. (2认同)