反饋

SVG

（可縮放矢量圖形）

可縮放矢量圖形(Scalable Vector Graphics，SVG)是W3C推出的基於XML的二維矢量圖形標準。SVG可以提供高質量的矢量圖形渲染，同時由於支持JavaScript和文檔對象模型，SVG圖形通常具有強大的交互能力。另一方面，SVG作為W3C所推薦的基於XML的開放標準，能夠與其他網絡技術進行無縫集成。^[1]

中文名: 可縮放矢量圖形
外文名: Scalable Vector Graphics

簡稱: SVG
本質: 二維矢量圖形標準

SVG簡介

SVG是一種開放標準的矢量圖形語言，可設計激動人心的、高分辨率的Web圖形頁面，因為軟件提供了製作複雜元素的工具，如漸變、嵌入字體、透明效果、動畫和濾鏡效果並且可使用平常的字體命令插人到HTML編碼中。2000年8月2日，W3C最終發佈了SVG候選推薦標準，並希望開發者儘早開始實施SVG。2000年年底SVG推薦標準制定完畢。

SVG是一種新型的矢量圖形標準，同時它也是一種矢量圖形描述的一種標準的語言，這種語言具有非常強的開放性，所以其在應用的過程中主要的對象是網絡。SVG在應用的過程中可以適應三種三種形式的圖像對象，各種圖像對象都可以在實際的工作中對對象進行全面的組合和處理，同時還能按照實際的需要更改其自身的形式，將其定義成預處理的對象。^[2]

SVG優勢

SVG在應用的過程中也存在着十分明顯的優勢。首先它是基於一個普遍應用的標準，其次是這種技術所形成的圖像質量非常好。再次是其所形成的圖像並不是很大，所以對圖像進行保存和顯示都十分的便捷，在這一過程中所選取的文件格式也具有非常強的靈活性，使用起來也非常的便捷。最後一點就是其在運行的過程中可以起到很好的互動作用，同時還能夠形成良好的動畫效果。SVG的基礎是純文字格式的XML，這樣一來也就直接的傳承了XML自身的特點，同時也使得不同系統之間的信息交流變得更加的容易，信息的儲存和讀取也變得更加的便捷，因此其在實際的工作中也具有非常強的可擴展性，此外它還可以對一些相對較為複雜的圖像進行詳細的描述，此外還可以將XML當做是數據運行的一個重要載體，這項技術在運行的過程中具備眾多的優點和優勢，也逐漸從青澀走向了成熟。^[2]

SVG文件結構

與HTML相類似，基於XML的SVG，語法和格式也是結構化的。所謂結構化，也就是文件中的對象通過特定的元素標籤定義，任何元素都可以作為對象進行管理，文件是框架式的。掌握基本的文件框架，就可以閲讀、編輯和創作自己的文件。

SVG使用一組組的元素標籤，創建和組織文件以及文件中的對象。每一個SVG文件都包含最外層的<SVg></SVg>標籤。該標籤用於聲明SVG文件的開始和結束。這等同於HTML文件中的HTML文件聲明標籤<Html></html>。

SVG主體中的語法和格式定義遵循XML標準，通過各類元素標籤和標籤對應的屬性來描述SVG對象。

SVG對象主要包括圖形，路徑和文本。

可以將SVG文件嵌入到XML網頁或HTML網頁執行。

SVG文件主要包括三個部分：

（1）標準的SVG元素信息。它通常就是指圖形本身的繪製信息，它可以有效的藉助SVG瀏覽器對圖形進行全面的瀏覽，這部分的信息對第三方系統建設和發展而言也具有非常強的可選擇性。在SVG當中，圖元對象的定義實際上就描述了一個新的圖元類型，圖元對象自身的類型也使得圖元的類型更加的真實可見，他們之間實際上存在着十分明顯的定義域引用的關係。^[2]

（2）模型信息。它是指圖形與描述對象之間的映射信息。

（3）私有屬性信息。用於將導出的圖形再次導入回源系統中，在圖形的交互過程中，若目標系統是第三方系統，則可以忽略這些私有信息。^[2]

SVGSVG 繪圖技術

SVG 繪圖通過編寫代碼來實現，格式為XML，繪製出一個矢量圖像。所以，對於一個SVG格式的圖像，看到的最終形式是一個描述文本，相對比較容易讀懂，易於修改使用，可以通過描述內容的關鍵字來建立索引，像表示圖像的形狀元素；同時，SVG還可以使用一些特殊處理，這些都可以通過修改代碼來實現，可以添加陰影，可以生成動態效果，這些都可以實現。^[3]

基於SVG構成一個矢量圖像時，我們使用的基本是各種形狀標籤，這些標籤元素包括根元素（svg），形狀元素；還有特殊效果處理中的濾鏡效果和漸變效果。^[3]

