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

Question

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

Answer 1

请参阅 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>

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 文件位于文档内部，您可以保存一个用于获取 svg 文件的 http 请求。

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

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

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

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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

还支持大多数浏览器，包括 IE

Answer 7

我同意“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 色图形放入 webfont 中。（例如，参见 iconmoon.io ）

Answer 8

Картинки。布尔值

{% for elem in person_page_odj %}
{% if elem.dev == True %}
<img src="{% static 'news/img/icon-yes.svg' %}"></img>
{% else %}
<img src="{% static 'news/img/icon-no.svg' %}"></img>
{% endif %}
{% endfor %}

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

问题描述投票：0回答：8

8个回答

最新问题

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

问题描述 投票：0回答：8

8个回答

最新问题

问题描述投票：0回答：8