SVG之旅：SVG簡介

時間 2019-11-13

標籤 svg 之旅簡介简体版

原文原文鏈接

圖形系統html

計算機中描述圖形的信息主要有兩大系統：柵格圖形和矢量圖形。數據庫

柵格圖形canvas

柵格圖形（Raster Graphics）又常稱爲位圖或點陣圖，是使用像素陣列（Pixel-Array/Dot-Matrix點陣）來表示圖像。其實柵格圖形也是一種數據結構，表明了有限區域中的稠集（Dense Set），每個元素至少出現一次，沒有其餘的數據和元素相關聯。在索引，數據壓縮等方面有普遍應用。數組

柵格圖形系統中，圖像被表示爲圖片元素或者像素的長方形數組。而柵格圖像的像素部分都分配有特定的位置和顏色值。每一個像素的顏色信息由RGB組合或者灰度值表示。瀏覽器

根據位深度，可將柵格圖形分爲一、四、八、1六、24和32位圖像等。每一個像素使用的信息位數越多，可用的顏色就越多，顏色表現就越逼真，相應的數據量就越大。好比，位深度爲1的像素位圖只有兩個可能的值（黑色和白色），因此又稱之爲二值位圖。位深度爲8的圖像有2的8次方個可能的值（也就是256）。位深度爲8的灰度模式圖像有256個可能的灰色值。服務器

RGB圖像由三個顏色通道組成。8位/像素的RGB圖像中的每一個通道有256個可能的值，這意味着該圖像有1600萬個以上可能的顏色值。有時將帶有8位/通道（bpc）的RGB圖像稱做24位圖像（8位 x 3通道 = 24位數據/像素）。一般將使用24位RGB組合數據位表示的位圖稱爲真彩色位圖。數據結構

在瀏覽器尚未對SVG這樣的矢量圖進行支持以前，咱們在Web中使用的圖像都是柵格圖形。好比jpg和gif等格式的圖形。柵格圖形的再現能力較強，可是在某些情形下會顯得不足。好比，當瀏覽器以不一樣大小顯示圖像時，特別是當一張小圖放大顯示時，一般會產生鋸齒邊緣。也就是咱們常說的，導致圖像失真。編輯器

矢量圖形svg

矢量圖形是計算機圖形學中用點、直線或者多邊形等基於數學方程的幾何圖元表示圖像。簡單地說，在矢量圖形系統中，圖像被描述爲一系列幾何形狀。矢量圖形閱讀器接受在指定座標集上繪製形狀的指令，而不是接受一系列已計算好的像素。模塊化

通俗的說：矢量圖經過指定爲肯定每一個像素的值所需的指令而不是指定這些值自己，克服了這些困難中的一部分。例如，向量圖形再也不爲一個直徑一英寸的圓提供像素值，而是告訴瀏覽器建立一個直徑一英寸的圓，而後讓瀏覽器（或插件）作其他事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。若是圖像須要以正常大小的三倍來顯示，那麼瀏覽器只要按正確的大小畫圓而沒必要執行光柵圖像一般的插入法。相似地，瀏覽器接收的指令能夠更容易地與外部信息源（如應用程序和數據庫）綁定，要對圖像製做動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令便可。

矢量圖形相對於柵格圖形而言，具備如下幾個優點：

保存最少的信息，文件大小比位圖要小，而且文件大小與物體的大小無關
在圖像處理軟件中，任意放大矢量圖形，不會丟失細節或影響清晰度，由於矢量圖形是與分辨率無關的。無限地放大這個圓，它仍然保持平滑；用多邊形表示的曲線將會顯現出不是真正的曲線
在放大的時候，直線與曲線都不會成比例地變粗，它只會保持不變或者要小於縮放比例；爲了看起來比較平滑，使用簡單幾何形狀表示的不規則曲線將會成比例地變粗，而且看起來再也不像這些幾何形狀
保存的物體參數能夠在後面修改。這也就是說物體的運動、縮放、旋轉、填充等都不會下降繪製的精度。另外，能夠用與設備無關的單位表示，這樣更好地柵格設備上進行柵格化。
從三維的視角來看，因爲陰影能夠抽象爲造成它們的光線，因此矢量圖形的陰影渲染更加真實。這樣就能夠獲得真實感的圖像及渲染效果。
當調整矢量圖形的大小、將矢量圖形打印到 PostScript 打印機、在 PDF 文件中保存矢量圖形或將矢量圖形導入到基於矢量的圖形應用程序中時，矢量圖形都將保持清晰的邊緣。所以，對於將在各類輸出媒體中按照不一樣大小使用的圖稿（如徽標），矢量圖形是最佳選擇。

