SVG基礎

時間 2019-11-17

標籤 svg 基礎简体版

原文原文鏈接

　　可縮放矢量圖形(Scalable Vector Graphics)是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。算法

什麼是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

SVG 的歷史和優點

在 2003 年一月，SVG 1.1 被確立爲 W3C 標準。編程

參與定義 SVG 的組織有：太陽微系統、Adobe、蘋果公司、IBM 以及柯達。瀏覽器

與其餘圖像格式相比，使用 SVG 的優點在於：網絡

SVG 可被很是多的工具讀取和修改（好比記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不降低的狀況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
SVG 能夠與 Java 技術一塊兒運行
SVG 是開放的標準
SVG 文件是純粹的 XML

SVG 的主要競爭者是 Flash。ide

與 Flash 相比，SVG 最大的優點是與其餘標準（好比 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。svg

背景：

圖片的數字化。將圖片存儲爲數據有兩種方案。其一爲位圖，也被稱爲光柵圖。便是以天然的光學的眼光將圖片當作在平面上密集排布的點的集合。每一個點發出的光有獨立的頻率和強度，反映在視覺上，就是顏色和亮度。這些信息有不一樣的編碼方案，在互聯網上最多見的就是RGB。根據須要，編碼後的信息能夠有不一樣的位(bit)數——位深。位數越高，顏色越清晰，對比度越高；佔用的空間也越大。另外一項決定位圖的精細度的是其中點的數量。一個位圖文件就是全部構成其的點的數據的集合，它的大小天然就等於點數乘以位深。位圖格式是一個龐大的家族，包括常見的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二種方案爲矢量圖。它用抽象的視角看待圖形，記錄其中展現的模式而不是各個點的原始數據。它將圖片當作各個「對象」的組合，用曲線記錄對象的輪廓，用某種顏色的模式描述對象內部的圖案（如用梯度描述漸變色）。好比一張留影，被當作各我的物和背景中各類景物的組合。這種更高級的視角，正是人類看世界時在乎識裏的反映。矢量圖格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

矢量圖中簡單的幾何圖形，只須要幾個特徵數值，就能夠肯定。好比三角形，只須要肯定三個頂點的座標。圓只須要肯定圓心的座標和半徑。描述它的函數已知的曲線也只須要幾個參數就可以肯定。如正弦曲線、各類螺線等等。若是用位圖記錄這些幾何圖案，則須要包含組成線條的各個像素的數據。除了大大節省空間，矢量圖還具備完美的伸縮性。由於記錄的是圖形的特徵，圖形的尺寸任意變化時，都只是作着類似變換，不會出現模糊和失真。相反位圖的圖片放大到超出原有大小時，各個像素點之間出現空缺，即便用某種算法填充，也會出現模糊鋸齒等現象，不如矢量圖精確。於是矢量圖很適合用於記錄諸如符號、圖標等簡單的圖形。而位圖則適合於沒有明顯規律的、顏色豐富細膩的圖片。

圖形格式

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。

W3C是做爲一個國際性的工業聯盟而建立的，目的是領導整個互聯網協做的發展和創新，以實現科技的進步和共同發展。因爲W3C聯盟關於SVG的開發工做組的成員都是一些知名廠商，如Adobe、蘋果、AutoDesk、BitFlash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微軟、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、Sun、ViSiO、施樂等，因此SVG不是一個私有格式，而是一個開放的標準。也就是說，它並非屬於任何個體的專利，而是一個經過協做、共同開發的工業標準。正是由於這點，才使得SVG可以獲得更迅速的開發和應用。

查看 SVG 文件

今天，全部瀏覽器均支持 SVG 文件，不過須要安裝插件的 Internet Explorer 除外。插件是免費的，好比 Adobe SVG Viewer。函數

SVG 使用 XML 編寫。工具

SVG 實例

下面的例子是一個簡單的 SVG 文件的例子。SVG 文件必須使用 .svg 後綴來保存：編碼

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

查看例子（僅用於支持 SVG 的瀏覽器）spa

（如需查看 SVG 源代碼，請打開此例，而後在窗口中右擊。選擇「查看源代碼」。）

代碼解釋：

第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是「獨立的」，或含有對外部文件的引用。

standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。

第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」。該 DTD 位於 W3C，含有全部容許的 SVG 元素。

SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。

SVG 的 <circle> 用來建立一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 座標。若是忽略這兩個屬性，那麼圓點會被設置爲 (0, 0)。r 屬性定義圓的半徑。

stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。咱們把圓的輪廓設置爲 2px 寬，黑邊框。

fill 屬性設置形狀內的顏色。咱們把填充顏色設置爲紅色。

關閉標籤的做用是關閉 SVG 元素和文檔自己。

註釋：全部的開啓標籤必須有關閉標籤！

HTML 頁面中的 SVG

SVG 文件可經過如下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。

使用 <embed> 標籤

註釋：當在 HTML 頁面中嵌入 SVG 時使用 <embed> 標籤是 Adobe SVG Viewer 推薦的方法！然而，若是須要建立合法的 XHTML，就不能使用 <embed>。任何 HTML 規範中都沒有 <embed> 標籤。

語法：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

註釋：pluginspage 屬性指向下載插件的 URL。

使用 <object> 標籤

註釋：假如您安裝了最新版本的 Adobe SVG Viewer，那麼當使用 <object> 標籤時 SVG 文件沒法工做（至少不能在 IE 中工做）！

語法：

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

註釋：codebase 屬性指向下載插件的 URL。

使用 <iframe> 標籤

語法：

<iframe src="rect.svg" width="300" height="100">
</iframe>

開發：

SVG是一個XML文件，用於XML編程的兩種模型DOM和SAX也適用於它。由於SVG是被設計用於互聯網，因此經過Javascript和DOM訪問它就是最重要的應用模式。經過Javascript和DOM能夠動態地修改HTML，一樣也能夠在瀏覽器中動態地建立、修改和刪除圖片。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。