66

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

4

7 回答 7

57

请参阅svgweb 快速入门和svgweb 项目主页，了解适用于所有浏览器（包括 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>
于 2010-01-06T08:15:54.653 回答
24

如果您只想放置一个 SVG 图像，例如徽标或静态图，您只需要小心为旧版本的 Internet Explorer（即版本 8 和更早版本）提供备用。

我发现的最好和最简单的方法是使用 .png 或 .jpg 作为您的后备，使用普通的 img 标签放置。然后将 img 标签包装在一个对象标签中，使用 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 后备。

于 2012-10-30T04:09:32.277 回答
7

我建议将 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章节了解更多细节：

如果您不想将其内联在您的页面中，那么最好的选择似乎是对象标签并避免使用嵌入标签。

阅读本文以获取有关对象、嵌入和 img 标签的更多详细信息：

于 2013-09-23T21:00:40.363 回答
6

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/" />
于 2010-01-06T06:30:58.187 回答
4

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);
}`
于 2013-12-20T13:26:58.287 回答
3

Raphaël—JavaScript 库。使用 svg 的漂亮 javascript 库，并为您提供多种效果！

也支持大部分浏览器，包括IE

于 2010-01-06T07:27:55.397 回答
2

我想同意“code-zoop”的回答。虽然这在技术上不能回答您的问题，但它也可能是一种解决方案：将相关数据直接输入 HTML。可以直接作为 svg 元素，也可以使用 Raphaël-JS。

来自 w3c 学校：

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>

（报价结束）

并且要跳出框框思考，具体取决于您要如何使用它，您还可以将 1-color 图形放在webfont中。（参见例如 iconmoon.io ）

于 2013-03-06T06:52:14.937 回答