SVG 教程

SVG 元素

SVG 圖標(biāo)SVG 簡單示例

SVG 在Web中顯示

在Web瀏覽器（例如Chrome，F(xiàn)irefox和Internet Explorer）中顯示SVG可以通過瀏覽器指向SVG文件的URL，將SVG嵌入HTML頁面，使用iframe元素，使用img元素等方法

在Web瀏覽器（例如Chrome，F(xiàn)irefox和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圖像設(shè)置背景大小，以告訴瀏覽器如何縮放它。你可以在我的CSS背景圖像教程中了解更多背景圖像。

HTML內(nèi)的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高度屬性來設(shè)置SVG圖像的寬度和高度。

通過使用svg元素，還可以在瀏覽器中使用JavaScript直接生成svg。D3 JavaScript API非常擅長于此。jQuery JavaScript API也可以做到這一點。

使用svg元素，您還可以使用CSS對svg及其子元素進行樣式設(shè)置，就像您對任何其他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屬性應(yīng)該指向SVG圖像的URL。

請注意pluginspage屬性。這對于不能原生顯示SVG的舊瀏覽器來說是必要的。這些瀏覽器需要Adobe的SVG瀏覽器插件來顯示圖像。在Internet Explorer 7和Firefox 3.0.5中，這個屬性是不必要的，但包含它也無妨。

Width 和 Height屬性

無論您是使用img、svg還是embed元素來嵌入svg圖像，都可以使用width和height屬性設(shè)置圖像的寬度和高度。如果您在SVG文件中的圖像比這些數(shù)字更寬或更高，那么將只顯示SVG圖像的一部分。確保您設(shè)置的寬度和高度足夠大，以顯示完整的SVG圖像(或者您希望顯示的寬度)。

使用SVG作為HTML元素的背景圖像

可以使用CSS background-image屬性將SVG圖像用作HTML元素的背景圖像。只需要像指向任何其他圖像文件一樣指向SVG圖像文件。不是所有的瀏覽器都完全支持這一點，在您計劃支持的瀏覽器中進行測試。下面是一個實例:

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

瀏覽器支持兼容性

Internet Explorer 9及以后版本可以本機顯示SVG。在寫本文時，F(xiàn)irefox、Chrome、Safari、Opera和Android瀏覽器已經(jīng)能夠原生地顯示SVG有一段時間了。iOS版的Safari、Opera的迷你和移動瀏覽器，以及Android版的Chrome也都是如此。

Content Type

如果您指向瀏覽器的URL以.svg結(jié)尾，則瀏覽器將能夠猜測SVG文件的mime類型。但是，當(dāng)從servlet，JSP，PHP，ASP.NET頁面或其他Web應(yīng)用程序組件生成SVG時，URL結(jié)尾不一定總是.svg。
要使瀏覽器仍將文件解釋為SVG文件，您必須設(shè)置響應(yīng)的Content-Type HTTP標(biāo)頭

image/svg+xml

如果您查看前面的<embed>元素，您會注意到在type屬性中也是這樣做的。在<embed>元素中設(shè)置內(nèi)容類型對于Internet Explorer已經(jīng)足夠了，但對于Firefox還不夠。還必須在HTTP響應(yīng)的內(nèi)容類型中設(shè)置它。

此外，如果將瀏覽器直接指向服務(wù)器上的SVG文件，則沒有<embed> 標(biāo)簽可為您執(zhí)行此操作。然后，您將必須自己在HTTP響應(yīng)中設(shè)置內(nèi)容類型。
這是在JSP中完成的方法:

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

這與在servlet中執(zhí)行非常相似。如果使用的是與Java不同的技術(shù)，只需搜索谷歌以獲得如何在HTTP響應(yīng)上設(shè)置內(nèi)容類型的示例。會有很多實例。

SVG 圖標(biāo)SVG 簡單示例