SVG（可縮放矢量圖形）

    SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標准組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標准。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。

 

    圖片的數字化。將圖片存儲為數據有兩種方案。其一為位圖，也被稱為光柵圖。即是以自然的光學的眼光將圖片看成在平面上密集排布的點的集合。每個點發出的光有獨立的頻率和強度，反映在視覺上，就是顏色和亮度。這些信息有不同的編碼方案，在互聯網上最常見的就是RGB。根據需要，編碼后的信息可以有不同的位(bit)數——位深。位數越高，顏色越清晰，對比度越高；占用的空間也越大。另一項決定位圖的精細度的是其中點的數量。一個位圖文件就是所有構成其的點的數據的集合，它的大小自然就等於點數乘以位深。位圖格式是一個龐大的家族，包括常見的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二種方案為矢量圖。它用抽象的視角看待圖形，記錄其中展示的模式而不是各個點的原始數據。它將圖片看成各個“對象”的組合，用曲線記錄對象的輪廓，用某種顏色的模式描述對象內部的圖案（如用梯度描述漸變色）。比如一張留影，被看成各個人物和背景中各種景物的組合。這種更高級的視角，正是人類看世界時在意識里的反映。矢量圖格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

矢量圖中簡單的幾何圖形，只需要幾個特征數值，就可以確定。比如三角形，只需要確定三個頂點的坐標。圓只需要確定圓心的坐標和半徑。描述它的函數已知的曲線也只需要幾個參數就能夠確定。如正弦曲線、各種螺線等等。如果用位圖記錄這些幾何圖案，則需要包含組成線條的各個像素的數據。除了大大節省空間，矢量圖還具有完美的伸縮性。因為記錄的是圖形的特征，圖形的尺寸任意變化時，都只是做着相似變換，不會出現模糊和失真。相反位圖的圖片放大到超出原有大小時，各個像素點之間出現空缺，即使用某種算法填充，也會出現模糊鋸齒等現象，不如矢量圖精確。因而矢量圖很適合用於記錄諸如符號、圖標等簡單的圖形。而位圖則適合於沒有明顯規律的、顏色豐富細膩的圖片。

 

SVG 有一些預定義的形狀元素，可被開發者使用和操作：

• 矩形 <rect>
• 圓形 <circle>
• 橢圓 <ellipse>
• 線 <line>
• 折線 <polyline>
• 多邊形 <polygon>
• 路徑 <path>

什么是SVG？

　　SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
　　SVG 用來定義用於網絡的基於矢量的圖形
　　SVG 使用 XML 格式定義圖形
　　SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
　　SVG 是萬維網聯盟的標准
　　SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體

 Canvas 和 SVG 的區別：
　　SVG
　　　　SVG 是一種使用 XML 描述 2D 圖形的語言。
　　　　SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
　　　　在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
　　　　特點：
　　　　 　　不依賴分辨率
　　　　 　　支持事件處理器
　　　　 　　最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
　　　　　　 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
　　　　 　　不適合游戲應用
　　Canvas
　　　　Canvas 通過 JavaScript 來繪制 2D 圖形。
　　　　Canvas 是逐像素進行渲染的。
　　　　在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
　　　　特點：
　　　    　　依賴分辨率
　　　　 　　不支持事件處理器
　　　　　　 弱的文本渲染能力
　　　　　　 能夠以 .png 或 .jpg 格式保存結果圖像

　　　　 　　最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

 

<svg width="100%" height="100%"  >
    <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
 
<img src="kiwi.svg" alt="新西蘭鷸鴕鳥">
<a href="/" class="logo" style="background: url(kiwi.svg); display: block;text-indent: -9999px;width: 100px;height: 82px;background-size: 100px 82px;"> 新西蘭 </a>

 

 圖標字體：

 

使用字體圖標的優勢

字體圖標除了圖像清晰度之外，比位圖還有哪些優勢呢。

適用性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標字體加載了，你的圖標就會馬上渲染出來，不需要下載一個圖像。

可擴展性：圖標字體可以用過font-size屬性設置其任何大小。這使您能夠隨時輸出不同大小的圖標，然而，使用位圖，你必須得為每個不同大小的圖像輸出一個不同文件。

靈活性：文字效果可以很容易地應用到你的圖標上，包括顏色，陰影和翻轉等效果。他們還可以在任何背景下顯示。

兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。

弊端：

1、瀏覽器將其視為文字進行抗鋸齒優化，有時得到的效果並沒有想象中那么銳利。 尤其是在不同系統下對文字進行抗鋸齒的算法不同，可能會導致顯示效果不同。

2、Icon Font 作為一種字體，Icon 顯示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產生影響，調整起來很不方便。

3、使用上存在不便。首先，加載一個包含數百圖標的 Icon Font，卻只使用其中幾個圖標，非常浪費加載時間。 如果是自己制作 Icon Font 以及把多個 Icon Font 中用到的圖標整合成一個 Font 也非常不方便。當然使用阿里UX矢量圖標庫可以解決這個問題

4、為了實現最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件。包括TTF、WOFF、EOT 以及一個使用 SVG 格式定義的字體。如果是自己制作的話，可能要頭疼死

參考：

http://www.w3school.com.cn/svg/index.asp

https://icomoon.io/

http://www.iconfont.cn/