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

Question

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

imageimage-manipulationsvgadobe-illustrator

70

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

- Parastar

7个回答

25

如果你只是想放置一个SVG的图片例如标志或静态图，你需要注意为旧版本的Internet Explorer（即8及更早版本）提供备选方案。

我发现最好和最简单的方法是使用.png或.jpg作为备选方案，使用普通的img标签进行放置。然后，您可以将img标签包装在一个object标记中，使用数据属性来放置SVG。

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

只有在浏览器不支持SVG时，才会加载和使用img备选方案。

- Caspar

或者将备用方案移入CSS本身。 - Jerome

10

我建议将svg直接嵌入到你的文档中（html5技术）。只需打开SVG文件，复制SVG标签及其内部的全部内容，然后粘贴到你的HTML文档中。

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

它的优点在于，这样您就可以使用CSS对其进行样式设置，例如更改填充颜色或应用滤镜，如模糊。另一个优点是，如果SVG文件位于文档内部，则可以节省一个HTTP请求。

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

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

这种技术在除IE8及以下版本和Android 2.3浏览器及以下版本以外的所有浏览器中都得到支持。

请参阅内联SVG章节以获取更多详细信息：

如果您不想将其内嵌在页面中，则最好的替代方法似乎是使用对象标签，避免使用嵌入标签。

请参阅有关对象与嵌入与图像标签的详细信息：

如何将可缩放矢量图形添加到您的网页中

- chrisweb

你知道有什么自动化的方法吗？而不是从SVG文件复制并粘贴到HTML中，是否有grunt插件或其他东西可以将其注入到您的页面中？ - Darryl Snow

不好意思，我从未听说过这样的插件，但也许它存在。 - chrisweb

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/" />

- Brian McKenna

这会在任何浏览器上显示SVG图像吗？谢谢！ - Parastar

1

谢谢，但是'pluginspage'是什么意思？我不太理解这个。 - Parastar

pluginspage属性告诉浏览器如果不能本地显示SVG文件（例如Internet Explorer），从哪里获取插件。 - Brian McKenna

如果用户没有下载插件，那么图像将不可见。 - Parastar

它将对Firefox、Chrome和Safari用户可见，但Internet Explorer用户需要安装插件。如果这是一个问题，那么code-zoop的解决方案会进行一些花哨的工作来消除插件依赖性。 - Brian McKenna

2

请注意，code-zoop的解决方案（RaphaelJS）通过在IE上根本不使用SVG来“消除插件依赖性”。如果您特别想显示“svg文件”，那可能对您没有帮助。对于SVG +所有主要浏览器，IE用户将需要一个插件。 - Ken

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);
}`

- Jerome

3

Raphaël- JavaScript库。这是一个使用 SVG 的好用的 JavaScript 库，能够提供各种特效。

同时支持大多数浏览器，包括 IE。

- code-zoop

那个 JS 库的 URL 坏了，顺便说一下。 - Junaid Atari

我在8年前添加了答案。但是，嘿，这里有GitHub存储库的链接https://github.com/DmitryBaranovskiy/raphael - code-zoop

2

我同意“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)

- Ideogram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Dahlström · Accepted Answer

请查看svgweb快速入门和svgweb项目主页，其中包括适用于所有浏览器（包括需要flash插件的IE）的解决方案。

有多种方法可以包含现有的SVG文件：

<img src="your.svg"/> （图像方式）
<object data="your.svg"/> （对象方式）
<iframe src="your.svg"/> （框架方式）
<embed src="your.svg"/> （嵌入方式）
<div style="background:url(your.svg)">...</div> （背景方式）