SVG 意爲可縮放矢量圖形（Scalable Vector Graphics）。
SVG 使用 XML 格式定義圖像。
::::::::::::::::::::::::::::::::::::::
http:/ /ww w.iis7.co m/b/ssyqdq/
SVG 簡介
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
。。。。。。
什麼是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
。。。。。。
SVG 是 W3C 推薦標準
SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準。
。。。。。。
SVG 的歷史和優勢
在 2003 年一月，SVG 1.1 被確立爲 W3C 標準。
參與定義 SVG 的組織有：Sun公司（已被Oracle公司收購）、Adobe、蘋果公司、IBM 以及柯達。
與其他圖像格式相比，使用 SVG 的優勢在於：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash。
與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。
。。。。。。
查看 SVG 文件
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。
。。。。。。
創建SVG文件
由於SVG是XML文件，SVG圖像可以用任何文本編輯器創建，但它往往是與一個繪圖程序一起使用，如Inkscape，更方便地創建SVG圖像。
::::::::::::::::::::::::::::::::::::::
SVG 實例
簡單的 SVG 實例
一個簡單的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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
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 元素和文檔本身。
註釋：所有的開啓標籤必須有關閉標籤！
:::::::::::::::::::::::::::::::::::::::::
SVG 在 HTML 頁面
SVG 文件可通過以下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。
SVG的代碼可以直接嵌入到HTML頁面中，或您可以直接鏈接到SVG文件。
。。。。。。
使用 <embed> 標籤
<embed>:
優勢：所有主要瀏覽器都支持，並允許使用腳本
缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法: <embed src="circle1.svg" type="image/svg+xml" />
。。。。。。
使用 <object> 標籤
<object>:
優勢：所有主要瀏覽器都支持，並支持HTML4，XHTML和HTML5標準
缺點：不允許使用腳本。
語法 :<object data="circle1.svg" type="image/svg+xml"></object>
。。。。。。
使用 <iframe> 標籤
<iframe>:
優勢：所有主要瀏覽器都支持，並允許使用腳本
缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法: <iframe src="circle1.svg"></iframe>
。。。。。。
直接在HTML嵌入SVG代碼
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代碼。
。。。。。。
鏈接到SVG文件
您還可以用<a>標籤鏈接到一個SVG文件：鏈接到SVG文件
您還可以用<a>標籤鏈接到一個SVG文件：<a href="circle1.svg"></a>
:::::::::::::::::::::::::::::::::::::::::::
SVG Shapes(形狀)
SVG有一些預定義的形狀元素，可被開發者使用和操作：
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
:::::::::::::::::::::::::::::::::::::::::
SVG 矩形 - <rect>
<rect> 標籤可用來創建矩形，以及矩形的變種
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度（合法的範圍是：0 - 1）
rx 和 ry 屬性可使矩形產生圓角。
:::::::::::::::::::::::::::::::::::::::::::::::
SVG 圓形 - <circle>
<circle> 標籤可用來創建一個圓
cx和cy屬性定義圓點的x和y座標。如果省略cx和cy，圓的中心會被設置爲(0, 0)
r屬性定義圓的半徑
::::::::::::::::::::::::::::::::::::::::::::::
SVG <ellipse>
SVG 橢圓 - <ellipse>
<ellipse> 元素是用來創建一個橢圓：
橢圓與圓很相似。不同之處在於橢圓有不同的x和y半徑，而圓的x和y半徑是相同的
CX屬性定義的橢圓中心的x座標
CY屬性定義的橢圓中心的y座標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑
::::::::::::::::::::::::::::::::::::::::::::::
SVG 直線 - <line>
<line> 元素是用來創建一個直線
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束
:::::::::::::::::::::::::::::::::::::::::::::
SVG 多邊形 - <polygon>
<polygon> 標籤用來創建含有不少於三個邊的圖形。
多邊形是由直線組成，其形狀是"封閉"的（所有的線條 連接起來）。
polygon來自希臘。 "Poly" 意味 "many" ， "gon" 意味 "angle".
points 屬性定義多邊形每個角的 x 和 y 座標
:::::::::::::::::::::::::::::::::::::::::::::
SVG 曲線 - <polyline>
<polyline> 元素是用於創建任何只有直線的形狀
::::::::::::::::::::::::::::::::::::::::::::::
SVG 路徑 - <path>
<path> 元素用於定義一個路徑。
下面的命令可用於路徑數據：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
::::::::::::::::::::::::::::::::::::::::::::::::
SVG 文本 - <text>
<text> 元素用於定義文本。
:::::::::::::::::::::::::::::::::::::::::::::::
SVG Stroke 屬性
SVG提供了一個範圍廣泛stroke 屬性。下面：
stroke
stroke-width
stroke-linecap
stroke-dasharray
所有stroke屬性，可應用於任何種類的線條，文字和元素就像一個圓的輪廓。
。。。。。。
SVG stroke 屬性
Stroke屬性定義一條線，文本或元素輪廓顏色
。。。。。。
SVG stroke-width 屬性
Tstroke- width屬性定義了一條線，文本或元素輪廓厚度
。。。。。。
SVG stroke-linecap 屬性
strokelinecap屬性定義不同類型的開放路徑的終結
。。。。。。
SVG stroke-dasharray 屬性
stroke-dasharray屬性用於創建虛線
:::::::::::::::::::::::::::::::::::::::::::::::::::::
SVG 濾鏡
SVG濾鏡用來增加對SVG圖形的特殊效果。
SVG 濾鏡
在本教程中，我們將僅展示一個可能採用的特殊效果。基礎知識展示後，你已經學會使用特殊效果，你應該能夠適用於其他地方。這裏的關鍵是給你一個怎樣做SVG的想法，而不是重複整個規範。
SVG可用的濾鏡是：
feBlend - 與圖像相結合的濾鏡
feColorMatrix - 用於彩色濾光片轉換
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 過濾陰影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用於照明過濾
fePointLight - 用於照明過濾
feSpotLight - 用於照明過濾
除此之外，您可以在每個 SVG 元素上使用多個濾鏡！
::::::::::::::::::::::::::::::::::::::::::::
SVG 模糊效果
注意： Internet Explorer和Safari不支持SVG濾鏡！
<defs> 和 <filter>
所有互聯網的SVG濾鏡定義在<defs>元素中。<defs>元素定義短並含有特殊元素（如濾鏡）定義。
<filter>標籤用來定義SVG濾鏡。<filter>標籤使用必需的id屬性來定義向圖形應用哪個濾鏡？
<filter>元素id屬性定義一個濾鏡的唯一名稱
<feGaussianBlur>元素定義模糊效果
in="SourceGraphic"這個部分定義了由整個圖像創建效果
stdDeviation屬性定義模糊量
<rect>元素的濾鏡屬性用來把元素鏈接到"f1"濾鏡