跳至內容

做得縮放向量圖形

出自Taiwan Tongues 客語維基
於 2025年8月23日 (六) 18:09 由 TaiwanTonguesApiRobot留言 | 貢獻 所做的修訂 (從 JSON 檔案批量匯入)

(差異) ←上個修訂 | 已批准修訂 (差異) | 最新修訂 (差異) | 下個修訂→ (差異)

做得縮放向量圖形(英語:Scalable Vector Graphics,縮寫:SVG)係一種因為做得延伸標記式語言(XML), 用來描寫二維向量圖形个圖形式。SVG 由 W 三 C 制定,係一個開放標準。

SVG 概述

SVG 由一九九八年成立个 W 三 C SVG 工作群組啟動開發,隨等當年提交分 W 三 C 个六份標準提案來開展。

SVG 允准三種圖形物个類型:向量圖形、點陣圖像摎文字。圖形物件—— 包含 PNG、JPEG 這兜點陣圖像—— 做得分人編組、設計、轉換同整合進前个彩現物件當中。文字做得在任何適用在應用程式个 XML 安名空間之內,故所提高 SVG 圖形个搜尋能力摎無障礙性。SVG 提供个功能集涵做了竇狀轉換、裁剪路徑、Alpha 路徑頭、濾鏡效果、模枋物件摎做得延伸性。

SVG 嚴格个遵從 XML 語法,用文字格式个描述性語言來描述圖像內容,故所係一種摎圖像解析無關係个向量圖形格式。

SVG 格式具有以下个優點:

  • 圖檔可讀,較方便修改同編輯(理論上恁樣形,毋過實際上嗄係因為各種無共樣个 SVG 檔編輯器可能存成無恁該解讀个 SVG 檔案)。
  • 摎現有个技術做得互動融合。比將講,SVG 技術本身个動態部分(包括時序控制摎動畫)就係因為 SMIL 標準。另外,SVG 檔案還使得嵌入去 JavaScript(認真个講,應該係 ECMAScript)指令碼來控制 SVG 物件。
  • SVG圖形格式做得利便个建立文字索引,毋過實現基於內容个圖像搜尋。
  • SVG 圖形格式支援多種个濾鏡摎特殊效果,在無改變圖像內容个前提之下做得實現點陣圖格式當中像文字陰影个效果。
  • SVG 圖形格式做得用來動態生成圖形。比將講,做得用 SVG 動態生成有互動功能个地圖,嵌入到網頁裡背,乜表示分終端使用者。

SVG 格式具有以下个缺點:

  • 仰般摎既經占有重要市場个向量圖形式 Adobe Animate(老頭擺安到 Adobe Flash)競爭个問題。事實上,Adobe Animate 在 Flash CC 佢等兩千空一十四版同以後个版本就係支援直接匯出 SVG 檔案。
  • 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 動畫

主條目:_ SVG 動畫 _

SVG 技術細節

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

一 . 向量顯示物件,基本向量顯示物件包含矩形、圓、橢圓、多邊形、直線、隨意曲線等二 . 嵌入式外部圖像,包含 PNG、JPEG、SVG 等三 . 文字物件

SVG 做得實現動態摎互動功能。在 DOM 模型个基礎上,SVG開發設計人員做得利用 ECMAScript 或者係 SMIL 來進行時序控制或者物件个操縱。SVG 雖然係文字个格式,毋過 SVG 支援利用 gzip 壓縮演算法減少檔案尺寸,壓縮後个檔案一般來講係「SVGZ 檔案」。

標準制定開發歷史

SVG 由一九九八年成立个 W 三 C SVG 工作群組啟動開發,隨等當年提交分 W 三 C 个六份標準提案運作:

  • Web Schematics,來自 CCLRC
  • PGML,來自 Adobe Systems、IBM、網景摎昇陽電腦
  • VML,來自 Autodesk、惠普、Macromedia、Microsoft同 Vision
  • Hyper Graphics Markup Language ( HGML ),來自 Orange UK 摎普利茅斯大學
  • WebCGM,來自波音、InterCAP Graphics Systems、Inso Corporation、CCLRC 還有全錄
  • DrawML,來自 Excosoft AB

