SVG 教程

SVG 元素

SVG 图标 SVG 简单示例

SVG 在Web中显示

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过浏览器指向SVG文件的URL，将SVG嵌入HTML页面，使用iframe元素，使用img元素等方法

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过以下几种方式完成:

浏览器指向SVG文件的URL.
将SVG嵌入HTML页面

您可以通过以下几种方法将SVG图像嵌入HTML文件中:

使用iframe元素
使用img元素
使用SVG图像作为背景图像.
使用svg元素
使用嵌入元素

iframe框架

如果您输入SVG图片的URL，由于浏览器可以显示SVG图片，因此您也可以使用来在HTML页面iframe中包含SVG图片。这是一个示例:

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

img

img就像使用任何其他类型的图像一样，使用元素嵌入SVG图像也是如此。您可以在img元素的src属性中写入SVG图片的URL ，如下所示:

<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图像可以直接在HTML页面中嵌入SVG元素，如下所示:

<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元素的名称不同。

embed

在SVG的早期，您可以使用embed元素嵌入SVG图像。那时，并不是所有浏览器都支持SVG。今天，我建议使用img或svg元素。这里是一个实例嵌入元素的历史原因的实例:

<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图像的URL。

请注意pluginspage属性。这对于不能原生显示SVG的旧浏览器来说是必要的。这些浏览器需要Adobe的SVG浏览器插件来显示图像。在Internet Explorer 7和Firefox 3.0.5中，这个属性是不必要的，但包含它也无妨。

Width 和 Height属性

无论您是使用img、svg还是embed元素来嵌入svg图像，都可以使用width和height属性设置图像的宽度和高度。如果您在SVG文件中的图像比这些数字更宽或更高，那么将只显示SVG图像的一部分。确保您设置的宽度和高度足够大，以显示完整的SVG图像(或者您希望显示的宽度)。

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

可以使用CSS background-image属性将SVG图像用作HTML元素的背景图像。只需要像指向任何其他图像文件一样指向SVG图像文件。不是所有的浏览器都完全支持这一点，在您计划支持的浏览器中进行测试。下面是一个实例:

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

浏览器支持兼容性

Internet Explorer 9及以后版本可以本机显示SVG。在写本文时，Firefox、Chrome、Safari、Opera和Android浏览器已经能够原生地显示SVG有一段时间了。iOS版的Safari、Opera的迷你和移动浏览器，以及Android版的Chrome也都是如此。

Content Type

如果您指向浏览器的URL以.svg结尾，则浏览器将能够猜测SVG文件的mime类型。但是，当从servlet，JSP，PHP，ASP.NET页面或其他Web应用程序组件生成SVG时，URL结尾不一定总是.svg。
要使浏览器仍将文件解释为SVG文件，您必须设置响应的Content-Type HTTP标头

image/svg+xml

如果您查看前面的<embed>元素，您会注意到在type属性中也是这样做的。在<embed>元素中设置内容类型对于Internet Explorer已经足够了，但对于Firefox还不够。还必须在HTTP响应的内容类型中设置它。

此外，如果将浏览器直接指向服务器上的SVG文件，则没有<embed> 标签可为您执行此操作。然后，您将必须自己在HTTP响应中设置内容类型。
这是在JSP中完成的方法:

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

这与在servlet中执行非常相似。如果使用的是与Java不同的技术，只需搜索谷歌以获得如何在HTTP响应上设置内容类型的示例。会有很多实例。

SVG 图标 SVG 简单示例