在Web浏览器中显示SVG
在Web浏览器(例如Chrome，Firefox和Internet Explorer)中显示SVG可以通过以下几种方式完成：
- 将浏览器指向SVG文件的URL。
- 将SVG嵌入HTML页面中
我们可以通过以下几种方法将SVG图像嵌入HTML文件中：
- 使用iframe元素
- 使用img元素
- 使用SVG图像作为背景图像。
- 使用svg元素
- 使用嵌入元素
iframe
由于如果我们输入SVG图片的URL，浏览器便可以显示SVG图片，因此我们也可以使用" iframe"在HTML页面中包含SVG图片。这是一个例子：
<iframe src="mySvgImage.svg" width="200" height="200" >
img
就像使用任何其他类型的图像一样，使用img元素嵌入SVG图像也是如此。我们可以在img元素的src属性中写入SVG图片的网址，如下所示：
<img src="/svg/circle-element-1.jsp">
然后，SVG图像会像其他任何图像一样显示在HTML页面中。
SVG作为背景图像
由于浏览器将SVG图像与位图图像一样对待，因此我们可以通过CSS将SVG图像用作背景图像。这是一个例子：
div {
background-image: url('my-svg-image.svg');
background-size : 100px 100px;
}
可能需要为SVG图像设置背景大小，以告诉浏览器如何缩放它。我们可以在我的CSS背景图像教程中阅读有关背景图像的更多信息。
HTML内的svg元素
使用svg元素嵌入SVG图像可以通过将svg元素直接嵌入HTML页面来完成，如下所示：
<div>
<svg>
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
</div>
div元素只是在这里说明svg元素可以直接嵌入HTML中。不过，svg元素不必嵌入在div元素中。
使用SVG元素，我们可以将SVG直接嵌入HTML页面中，而不是将SVG图像放置在其自己的文件中。我们可以通过在svg元素中添加width和height属性来设置SVG图像的宽度和高度。
使用svg元素，我们还可以使用JavaScript在浏览器中直接生成SVG。 D3 JavaScript API非常擅长于此。 jQuery JavaScript API也可以做到这一点。
使用svg元素，我们还可以使用CSS设置svg及其子元素的样式，就像使用任何其他HTML一样。请注意，SVG元素的某些CSS属性有时与HTML元素具有不同的名称。
嵌入
在SVG的早期，我们可以使用" embed"元素嵌入SVG图像。那时并不是所有的浏览器都对SVG具有本机支持。今天，我建议改为使用img或者svg元素。不过，出于历史原因，这是一个" embed"元素示例：
<embed src="/svg/simple-example-1.jsp"
width="300" height="220"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
将此元素放在要在HTML文件中显示SVG图像的位置。 src属性应指向SVG图片的网址。
注意" pluginspage"属性。在无法自然显示SVG的旧版浏览器中，这是必需的。这些浏览器需要Adobe的SVG Viewer插件来显示图像。在Internet Explorer 7和Firefox 3.0.5中，此属性不是必需的，但包括它也没有什么坏处。
宽度和高度
无论我们使用img，svg还是嵌入元素嵌入SVG图像，都可以使用width和height属性设置图像的宽度和高度。如果SVG文件中的图像比这些数字宽或者高，则仅显示SVG图像的一部分。确保将宽度和高度设置得足够大，以显示完整的SVG图像(或者显示的图像数量)。
使用SVG作为HTML元素的背景图像
我们可以使用CSSbackground-image属性将SVG图片用作HTML元素的背景图片。就像指向其他任何图像文件一样，只需指向SVG图像文件即可。并非所有浏览器都可能完全支持此函数，以便在计划支持的浏览器中对其进行测试。这是一个例子：
.myCSSClass {
background: url(/mySvgImage.svg);
}
浏览器支持
Internet Explorer 9和更高版本可以本地显示SVG。在撰写本文时，Firefox，Chrome，Safari，Opera和Android浏览器已经能够在一段时间内本地显示SVG。 iOS的Safari，Opera的微型和移动浏览器以及Android的Chrome也是如此。
内容类型
如果我们指向浏览器的URL以.svg结尾，则浏览器将能够猜测SVG文件的mime类型。但是，当从servlet，JSP，PHP，ASP.NET页面或者其他Web应用程序组件生成SVG时，URL结尾不一定总是.svg。
要使浏览器仍将文件解释为SVG文件，必须将响应的Content-Type HTTP标头设置为
image/svg+xml
如果我们较早看一下<embed>元素，我们会注意到在type属性中也是如此。在Internet Explorer中，在<embed>元素中设置内容类型就足够了，但对于Firefox而言，就足够了。我们还必须在HTTP响应的内容类型中进行设置。
另外，如果将浏览器直接指向服务器上的SVG文件，则没有 <embed>标签可以为我们完成此操作。然后，我们将必须自己在HTTP响应中设置内容类型。
这是在JSP中完成的方法：
<% response.setContentType("image/svg+xml");
%><svg ... >
这与在servlet中的完成方式非常相似。如果我们使用的技术与Java不同，请在Google上搜索有关如何在HTTP响应中设置内容类型的示例。
