Front End

Appearance

在Web浏览器中显示SVG ​

可以通过如下几个方法在Web浏览器（如Chrome，Firefox和IE）中显示SVG：

  • 直接在浏览器中打开SVG文件
  • 将SVG嵌入HTML页面

你也可以通过下面几个方法将SVG图片嵌套在HTML文件中：

  • 使用iframe元素
  • 使用img元素
  • 使用SVG图片作为背景图片
  • 使用svg元素
  • 使用embed元素

教程视频版 ​

如果你喜欢看视频版教程，我在此做了一个链接：

iframe ​

由于如果你输入SVG图像的URL，浏览器可以显示SVG图像，你也可以在HTML页面中使用iframe标签，引入SVG图像，示例代码如下：

html
<iframe src="mySvgImage.svg" width="200" height="200" >
<iframe src="mySvgImage.svg" width="200" height="200" >

img ​

可以像使用其他类型的图片一样，使用img元素嵌套SVG图片。可以将SVG图片的URL作为img元素的src属性：

html
<img src="/svg/circle-element-1.jsp">
<img src="/svg/circle-element-1.jsp">

SVG图片会像其他图片一样，在HTML页面中显示。

SVG作为背景图片 ​

由于浏览器会像处理位图一样处理SVG图像，所以你可以通过CSS来使用SVG图片作为背景图片：

css
div {
	background-image: url('my-svg-image.svg');
	background-size : 100px 100px;
}
div {
	background-image: url('my-svg-image.svg');
	background-size : 100px 100px;
}

可能需要为SVG图像设置背景大小，以告知浏览器如何缩放。你可以前往我写的关于背景图片的教程（CSS背景图片教程）了解更多。

HTML嵌套svg元素 ​

可以通过在HTML页面中嵌套svg元素来嵌套SVG图片：

html
<div>
<svg>
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
    </svg>
</div>
<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.js库非常适合。jQuery提供的API也可以实现。

在使用svg元素时，你也可以像使用其他HTML元素一样使用CSS为svg和它的子元素添加样式。需要注意的是，SVG元素的某些CSS属性有时会和HTML元素的属性名称不同。

embed ​

早些时候，你可以使用embed元素嵌套SVG图片。后来，不是所有的浏览器都支持，现如今，我会建议你使用img或svg元素。下面是一个embed元素的例子：

html
<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />
<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

将此元素放置在你希望SVG图像显示在HTML文件中的位置。src属性应该指向SVG图片的URL。

请注意pluginspage属性，这在不能显示SVG的旧版本的浏览器中是有必要的。这些浏览器需要Adobe的SVG查看器插件来显示图片。在IE7和Firefox3.0.5中，这个属性是不必要的，但是包含它也没什么影响。

宽度和高度 ​

不管你用来嵌套SVG图片的是img、svg或embed元素，你都可以使用width和height属性设置图片的高度和宽度。如果SVG文件里的图片比设置的宽度更宽，比设置的高度更高，SVG图片只会显示一部分。确保设置足够的宽度和高度来显示完整的SVG图片（或你喜欢显示的大小）。

使用SVG作为HTML元素的背景图片 ​

你也可以使用CSS的background-image属性为HTML元素设置SVG背景图片。可以像其它图片文件一样，指向SVG图片文件。不是所有的浏览器都支持，可以在你想要支持的浏览器里测试下面的代码：

css
.myCSSClass {
	background: url(/mySvgImage.svg);
}
.myCSSClass {
	background: url(/mySvgImage.svg);
}

浏览器支持 ​

IE9及以后的版本能显示SVG。在写作这本书时，Firefox、Chrome、Safari、Opera和Android浏览器也已经能够显示SVG。iOS版的Safari，Opera的mini和移动浏览器已经Android版的Chrome也都支持。

Content Type ​

如果你浏览器指向的URL以.svg结尾，浏览器会猜测SVG文件的MIME类型。但是，从servlets，JSP，PHP，ASP.NET页面或其它Web应用程序组件生成SVG时，URL结尾可能不总是.svg。

要使浏览器仍然将文件解释为SVG文件，你必须将HTTP响应头中Content-Type设置为image/svg+xml。

如果你看之前的<embed>元素，你会发现我们设置了type属性。设置<embed>元素的Content-Type对于IE是足够了，但是不针对Firefox。你也必须在HTTP响应中设置响应头的Content-Type字段。

此外，如果你将浏览器直接链接到服务器上的SVG文件，没有<embed>标签让你设置。所以你不得不设置HTTP响应头中的Content-Type。

下面是一个JSP的例子：

html
<% response.setContentType("image/svg+xml");
%><svg ... >
<% response.setContentType("image/svg+xml");
%><svg ... >

这种做法和servlets中做法类似。如果你使用除Java之外的一个不同的技术，只需要Google搜索设置HTTP响应的Content-Type的例子。将会有很多这样的例子。