1. 首页
  2. 问答
  3. 如何在网页中使用.svg文件？

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

2010-01-06 18 views

回答

5

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-06 06:30:58

+0

会其实这显示在任何SVG图像浏览器吗？ 谢谢？ – Parastar 2010-01-06 06:35:02

+0

它应该显示在所有主流浏览器上。 – 2010-01-06 06:52:01

+1

谢谢， 但什么是'pluginspage'的全部？ 跟不上那个？ – Parastar 2010-01-06 07:03:13

2

Raphaël—JavaScript Library。很好的JavaScript库，使用SVG，并给你一个大范围的影响！

而且支持大多数的浏览器，包括IE

来源

2010-01-06 07:27:55

40

见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>

来源

2010-01-06 08:15:54

+3

我的最爱不在此列表中，只需在文本编辑器中打开您的svg并将其内容内联到您的html文档中，这将允许您应用过滤器并使用css设置svg图像的样式。 – chrisweb 2013-09-23 21:02:59

+2

@chrisweb也可以使用''。请参阅http://css-tricks.com/using-svg/上的“使用SVG作为”。 – 2014-07-05 19:10:07

+0

@chrisweb这是如何处理背景图片？ – 2016-02-27 15:50:22

17

如果您只想放置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>

img后退仅在浏览器不理解SVG时才加载和使用。

来源

2012-10-30 04:09:32 Caspar

+0

或者将后备代码移入CSS本身 – Jerome 2013-12-20 13:22:57

1

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

从W3C标准的学校：

SVG是所有支载于在Firefox，Internet Explorer 9中，谷歌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）

来源

2013-03-06 06:52:14 Ideogram

2

我建议将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：

，如果你不想把它内嵌在您的网页，则最好的选择似乎是对象标记并避免使用嵌入标记。

阅读本有关对象VS嵌入VS img标签的详细信息：

来源

2013-09-23 21:00:40 chrisweb

+0

您知道一种将此自动化的方法吗？而不是从SVG文件复制并粘贴到您的HTML，是否有一个咕噜插件或可以注入到您的网页？ – 2014-04-07 15:23:57

+0

不知道从未听说过这样的插件，但也许它存在 – chrisweb 2014-04-19 17:28:10

2

卡斯帕的做法是正确的。不过，我会回退移动到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-20 13:26:58 Jerome

相关问题

 相关问题