初識SVG向量圖

十五樓亮哥發表於2015-01-30
SVG

一：什麼是SVG以及的特點

（1）SVG指可伸縮向量圖形(Scalable Vector Graphics)
（2）SVG 用來定義用於網路的基於向量的圖形
（3）SVG 使用 XML 格式定義圖形
（4）SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失


二：SVG之HelloWorld

像學習每一門語言一樣，我們來寫一個最簡單的SVG向量圖。輸出一個圓。

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

svg圖檔案的字尾名為.svg;將上面的程式碼另存為svg檔案，用瀏覽器開啟即可。
幾乎所有的瀏覽器都支援 SVG顯示，如果不能顯示，需要安裝外掛。比如 Adobe SVG Viewer。

看輸出效果：



我們來詳細看一下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 屬性設定形狀內的顏色。我們把填充顏色設定為紅色。


相關文章