| ylbtech-HTML5: SVG （可縮放矢量圖形） |
可縮放矢量圖形是基於可擴展標記語言（標准通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標准。
| 1. SVG返回頂部 |
-
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
-
SVG 用來定義用於 網絡的基於矢量的圖形
-
SVG 使用 XML 格式 定義圖形
-
SVG 圖像在 放大或改變尺寸的情況下 其圖形質量不會有所損失
-
SVG 是萬維網聯盟的標准
-
SVG 與諸如 DOM和 XSL 之類的W3C標准是一個整體
推薦標准
SVG 於 2003 年 1 月 14 日成為 W3C 推薦標准。
查看 SVG 文件
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。
創建SVG文件
由於SVG是XML文件，SVG圖像可以用
任何文本編輯器創建，但它往往是與
一個繪圖程序一起使用，如Inkscape，更方便地創建SVG圖像。
| 2. 歷史和優勢返回頂部 |
在 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 則是未開源的私有技術。
| 3. 背景返回頂部 |
圖片的數字化。將圖片存儲為數據有兩種方案。其一為位圖，也被稱為光柵圖。即是以自然的光學的眼光將圖片看成在平面上密集排布的點的集合。每個點發出的光有獨立的頻率和強度，反映在視覺上，就是顏色和亮度。這些信息有不同的編碼方案，在互聯網上最常見的就是RGB。根據需要，編碼后的信息可以有不同的位(bit)數——位深。位數越高，顏色越清晰，對比度越高；占用的空間也越大。另一項決定位圖的精細度的是其中點的數量。一個位圖文件就是所有構成其的點的數據的集合，它的大小自然就等於點數乘以位深。位圖格式是一個龐大的家族，包括常見的JPEG/JPG, GIF, TIFF, PNG, BMP。
第二種方案為矢量圖。它用抽象的視角看待圖形，記錄其中展示的模式而不是各個點的原始數據。它將圖片看成各個“對象”的組合，用曲線記錄對象的輪廓，用某種顏色的模式描述對象內部的圖案（如用梯度描述漸變色）。比如一張留影，被看成各個人物和背景中各種景物的組合。這種更高級的視角，正是人類看世界時在意識里的反映。矢量圖格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。
矢量圖中簡單的幾何圖形，只需要幾個特征數值，就可以確定。比如三角形，只需要確定三個頂點的坐標。圓只需要確定圓心的坐標和半徑。描述它的函數已知的曲線也只需要幾個參數就能夠確定。如正弦曲線、各種螺線等等。如果用位圖記錄這些幾何圖案，則需要包含組成線條的各個像素的數據。除了大大節省空間，矢量圖還具有完美的伸縮性。因為記錄的是圖形的特征，圖形的尺寸任意變化時，都只是做着相似變換，不會出現模糊和失真。相反位圖的圖片放大到超出原有大小時，各個像素點之間出現空缺，即使用某種算法填充，也會出現模糊鋸齒等現象，不如矢量圖精確。因而矢量圖很適合用於記錄諸如符號、圖標等簡單的圖形。而位圖則適合於沒有明顯規律的、顏色豐富細膩的圖片。
| 4. 圖形格式返回頂部 |
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能夠得到更迅速的開發和應用。
| 5. 格式優勢返回頂部 |
1．
基於可擴展標記語言（外語縮寫：XML）
為了保證網絡圖像能夠順利地和目前已經由W3C開發的DOM1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML技術，以及其他標准化技術，如ICC，URI，UNICODE，RGB，ECMAScript/JavaScript，Java協調一致，SVG是完全基於可擴展標記語言， 並能和上述各項技術相融會的新一代的網絡圖像格式。SVG並非僅僅是一種圖像格式， 由於它是一種基於XML的語言，也就意味着它繼承了XML的跨平台性和可擴展性，從而在圖形可重用性上邁出了一大步。如SVG可以內嵌於其他的XML文檔中，而SVG文檔中也可以嵌入其他的XML內容，各個不同的SVG圖形可以方便地組合， 構成新的SVG圖形。目前最常用的SVG查看工具有Adobe公司的Adobe SVG Viewer 3.03。
SVG-Edit 是一個基於瀏覽器的圖像編輯器，可進行常用的一些圖像處理功能，無需服務器端支持，支持各種瀏覽器。如下圖：
2．
采用文本來描述對象
SVG包括3種類型的對象： 矢量圖形(包括直線、曲線在內的圖形邊)、點陣圖像和文本。各種圖像對象能夠組合、變換，並且修改其樣式，也能夠定義成預處理對象。
與傳統的圖像格式不同的是，SVG采用文本來描述矢量化的圖形，這使得SVG圖像文件可以像HTML網頁一樣有着很好的可讀性。當用戶用圖像工具輸出svG后，可以用任何文字處理工具打開SVG圖像，並可看到用來描述圖像的文本代碼。掌握了SVG語法的人甚至可以只用一個記事本便可以讀出圖像中的內容來。
SVG文件中的文字雖然在顯示時可呈現出各種圖像化的修飾效果，但卻仍然是以文本的形式存在的，可以選擇復制、粘貼。由於SVG內的文字都以文本的形式出現在XML文件中， 這些信息可以為搜索引擎所用，而以往搜索引擎通常無法搜索到寫在點陣圖像中的文字。這些文本信息還可以幫助視力有殘疾而無法看到圖形的人，可以通過其他方式(如聲音)來傳送這些信息。
3．
具有交互性和動態性
由於網絡是動態的媒體，SVG要成為網絡圖像格式，必須要具有動態的特征，這也是區別於其它圖像格式的一個重要特征。SVG是基於XML的，它提供無可匹敵的動態交互性。你可以在SVG文件中嵌入動畫元素(如運動路徑、漸現或漸隱效果、生長的物體、收縮、快速旋轉、改變顏色等)，或通過腳本定義來達到高亮顯示、聲音、動畫等效果。
4．
完全支持DOM
DOM(Document Object Model文檔對象模型)是一種文檔平台，它允許程序或腳本動態的存儲和上傳文件的內容、結構或樣式。由於SVG完全支持DOM， 因而SVG文檔可以通過一致的接口規范與外界的程序打交道。SVG以及SVG中的物件元素完全可以通過腳本語言接受外部事件的驅動，例如鼠標動作，實現自身或對其他物件、圖像的控制等。這也是電子文檔應具備的優秀特性之一。
| 6. SVG 比較優勢返回頂部 |
首先簡要解釋一下矢量圖像格式和位圖圖像格式的區別。矢量圖像
用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合於直接打印或輸出。而位圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會占用大量的網絡帶寬。SVG是一種矢量圖形格式，GIF、JPEG是光柵文件格式。有了兩者的概念后，SVG較GIF、JPEG的優勢顯而易見。
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。
SVG面臨的主要問題一個是如何和已經占有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
| 7. 開發返回頂部 |
SVG是一個XML文件，用於XML編程的兩種模型DOM和SAX也適用於它。因為SVG是被設計用於互聯網，所以通過Javascript和DOM訪問它就是最重要的應用模式。通過Javascript和DOM可以動態地修改HTML，同樣也可以
在瀏覽器中動態地創建、修改和刪除圖片。
| 8. HTML5內聯返回頂部 |
SVG 優勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持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="網址"> <circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/> </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實例
世界地圖SVG：
| 9. 手機上的應用返回頂部 |
由於SVG是基於XML的， 因而能制作出空前強大的動態交互圖像。即SVG圖像
能對用戶動作做出不同響應，
例如高亮、聲效、特效、動畫等。作為SVG技術的一個應用，SVG在手機等無線手持設備上的應用將是3G時代最重要的應用之一。支持SVG的手機，允許用戶查看高質量的矢量圖形及動畫，同時，由於SVG采用文本傳輸，尺寸也會非常小，速度將會更快。目前，市面上已經有100多款智能手機提供此服務，其中包括諾基亞、摩托等巨頭的產品，由此可見，SVG手機將成為3G時代的一個最重要的市場制高點，也將是國內手機廠商應對和超越海外兵團的一個突破口。
SVG支持的手機清單
Motorola: C975, C980, E770V, E1000, i870, V3X, V975, V980, V1050，em30，E8，zn5
NEC: V703N, V802N
Nokia: 3250, 5500 Sport, 6265, 6233, 6234, 6280, 6282, 7370, 7710, E60, E61, E70, N70, N71, N72, N73, N80, N90, N91, N92, N93
Panasonic: MX6, MX7, SA6, SA7, VS3, VS7
Sagem : my-X8, my-V76, my-V85
Samsung: D600, E350, Z300, Z500, ZV10, ZV30
Sanyo : S750
Sharp : V501SH, V601SH, V602SH, V603SH, V604SH, V703SH, V703SHf, 802, V804SH, 902, V903SH, V904SH
Siemens : C65, C70, C75, CF65, CFX65, CL75, CX65, CX70, CX70 Emoty, CX75, M65, M75, S65, S75, SF65, SL65, SL75, SK65, SP65
Sony Ericsson: D750, F500, K300, K310, K500, K508, K510, K600, K608, K610, K700, K750, K790, K800, M600, P990, S600, S700, S710, V600, V800, W300, W550, W600, W700, W710, W800, W810, W850, W900, W950, Z500, Z520, Z530, Z550, Z710, Z800
Toshiba: TS 803, TS 921, V902T, V903T
更多詳細列表，請訪問W3C網站.
| 10.返回頂部 |
1、百度百科
2.1、w3cschool
2.2、runoob
3、資源
4、Mozilla
5、走進SVG
---------------------------------------------------------
6、
| 11. 五款超實用的開源SVG工具返回頂部 |
五款超實用的開源 SVG工具發表於2013-04-13 13:05| 次閱讀| 來源CSDN| 0 條評論| 作者夏夢竹SVGBatikApache InkscapeCairoGraphviz開源摘要：SVG是基於XML的矢量圖像格式，用戶可靈活運用圖像進行搜索、索引、腳本以及壓縮。本文分享5款超實用的開源的SVG工具，希望對你有所幫助。
SVG（Scalable Vector Graphics）是基於XML的矢量圖像格式，用戶可靈活運用圖像進行搜索、索引、腳本以及壓縮。SVG由W3C制定開發，是一個開放標准，支持當前主流瀏覽器包括Firefox、IE9-10、Chrome、Safari以及Opera。
SVG支持三種圖像類型：矢量圖像、嵌入式外部圖像以及文字。圖形對象包括PNG、JPEG和SVG格式，用戶可根據自己的喜好輕松使用XML文本文件進行修改，因此使用文本編輯成為創建SVG圖像的重要方法之一。由於這種格式得到主流瀏覽器的支持，越來越多的產品開始傾向開源。
本文我們將分享5款超實用的開源的SVG工具：
1. SharpVectorGraphics （SVG）
SVG是基於Microsoft .Net開源項目設計而來，是建立在.Net framework上使用SVG的一款應用，支持生成、操作以及可查看 ，該項目旨在賦予一組核心模塊，開發人員可創建基金會來支持特定的SVG解決方案。
2. Cairo
Cairo是一款2D圖像庫能夠安裝、填充cubic Bézier曲線，轉換和合成半透明圖像，通過繪圖操作進行文字渲染，可以轉換任何仿射變換（縮放、旋轉、剪切等）。
3. Graphviz
Graphviz是一款可視化的圖形軟件，支持SVG、PDF和Postscript，顯示交互式的圖形瀏覽器，此外，該工具擅長抽象圖形和網格，具備多種實用的特性涵蓋具體的圖表功能如顏色、字體、表格節點布局、線型樣式、超鏈接、滾動以及自定義形狀。
4. Inkscape
Inkscape是一款開源的矢量圖形編輯器，支持可縮放的SVG1.1版，支持Mac OSX，Unix OS以及Microsoft Windows系統。
Inkscape中的對象可進行偽射轉換（移動，旋轉、縮放、傾斜以及可配置的矩陣），該對象可進行分組、克隆；Inkscape支持多行文本（SVG’s <text>元素）和流動文本（非標准<flowRoot> 元素，此前提出的SVG 1.2版）。
Inkscape兼容多種格式，不僅支持其原生格式SVG，還有PS、 EPS、PD、AI (Adobe Illustrator)以及raster格式。
5. Apache Batik
Batik是由Apache軟件基金會開源的一款工具。
該工具使用Java編寫，幾乎完全支持SVG 1.1，此外，其他一些功能還將被納入到SVG 1.2原始計划中。
除了能為PNG輸出查看器和光柵化程序，Batik還支持完美的打印SVG文件格式以及TrueType-to-SVG-Font字體轉換，用戶還能將SVG轉換成PDF格式。
 |
作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 |