本頁使用了標題或全文手工轉換

可縮放向量圖形

維基百科,自由的百科全書
(已重新導向自 SVG)
前往: 導覽搜尋
可縮放向量圖形
SVG logo.svg
副檔名 .svg, .svgz
網路媒體型式 image/svg+xml[1][2]
開發者 全球資訊網協會
初始版本 2001年9月4日,​15年前​(2001-09-04
最新版本
2.0
(2015年9月15日,​21個月前​(2015-09-15)
格式類型 向量圖形
延伸自 XML
自由格式
網站 w3.org/Graphics/SVG/
這張圖片展示了點陣圖和向量圖的分別。點陣圖是由點構成的,向量圖則是由一些形狀元素構成。該圖中顯示放大點陣圖可以看到點,而放大向量圖看到的仍然是形狀。SVG屬於向量圖,因此能夠無級縮放,而不會導致馬賽克。

可縮放向量圖形英語:Scalable Vector GraphicsSVG)是一種基於可延伸標記式語言(XML),用於描述二維向量圖形的圖形格式。SVG由W3C制定,是一個開放標準

SVG概述[編輯]

SVG從1999年由一組加入W3C的公司啟動開發,與之前1998年提交給W3C的標準(PGML英語Precision Graphics Markup LanguageVML)構成競爭。SVG從這兩個格式吸取了經驗。[3]

SVG允許3種圖形物件類型:向量圖形柵格圖像以及文字。圖形物件——包括PNGJPEG這些柵格圖像——能夠被編組、設計、轉換及整合進先前的彩現物件中。文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性。SVG提供的功能集涵蓋了巢狀轉換、裁剪路徑英語Clipping pathAlpha通道、濾鏡效果、模板物件以及可延伸性

SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式。

SVG格式具有以下優點:
  • 圖檔可讀,易於修改和編輯(理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案)
  • 與現有技術可以互動融合。例如,SVG技術本身的動態部分(包括時序控制和動畫)就是基於SMIL標準。另外,SVG檔案還可嵌入JavaScript(嚴格地說,應該是ECMAScript)指令碼來控制SVG物件
  • SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋
  • SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果
  • SVG圖形格式可以用來動態生成圖形。例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶
SVG格式具有以下缺點:
  • 如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題。
  • SVG的本地執行環境下的廠家支援程度。
  • 由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大。Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用。
  • 舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形。

SVG Basic[編輯]

SVG Basic又稱SVGB,是英語「Scalable Vector Graphics, Basic Profile」的簡寫,可以翻譯為「可縮放的向量圖形標準的基本版」。它是SVG的一個子集,而主要目標是為掌上電腦等高端行動裝置提供向量圖形顯示格式。

SVG Tiny[編輯]

SVG Tiny又稱SVGT,是英語「Scalable Vector Graphics, Tiny Profile」的簡寫,可以翻譯為「可縮放的向量圖形標準的微型簡化版本」。它也是SVG的一個子集,而主要目標是為手機等低端行動裝置提供向量圖形顯示格式。

SVG animation[編輯]

主條目:SVG動畫英語SVG animation

SVG技術細節[編輯]

SVG主要支援以下幾種顯示物件:

  1. 向量顯示物件,基本向量顯示物件包括矩形、圓、橢圓、多邊形、直線、任意曲線等
  2. 嵌入式外部圖像,包括PNGJPEG、SVG等
  3. 文字物件

SVG可以實現動態和互動功能。在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱。SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」。

標準制定開發歷史[編輯]

  • 2001年9月4日,發布SVG 1.0。
  • 2003年1月4日,發布SVG 1.1。
  • 2003年1月14日,推出SVG移動子版本:SVG Tiny和SVG Basic。
  • 2008年12月22日,發布SVG Tiny 1.2。[4]
  • 2011年8月16日,發布SVG 1.1(第2版),成為W3C目前推薦的標準。[5]
  • W3C目前仍正在研究制定SVG 2,目前最新的草稿發布見[6]

範例[編輯]

SVG格式是XML的一種,SVG檔案其實只是普通的文字檔案,用一般的文字編輯器便可檢視或修改。

<?xml version="1.0"?>
<!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" 
    width="467" height="462">
  <!-- This is the red square: -->
  <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
         stroke="black" stroke-width="2px" />
  <!-- This is the blue square: -->
  <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
         stroke="black" stroke-width="2px" fill-opacity="0.7" />
</svg>

SVG顯示[編輯]

外掛模組支援[編輯]

目前,最常用的SVG外掛模組來自Adobe公司(Adobe SVG Viewer),另外Corel也提供SVG瀏覽器(Corel SVG Viewer)。然而前者宣布於2009年1月1日停止對該產品的支援。

原生支援[編輯]

各種SVG直譯器支援程度比較[編輯]

W3C的SVG網站上有一個測試套件可以用來測試SVG直譯器對於標準的支援。這個套件既可以線上執行也可以下載到本地執行。截至2007年中,對於流行的SVG軟體有如下測試結果:

  • 對SVG支援最好的瀏覽器是Opera,它支援大多數的SVG特性。
  • 作為專門的SVG瀏覽器,Batik SVG viewer能對大多數特性有良好支援,與Opera不相伯仲。但它不能和瀏覽器互動。
  • 載入了Adobe SVG Viewer的Internet Explorer也能支援多數SVG特性,但是由於沒有瀏覽器的原生支援,在互動方面許多特性不支援。
  • Mozilla Firefox 2.0對SVG特性的支援相當弱,許多重要特性如動畫等都不能支援。

設計工具[編輯]

能夠設計SVG圖形作品的軟體工具包括Adobe IllustratorVisio以及CorelDRAW等。

開放源代碼的軟體有ScribusKarbon14Inkscape以及Sodipodi等。

另外也有開放原始碼、功能簡單但容易操作、免安裝的線上SVG設計工具,例如svg-edit

參考文獻[編輯]

參見[編輯]

外部連結[編輯]