隨著技術向前的推進，SVG相關的討論也越漸頻繁。為了緊跟時代的步伐，我也開始步入SVG相關技術的探索與學習之中。從這篇文章開始會在W3cplus站點上陸續向大家推出有關于SVG相關的教程、譯文或案例等。感興趣的同學可以跟隨著教程一起了解與學習SVG相關的知識與技巧。

什么是SVG

SVG是"Scalable Vector Graphics"的簡稱。中文可以理解成“可縮放矢量圖形”。這個概念對于設計師來講一點不陌生，但對于碼農來講，總是沒有設計師們理解的那么透徹。其實碼農們也沒必要理解的那么透徹，只需要知道他是web頁中的矢量圖即可。如果你是想知道，可以看看維基百科給的一個闡述：

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

百度百科是這樣對其描述的：

可縮放矢量圖形是基于可擴展標記語言(標準通用標記語言的子集)，用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。

其實記住幾個關鍵詞，SVG是可縮放矢量圖形，1999年由萬維網聯盟發布。于2013年成為W3C推薦標準。

SVG是指可伸縮矢量圖形

SVG用來定義用于網絡的基于矢量的圖形

SVG使用XML格式定義圖形

SVG圖像在放大或縮小(改變尺寸)的情況下，其圖形質量不會受受損失

SVG是W3C的一個標準

SVG有哪些優勢

SVG也是用來圖形化的東東，那么他與位圖相比有什么優勢呢？(隨著屏幕多樣化的出現，特別是Retina的出現以及愛瘋6和Plus，對于圖形在Web中的應用更具挑戰性。)先來看一張示例圖：

從圖中可以明顯看出，位圖與SVG圖PK出來的結果。

與其他圖像格式相比，使用SVG的優勢在于：

SVG可被非常多的工具讀取和修改(比如記事本)

SVG與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強。

SVG是可伸縮的

SVG圖像可在任何的分辨率下被高質量地打印

SVG可在圖像質量不下降的情況下被放大

SVG圖像中的文本是可選的，同時也是可搜索的(很適合制作地圖)

SVG可以與Java技術一起運行

SVG是開放的標準

SVG文件是純粹的XML

在Web瀏覽器中顯示SVG

SVG文件是純粹的XML，或許大家更為關心的是如何在Web瀏覽器中讓SVG顯示。要在瀏覽器中顯示(前提是瀏覽器支持)，可以通過幾種方法來實現：

指向SVG文件地址

將SVG直接嵌套在HTML中

而將SVG圖像嵌入到HTML文件有多種方法：

使用元素來嵌入SVG圖像

使用元素來嵌入SVG圖像

將SVG圖像作為背景圖像嵌入

直接使用元素

使用元素來嵌入SVG圖像

使用元素來嵌入SVG圖像

假設我們有一個girls.svg文件：

使用編輯器打開，可以看到一大串的代碼：

總結

以上是生活随笔為你收集整理的svg载入html,SVG系列教程：SVG简介与嵌入HTML页面的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。