該當時工作群組係由W 三 C 个 Chris Lilley 帶頭。

  • 二零零一年九月初四,發布 SVG 一千擔。
  • 二零零三年一月初四,發布 SVG 一千八百五十二。
  • 二零零三年一月十四,推出 SVG 移動子版本:SVG Tiny 摎 SVG Basic。
  • 二零零八年十二月二十二日,發布 SVG Tiny 一千擔二百空二。
  • 二零一一年八月十六號,發布 SVG 一千八百五十二(第二版), 成為 W 三 C 目前推薦个標準。
  • W 三 C 這下還在研究制定 SVG 二,目前最新草稿發布到這。

範例

    • *

SVG 格式係 XML 个一種,意思就係講 SVG 檔案其實就係普通个文字檔案,用一般个文字編輯器就做得檢視抑係修改。

SVG 顯示

外掛程式支援

目前嗬,盡輒用个 SVG 外掛个程式係來自 Adobe 公司(Adobe SVG Viewer), 另外 Corel 也提供 SVG 瀏覽器(Corel SVG Viewer)。 毋過前者宣布在二零零九年一月初一停止對這個產品个支援。

原生支援

  • 較有名个 SVG 專案包含 Mozilla SVG Project,KDE 个 KSVG,還有Amaya 等。
  • Mozilla Firefox 自家版本一千五百空發行後,就係開始支援 SVG 格式个顯示。
  • Opera 八千五百空版開始支援 Tiny 一千擔一規格个SVG。
  • 因為 Java 个 SVG 專案主要有 Batik SVG Toolkit 等。
  • Google Chrome 摎 Safari 支援 SVG 顯示。
  • Microsoft 个 Internet Explorer 八千五百空版還合佢等老个版本還吂支援 SVG,一直到由 Internet Explorer 九千五百空版開始支援 SVG。

各種 SVG 直接翻譯器支援程度比較

W 三 C 个 SVG 網站項有一個測試套件做得用來測試 SVG 直譯器對標準个支援。這隻套件既做得線上執行也做得下載到本地執行。截至兩百七年中,對流行个 SVG 軟體有係講測試結果:

  • 著 SVG 支援最好个瀏覽器係 Opera,佢支援大部分个 SVG 特性。
  • 做一個專門个 SVG 瀏覽器,Batik SVG viewer 做得對大多數特性有良好个支援,摎 Opera 毋相伯仲。毋過佢做毋得摎瀏覽器互動。
  • 載入欸 Adobe SVG Viewer 个 Internet Explorer也做得支援多數 SVG 特性,毋過因為無瀏覽器个原生支援,在互動方面當多特性毋支援。
  • Mozilla Firefox 二姣零對 SVG 特性个支援相當个弱,當多重要个特性像係動畫等都做毋得支援。

設計工具

做得設計 SVG 圖形作品个軟體工具包含著有 Adobe Illustrator、Adobe Photoshop CC、Visio、Xmind 八還有 CorelDRAW 等。

另外開放原始碼个軟體有 Scribus、Karbon 十四、Inkscape 還有 Sodipodi 等。

另外乜有開放原始碼、功能簡單毋過容易操作、毋使鬥个線上 SVG 設計工具,比將講 Svg-edit,該軟體這下位在 Github 上。

對於行動裝置,安卓系統做得來使用 PainterSVG。

參考文獻

外部連結

  • W 三 C SVG 官方標準網站(英文)
  • svgwiki(英文)
  • SVG Web(英文)
  • Opera 開發網站上背有關 SVG 个展示摎教程(英文)
  • W 三 school 上有關 SVG 个教程

參見

  • Canvas ( HTML 元素 )