咱們所要學的SVG就是矢量圖形，也常稱之爲可縮放矢量圖形（Scalable Vector Graphics，簡稱SVG）。那麼什麼是SVG？

SVG是什麼?

SVG是XML語言的一種形式，有點相似XHTML，它能夠用來繪製矢量圖形，例以下圖。SVG能夠經過定義必要的線和形狀來建立一個圖形，也能夠修改已有的位圖，或者將這兩種方式結合起來建立圖形。圖形和其組成部分能夠變形，能夠合成，還能夠經過濾鏡徹底改變外觀。

SVG推出於1999年，以前有幾個相互競爭的格式規範被提交到W3C，可是因爲以前1998年提交給W3C的PGML、VML標準構成競爭，因此形成SVG的標準沒有徹底經過。當下的瀏覽器支持程度請參考Can I use。即使瀏覽器實現了一些規範，但實現速度徹底不能和它的競爭技術相比，它的競爭技術好比說HTML Canvas，都已經實現了成熟的應用接口。可是SVG也有自身的優勢，好比它實現了DOM接口（比Canvas方便），不須要安裝第三方插件就能夠在瀏覽器中使用。固然，是否使用SVG還要取決於你要實現什麼。

SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。SVG容許3種圖形對象類型：矢量圖形、柵格圖像以及文本。圖形對象——包括PNG、JPEG這些柵格圖像——可以被編組、設計、轉換及集成進先前的渲染對象中。文本能夠在任何適用於應用程序的XML命名空間以內，從而提升SVG圖形的搜索能力和無障礙性。SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果、模板對象以及可擴展性。

SVG繪圖是交互式和動態的。例如，可以使用腳原本定義和觸發動畫。這一點與Flash相比很強大。Flash是二進制文件，動態建立和修改都比較困難。而SVG是文本文件，動態操做是至關容易的。並且，SVG直接提供了完成動畫的相關元素，操做起來很是方便。

SVG與其餘Web標準兼容，並直接支持文檔對象模型DOM。這一點也是與HTML5中的Canvas相比很強大的地方。於是，能夠很方便的使用腳本實現SVG的不少高級應用。並且SVG的圖形元素基本上都支持DOM中的標準事件。可將大量事件處理程序(如onmouseover和onclick)分配給任何SVG圖形對象。雖然SVG的渲染速度比不上canvas元素，可是勝在DOM操做很靈活，這個優點徹底能夠彌補速度上的劣勢。

SVG優勢

SVG主要具備如下幾個優勢：

圖像文件可讀，易於修改和編輯（理論上如此，但實際上倒是由於各類不一樣的SVG檔編輯器而可能存儲成不易解讀的SVG文件）
與現有技術能夠互動融合。例如，SVG技術自己的動態部分（包括時序控制和動畫）就是基於SMIL標準。另外，SVG文件還可嵌入JavaScript（嚴格地說，應該是ECMAScript）腳原本控制SVG對象
SVG圖形格式能夠方便的建立文字索引，從而實現基於內容的圖像搜索
SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內容的前提下能夠實現位圖格式中相似文字陰影的效果
SVG圖形格式能夠用來動態生成圖形。例如，可用SVG動態生成具備交互功能的地圖，嵌入網頁中，並顯示給終端用戶

SVG缺點

SVG有優勢也必定會有一些缺點，其缺點主要有：

如何和已經佔有重要市場份額的矢量圖形格式Adobe Animate競爭的問題。
SVG的本地運行環境下的廠家支持程度。
因爲原始的SVG檔是聽從XML語法，致使數據採用未壓縮的方式存放，所以相較於其餘的矢量圖形格式，一樣的文件內容會比其餘的文件格式稍大。Adobe所以使用gzip壓縮開發出壓縮的SVG檔格式，附檔名爲 .svgz，但此種文件格式除了Adobe旗下的軟件之外，未被普遍支持使用。
舊版的SVG Viewer沒法正確顯示出使用新版SVG格式的矢量圖形。

SVG在Web中的表現方式

