-
SVG格式
鎖定
SVG是一種圖形文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基於XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來説應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用户可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過瀏覽器來觀看。
- 中文名
- SVG格式
- 外文名
- Scalable Vector Graphics
- 所屬學科
- 計算機
- 種 類
- 矢量圖格式
- 開發者
- W3C聯盟
- 擴展名
- .svg
SVG格式簡介
SVG是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形。SVG提供了3種類型的圖形對象：矢量圖形（vectorgraphicshape例如：由直線和曲線組成的路徑）、圖像(image)、文本(text)。圖形對象還可進行分組、添加樣式、變換、組合等操作，特徵集包括嵌套變換（nestedtransformations）、剪切路徑（clippingpaths）、alpha蒙板（alphamasks）、濾鏡效果（filtereffects）、模板對象（templateobjects）和其它擴展（extensibility）。
SVG圖形是可交互的和動態的，可以在SVG文件中嵌入動畫元素或通過腳本來定義動畫。
它具有現在網絡流行的PNG和JPEG格式無法具備的優勢：可以任意放大圖形顯示，但絕不會以犧牲圖像質量為代價；可在SVG圖像中保留可編輯和可搜尋的狀態；平均來講，SVG文件比JPEG和PNG格式的文件要小很多，因而下載也很快。可以相信，SVG的開發將會為Web提供新的圖像標準。
●SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
●SVG 用來定義用於網絡的基於矢量的圖形
●SVG 使用 XML 格式定義圖形
●SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
●SVG 是萬維網聯盟的標準
SVG格式優勢
在 2003 年一月，SVG 1.1 被確立為 W3C 標準。
與其他圖像格式相比，使用 SVG 的優勢在於：
●SVG 可被非常多的工具讀取和修改（比如記事本）
●SVG 是可伸縮的
●SVG 圖像可在任何的分辨率下被高質量地打印
●SVG 可在圖像質量不下降的情況下被放大
●SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
●SVG 可以與 JavaScript 技術一起運行
●SVG 是開放的標準
●SVG 文件是純粹的 XML
目前，不是所有的瀏覽器都支持 SVG，這也是 SVG 普及的最大障礙。Mozilla、Firefox 、Opera、Chrome以及微軟的 Internet Explorer和Microsoft Edge等主流瀏覽器都已經支持 SVG格式。
SVG編輯器的數量正在增長，Adobe GoLive 5 也支持 SVG。
SVG格式實例
下面的例子是一個簡單的 SVG 文件的例子。SVG 文件必須使用 .svg 後綴來保存：
SVG格式
代碼解釋
第一行包含了 XML 聲明。請注意 standalone 屬性,該屬性規定此 SVG 文件是否是“獨立的”，或含有對外部文件的引用。
standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏是 DTD 文件。
第二和第三行引用了這個外部的 SVG DTD。SVG 代碼以 元素開始，包括開啓標籤 和關閉標籤 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
SVG 的 用來創建一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標。如果忽略這兩個屬性，那麼圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。
fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。
關閉標籤的作用是關閉 SVG 元素和文檔本身。
SVG格式展現
對於ie9以下版本的ie瀏覽器，如果想在頁面中展現svg圖片，需要安裝adobe的SVGView插件。而對於支持html5的FireFox和Chrome瀏覽器，可以直接使用object標籤引入。
在chrome中引入的代碼如下：
data="/.../**.svg"
