If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
<html>
<body>
<svg></svg>
</body>
</html>
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome,
Opera, and Safari you can
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
发布评论
评论（7）
请参阅 svgweb 快速入门 和 svgweb 项目主页 适用于所有浏览器，包括 IE（需要 flash 插件）。
包含现有 svg 文件的方法有多种：
<See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).
There are many ways to include an existing svg file:
<img src="your.svg"/><object data="your.svg"/><iframe src="your.svg"/><embed src="your.svg"/><div style="background:url(your.svg)">...</div>如果您只想放置 SVG 图像（例如徽标或静态图），则只需小心为旧版本的 Internet Explorer（即版本 8 及更早版本）提供后备即可。
我发现的最好和最简单的方法是使用 .png 或 .jpg 作为后备，使用普通的 img 标签放置。然后，您可以将 img 标签包装在 object 标签中，并使用 data 属性来放置 SVG。
仅当浏览器不理解 SVG 时才会加载和使用 img 后备。
If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
The img fallback is only loaded and used if the browser doesn't understand SVG.
我建议将 svg 内联放入您的文档中（html5 技术）。只需打开您的 SVG 文件，复制 SVG 标签及其内部的所有内容，然后将其粘贴到您的 html 文档中。
它的优点是允许您使用 css 对其进行样式设置，例如更改填充颜色或对其应用滤镜（例如模糊）。另一个优点是，如果 svg 文件位于文档内部，您可以保存一个用于获取 svg 文件的 http 请求。
例如，如果您想使用 css 更改其位置，则必须将 css 放入样式属性中。外部 css 文件中的样式不会在大多数浏览器中应用，因为这是安全限制。例如：
除了IE8及以下版本以及android 2.3及以下浏览器之外的所有浏览器都支持该技术。
阅读内联 SVG 章节了解更多详细信息：
如果您不想将其内嵌在页面中，那么最好替代方案似乎是对象标签并避免使用嵌入标签。
阅读此内容以了解有关对象、嵌入和 img 标签的更多详细信息：
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.
Read the chapter inline SVG for further details:
If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.
Read this for further details about object vs embed vs img tag:
http://www.w3schools.com/svg/svg_inhtml.asp
最好的例子：
http://www.w3schools.com/svg/svg_inhtml.asp
The best example:
卡斯帕的做法是正确的。但是，我会将后备移至 CSS，因为您可能想将某些样式应用于 svg 文件本身...
CSS
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
CSS
我想同意“code-zoop”的答案。虽然这在技术上并不能回答您的问题，但它也可能是一个解决方案：直接在 HTML 中输入相关数据。可以直接作为 svg 元素，也可以使用 Raphaël-JS。
来自 w3c 学校：
（引用结束）
并且要跳出框框思考，根据您想要如何使用它，您还可以将 1 色图形放入 webfont 中。 （例如，参见 iconmoon.io ）
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
Raphaël — JavaScript 库。不错的 javascript 库，使用 svg，为您提供多种效果！
还支持大多数浏览器，包括 IE
Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!
Also supports most browsers, including IE