在整個系列，咱們默認是瀏覽器對SVG支持，不作過多的討論。SVG提供了相似HTML的DOM形式。衆所周知，HTML提供了標題、段落、表格等內容的元素。與此相似，在SVG中也提供了一些元素，好比用於定義圓、矩形、曲線和多邊形等。一個簡單的SVG文檔由<svg>根元素（至關於<html>根元素）和基本的形狀元素構成。另外還有一個<g>元素，用來把若干個基本形狀編寫成一個組。

對於Web頁面或Web應用程序中使用SVG，主要採起的方式由內聯到HTML和引用外部的獨立的.svg文件。對於內聯到HTML方式，能夠像咱們平時使用HTML元素同樣，直接在HTML代碼中使用<svg>和其相關的圖形元素。好比：

<svg width="100%" height="200">
   <rect width="100%" height="100%" fill="red"/>

   <circle cx="50%」 cy=「100」 r="80" fill="green"/>

   <text x="50%" y="125" font-size="60" text-anchor="middle">
</svg>

除此以外，你能夠把上面的<svg>的全部代碼複製到一個編輯器中，而後保存成一個.svg的文件。而後在HTML頁面中經過<img>、<object>和<iframe>元素引用到.svg文件。你也能夠在CSS中經過background-image和border-image這樣的屬性來引用獨立的.svg文件。用來裝飾HTML中的元素。並且你也能夠經過JavaScript動態建立SVG，並注入到HTML DOM中。這樣有一個優勢，能夠對瀏覽器使用替代技術，在不能解析SVG的狀況下，能夠替換建立的內容。

SVG文件類型

SVG也具備本身的文件類型格式。SVG文件主要有兩種形式。普通SVG文件是包含SVG標記的簡單文本文件。推薦使用.svg做爲此類文件的擴展名。

因爲在某些應用（好比地圖應用等）中使用時，SVG文件可能會很大，SVG標準一樣容許gzip壓縮的SVG文件。推薦使用.svgz做爲此類文件擴展名。使用gzip壓縮的SVG文件格式，須要注意服務器相關的配置。若是服務器配置錯誤會引發SVG加載失敗。不過這裏咱們不作過多的討論（在這方面我也是小白）。

SVG的種類

自從2003年成爲W3C推薦標準以來，最接近的「完整版」SVG版本是1.1版，它基於1.0版，而且增長了更多便於實現的模塊化內容，SVG1.1的第二個版本在2011年成爲推薦標準，完整的SVG1.2原本是下一個標準版本，但它又被SVG2.0取代。SVG2.0正在制定當中，它採用了相似CSS3的制定方法，經過若干鬆散耦合的組件造成一套標準。

除了完整的SVG推薦標準，W3C工做組還在2003年推出了SVG Tiny和SVG Basic。這兩個配置文件主要瞄準移動設備。首先SVG Tiny主要是爲性能低的小設備生成圖元(好比移動端)，而SVG Basic實現了完整版SVG裏的不少功能，只是捨棄了難以實現的大型渲染（好比動畫）。2008年，SVG Tiny1.2成爲W3C推薦標準。

開始編寫SVG以前

市面上有不少應用軟件，好比Inkscape、Adobe Illustrator和Sketch等均可以支持SVG格式的文件，也可使用這些製圖軟件，繪製矢量圖形，而後導出SVG格式的文件（只是導出的SVG文件會產生必定的垃圾代碼，須要手工或者經過必定的工具來處理，這部分咱們後續將會涉及到）。可是此係列建議在學習過程當中使用文本編輯器。由於只有手動去寫SVG代碼，才能更好的理解SVG內部的原理。這也是咱們學習SVG的最終目標。

各類瀏覽器對SVG的渲染是有所差別的，但後系的SVG只在Chrome瀏覽器（固然後續會研究SVG在手淘這樣的APP中的應用）。其次，還能夠將JavaScript和CSS相關的技術結合一塊兒來用SVG。這將是咱們最期待，也是將是最有意思的一部份內容。好比怎麼經過CSS來控制SVG的風格，怎麼經過JavaScript來更好的控制SVG的動畫。

在正式開始以前，你須要基本掌握HTML這樣的標記語言，最好是對XML有必定的瞭解，若是你和我同樣對XML不是很熟悉，那麼在手動編寫SVG代碼時須要記住：