什麼是SVG網頁矢量圖

時間 2019-12-04

標籤什麼 svg 網頁矢量欄目 HTML 简体版

原文原文鏈接

SVG (Scalable Vector Graphics)表明可升級矢量圖象，是新一代圖象格式的標準。它給 Web開發人員提供了一種利用 XML(Extensible Markup Language)建立靜態圖像和動態圖像的方法，是圖象技術上的一次革命。利用此技術，Web開發人員對頁面進行更加精確的控制，SVG的動畫片技術能夠實現從簡單的直線運動到複雜的3D螺旋變形的控制.
SVG 有許多其餘圖像方法所不具備的優勢，下面就是其中一些：
1，和其它媒介兼容，好比無線設備等。
2，可升級的服務器端解決方案。
3，文件尺寸小，方便Web頁面下載。
4，無限的顏色和字體的選擇。
5，圖像可任意縮放。
6，能夠用腳本控制與客戶的交互事件。
7，方便瀏覽器進行高清晰的打印。
8，可以使用濾鏡效果。
9，基於文本的格式，能夠輕鬆地和其它WEB技術集成。
10，內建的國際語言支持。
11，減小維護成本。
12，輕鬆升級。
13，普遍的多媒體兼容性。
因爲 SVG 和Flash有不少共同的特性，一般有人把它們放到一塊兒進行比較，確實，二者都和其它標準有很好的兼容性。事實上，SVG比Flash 有一些獨特的特性。SVG可使用CSS（Cascading Style Sheets）、Script腳本和 DOM（Document Object Model ），是徹底公開源代碼的技術，初學者徹底能夠從別人的現成的做品中進行學習。而Flash採用的是獨有的專利技術，並非徹底開放的標準，當你在場景上單擊右鍵時，你看到的不是源代碼。
然而，因爲某些緣由，SVG還並無象Flash那樣流行，但隨着時間的推移，SVG也將很快流行起來的。Mozilla計劃徹底支持SVG技術，Microsoft也開始支持這種技術，（其實，IE6已經支持SVG。）Adobe GoLive5也宣佈支持SVG。此外，SVG編輯器也開始在網絡上風行，Jasc的 WebDraw 已經能夠以可視化的方式建立SVG格式的圖像了。Adobe 也有生成SVG格式圖象的插件。SVG的將來不可是光明的，並且將會在不久的未來在Web領域扮演重要的角色。
目前，SVG的另外一個不足之處就是，沒有一個瀏覽器徹底支持它，要瀏覽SVG格式的圖像，須要安裝Adobe SVG插件（plug-in），但目前它也不能徹底支持SVG的標準。另外一個缺陷就是， SVG的在線資料太少，Web開發人員很難找到可參考的資料和素材。
下面。就讓咱們來了解一下SVG的基本概念，SVG的特性是不少的，這裏不能所有羅列出來，咱們只是先初步感覺一下SVG可以給Web開發人員帶來什麼.
什麼是SVG?

SVG是設計和編程之間的橋樑，與傳統的圖像製做方法不一樣，SVG圖像是由程序代碼生成的，這種語言是基於XML的，所以，它能夠和W3C的其它標準無縫集成，好比DOM，CSS等。
爲了便於理解，咱們能夠把瀏覽器想象成一個空的畫布，上面定義了許許多多的X，Y的座標點，畫布上的每個點，均可以經過數學計算公式創造出一個形體。使用數學的術語可能會令人產生恐懼感，事實上，Web開發者在建立HTML頁面時一直在使用這樣的數學計算公式已經好長時間了，例如：一個CSS的層，經過設定層的top（y座標點）和left（x座標點）屬性值，就能夠定位它的位置，這就是利用數學公式來實現。SVG就是利用相似的原理來建立圖像的。
SVG可以顯示24位顏色的圖像，而圖像尺寸卻很是的小，圖像在放大或改變尺寸時不會有任何質量上的損失，更重要的是，SVG的每個元素和元素的每個屬性都可以動態進行改變。這也是SVG最有競爭力的一面。
SVG的文檔結構

SVG能夠有許多方式來組成Web文檔：能夠以獨立的SVG頁面；能夠嵌入到頁面中；也能夠被一個帶名字空間的XHTML文檔使用，這一點就象XML文檔類似.下面先看看獨立的SVG頁面的例子：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
" http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd ">
3. <svg width="300" height="300" x="0" y="0">
4. 
5. </svg>
下面咱們對上面的代碼作一個說明:
第一行：因爲SVG是XML的一個應用分支，所以，它也必須符合XML的標準，必須包含XML的聲明<?xml version="1.0" standalone="no"?>
第二行：SVG必須遵循必定的標準或規則，這些標準或規則保存在一個被稱爲Document Type Declaration或DTD的獨立文件，來驗證SVG文檔結構的正確性，DTD精確描述SVG中容許使用的語言和語法規則。
第三行：<svg>標記告訴瀏覽器，這是一個SVG文檔，SVG文檔的做用範圍（或叫作SVG的畫布大小）用height和 width屬性來定義，若是不定義 width和height屬性的話，畫布的範圍將是整個瀏覽器，x，y屬性告訴瀏覽器將SVG畫布放到什麼位置，x屬性與咱們日常所用top屬性相同，指瀏覽器的top位置，y屬性等同於瀏覽器的left位置，固然，這裏也可使用相對位置來定位，即百分比。
第四行：全部的SVG內容，都被放到<svg></svg>標記之間，
第五行：因爲SVG是XML的一個應用，所以，必須有結束標記</svg>來結束文檔。

也能夠把SVG嵌入到HTML或XHTML文件裏：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Object 和 Embed 測試</title>
</head>
<body>
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>
</body>
</html>
上面的文件是一個完徹底全的HTML結構的文檔，最重要的標記是object和embed兩個，固然，這是對Internet Explorer 和Netscape兩種狀況的，值得注意的是：object採用data屬性指明SVG文件的URL地址，而embed採用src屬性來指明SVG文件的 URL。
這種方法的優勢就是：它能夠把HTML和XHTML和SVG的長處結合在一塊兒，例如：能夠提升頁面被搜索引擎搜索到的機會，能夠輕易地添加聲音或音樂，（Adobe plug-in支持mp3和wav文件）。
第3個方法就是：利用XML名字空間，這種方式是功能最強大，最具備靈活性，咱們在之後的文章裏將詳細探討。

相關標籤/搜索

每日一句

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