如何在网页中使用.svg文件？
[英]How to use .svg files in a webpage?
问题描述
我想知道如何在网页中实际使用.svg文件？
7 个解决方案
解决方案1
46 2010-01-06 08:15:54
请参阅svgweb quickstart和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>
解决方案2
20 2012-10-30 04:09:32
如果您只想放置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后备。
解决方案3
5 2010-01-06 06:30:58
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/" />
解决方案4
3 2013-09-23 21:00:40
我建议将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一章以获取更多详细信息：
如果您不想将其内嵌到页面中，那么最好的选择似乎是对象标记并避免使用embed标记。
有关object vs embed vs img标签的更多详细信息，请阅读此内容：
解决方案5
2 2010-01-06 07:27:55
Raphaël-JavaScript库 。 使用svg的好javascript库，为您提供大量的效果！
还支持大多数浏览器，包括IE
解决方案6
2 2013-12-20 13:26:58
卡斯帕的方法是正确的。 但是，我会将后退移动到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);
}`
解决方案7
1 2013-03-06 06:52:14
我想同意“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）
使用 svg 文件作为谷歌驱动器站点中的图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.