【发布时间】：2011-01-01 22:46:22
【问题描述】：
我想知道如何在网页中实际使用 .svg 文件？
【问题讨论】：
标签： image image-manipulation svg adobe-illustrator
【发布时间】：2011-01-01 22:46:22
【问题描述】：
请参阅 svgweb quickstart 和 svgweb project homepage 了解适用于所有浏览器（包括 IE）的内容（需要 Flash 插件）。
有很多方法可以包含现有的 svg 文件：
<img src="your.svg"/><object data="your.svg"/><iframe src="your.svg"/><embed src="your.svg"/><div style="background:url(your.svg)">...</div>
【讨论】：
-
我最喜欢的不在此列表中，只需在文本编辑器中打开您的 svg 并将其内容内联到您的 html 文档中，这将允许您对其应用过滤器并使用 css 设置 svg 图像的样式.
-
@chrisweb 这也适用于
<object>。请参阅css-tricks.com/using-svg 处的“将 SVG 用作 -
@chrisweb 如何处理背景图片？
-
请记住，如果您不直接将其包含在您的内容文档中（如 crisweb 建议的那样），您的 svg 可能与 FOUC 类似，使其看起来每次切换时都会重新加载页面。对标题徽标等很重要。
-
这些方法是否也支持更改 svg 图标填充颜色属性？
如果您只想放置 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 后备。
【讨论】：
-
或者将后备移动到 CSS 本身
我建议将 svg 内嵌到您的文档中（html5 技术）。只需打开您的 SVG 文件，复制 SVG 标记和其中的所有内容，然后将其粘贴到您的 html 文档中。
<html>
<body>
<svg></svg>
</body>
</html>
它的优点是允许您使用 css 对其进行样式设置，例如更改填充颜色或对其应用模糊等过滤器。另一个优点是，如果 svg 文件位于文档内部，您可以保存一个用于获取 svg 文件的 http 请求。
例如，如果您想使用 css 更改其位置，则必须将 css 放在样式属性中。外部 css 文件中的样式不会在大多数浏览器中应用，因为这是一个安全限制。例如：
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
除IE8及以下所有浏览器以及android 2.3及以下浏览器均支持此技术。
阅读inline SVG章节了解更多细节：
如果您不想将其内嵌在您的页面中，那么最好的选择似乎是 object 标签，并避免使用 embed 标签。
阅读此文章以了解有关 object vs embed vs img 标签的更多详细信息：
【讨论】：
-
你知道自动化的方法吗？与其从 SVG 文件复制并粘贴到您的 HTML 中，是否有一个 grunt 插件或可以将其注入您的页面的东西？
-
不，抱歉从未听说过这样的插件，但也许它存在
http://www.w3schools.com/svg/svg_inhtml.asp
最好的例子：
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
【讨论】：
-
这实际上会在任何浏览器上显示 svg 图像吗？谢谢？
-
谢谢，但是'pluginspage'到底是什么？赶不上那个？
-
pluginspage 告诉浏览器在无法原生显示 SVG 文件（例如 Internet Explorer）时从哪里获取插件。
-
如果用户不下载插件，图像将不可见？
-
请注意，code-zoop 的解决方案 (RaphaelJS) 通过在 IE 上根本不使用 SVG 来“移除插件依赖”。如果您正在寻找专门显示“svg 文件”，那可能对您没有帮助。对于 SVG + 所有主流浏览器，IE 用户都需要一个插件。
Caspar 的方法是正确的。但是，我会将后备方案移至 CSS，因为您可能希望将一些样式应用于 svg 文件本身...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
【讨论】：
Raphaël—JavaScript Library。使用 svg 的漂亮 javascript 库，并为您提供多种效果！
也支持大部分浏览器，包括IE
【讨论】：
-
那个 JS 库 url 被破坏了 btw
-
我在 8 年前添加了答案。但是，嘿，这里有 github 存储库的链接 github.com/DmitryBaranovskiy/raphael
我同意“code-zoop”的回答。虽然这在技术上不能回答您的问题，但它也可能是一种解决方案：将相关数据直接输入 HTML。可以直接作为 svg 元素，也可以使用 Raphaël-JS。
来自 w3c-schools：
SVG 在 Firefox、Internet Explorer 9、Google Chrome、 Opera 和 Safari 都可以
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
（引用结束）
而且要跳出框框思考，根据您想要如何使用它，您还可以将您的单色图形放在 webfont 中。 （参见例如 iconmoon.io ）
【讨论】：