SVG提供了<circle>、<ellipse>、<line>、< polyline>、<reet>、<polygon>等6種基本的圖形元素和<path>路徑元素。可以對各種類型的幾何圖元進行描述。^[4]

在SVG中，線狀實體要素一般採用<polyline>元素或<path>元素來表示。在SVG 中，使用path元素的橢圓弧曲線命令A重新定義橢圓弧，使用path元素重新定義多邊形。^[4]

在SVG中使用分組元素<g>來表示基本重複單元，<g>元素可以嵌套使用來進一步表示圖元及子圖元，在<g>元素內可以定義任何可視化的基本幾何圖元元素。^[4]

填充範圍使用SVG的pattern元素來實現。^[4]

形狀元素：

矩形，用<rect>表示

圓形用<circle>表示

橢圓，用<ellipse>表示

線，用<line>表示

折線，用<polyline>表示

多邊形，用<polygon>表示

路徑，用<path>表示^[3]

SVGSVG座標系

無論對於什麼信息載體和載體設備而言，SVG文件的繪畫區域總是抽象地定義為其圖像對象所渲染的空間。然而不同的載體其性質是極為不同的，光是顯示分辨率一項就存在着巨大的差異。SVG文件在處理這些問題上有着一定的規則。載體的尺寸雖不確定，但渲染的動作總是在此載體的一個確定的矩形中發生的，這個確定的矩形叫做“視口”(Viewport)。對於可視化的載體(如顯示器、打印紙等)，視口就是繪有SVG圖像的那部分表面。

視口的屬性與具體設備有關，所以在SVG的解釋程序渲染一個SVG圖像之前，先要通過與具體設備的交互通訊來確定視口的尺寸和參數，一般需要確定以下3個:以該設備的像素數所定義的視口的高度值、寬度值，還有一個像素所代表的具體尺寸如多少毫米等。只有這樣，SVG客户端的解釋程序才能將一個SVG文件轉換成具體設備上的圖像。

SVG客户端的解釋程序獲得以上信息後，首先初始化視口，建立以像素為長度單位的視口座標系，接着建立用户座標系以使兩者一致，也就是使用户座標系中的一個單位等於視口座標系中的一個像素。

渲染SVG文件時，如果SVG文件中的長度值與座標值等沒有規定單位，則缺省地採用用户座標系的單位，也就是使用像素作度量標準。如果有特定的單位如mm、cm等，則滿要經過換算將尺寸轉換為用户座標值。這也是SVG客户端解釋程序初始化時，需要第三個參數的原因。

SVG還有一個功能，即可以定義自己的座標系。其方法是在一段SVG文本中定義一種叫做變換(Transformation)的格式，其含義類似於解析幾何中的座標變換和映射規則。變換的格式中説明了此變換所作用的對象應該使用什麼方式進行平移、縮放、旋轉、歪斜等。變換提供了一種整體的方式，用它可對一個或一一組圖像對象進行變換，改變其比例、位置、形狀等，以達到使用自定義座標系的目的。

SVG座標變換

SVG的座標變換方式主要分為五種，包括平移變換，旋轉變換，伸縮變換，歪斜變換，還有矩陣變換。^[3]

SVG平移變換

平移變換的特點是變換後，新座標系的座標軸方向不改變，它的表達式為：transform="translate(x，y)"，這個表達式表示新得到的座標系的原點平移到原來座標系的點（x，y）。^[3]

SVG旋轉變換

旋轉變換的關鍵是旋轉角度，它的表達式為：transform="rotate(anglex，y)"，其中有兩個關鍵值，一個是旋轉角度，用angle表示，分為正負值，其正值表示順時針旋轉，負值表示逆時針旋轉，單位是“度”；另一個關鍵值是旋轉中心的座標（x，y），當中心座標為0時，可以省略。^[3]

SVG伸縮變換

伸縮變換顧名思義就是將圖像進行伸展和縮小，它的表達式為transform="scale(x，y)"，其中的關鍵值為變化的比例因子，當比例因子>1時表示圖像被拉伸變大了，當比例因子<1時表示圖像被縮小了，其中比例因子x表示x軸方向的，比例因子y表示y軸方向的。當做等比例縮小放大時，即x=y，這時，y可以省略不寫。^[3]

SVG歪斜變換

歪斜變換的關鍵是歪斜的角度，它有兩種表達方式，一種為transform="skewX(x-angle)"是代表x軸上的變換，其中（x-angle）是沿x軸歪斜的角度，或者另一種為transform="skewY(y-angle)"，表示的是y軸的變化，所以（y-angle）是沿y軸歪斜的角度。^[3]