Canvas VS . SVG

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

SVG 的優勢

與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于：

• SVG 圖像可通過文本編輯器來創建和修改

• SVG 圖像可被搜索、索引、腳本化或壓縮

• SVG 是可伸縮的

• SVG 圖像可在任何的分辨率下被高質量地打印

• SVG 可在圖像質量不下降的情況下被放大

Canvas

Canvas 通過 JavaScript 來繪制 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

JPEG

JPEG是一種廣泛適用的壓縮圖像標準方式。

優點：攝影作品或寫實作品支持高級壓縮。

利用可變的壓縮比可以控制文件大小。

支持交錯（對于漸近式JPEG文件）。

廣泛支持Internet標準。

缺點：有損耗壓縮會使原始圖片數據質量下降。

當您編輯和重新保存JPEG文件時，JPEG會混合原始圖片數據的質量下降。這種下降是累積性的。

JPEG不適用于所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

GIF分為靜態GIF和動畫GIF兩種，擴展名為.gif，是一種壓縮位圖格式，支持透明背景圖像，適用于多種操作系統，“體型”很小，網上很多小動畫都是GIF格式。其實GIF是將多幅圖像保存為一個圖像文件，從而形成動畫，最常見的就是通過一幀幀的動畫串聯起來的搞笑gif圖，所以歸根到底GIF仍然是圖片文件格式。

但GIF只能顯示256色。和jpg格式一樣，這是一種在網絡上非常流行的圖形文件格式。

GIF主要分為兩個版本，即GIF 89a和GIF 87a

GIF 87a：是在1987年制定的版本

GIF 89a：是1989年制定的版本。在這個版本中，為GIF文檔擴充了圖形控制區塊、備注、說明、應用程序編程接口等四個區塊，并提供了對透明色和多幀動畫的支持。

Png

便攜式網絡圖形（Portable NetworkGraphics）是一種無損壓縮的位圖圖形格式。其設計目的是試圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。PNG的名稱來源于“可移植網絡圖形格式(Portable Network Graphic Format，PNG)”，也有一個非官方解釋“PNG's NotGIF”。PNG使用從LZ77派生的無損數據壓縮算法，一般應用于JAVA程序、網頁或S60程序中，原因是它壓縮比高，生成文件體積小。

        特征

        體積小網絡通訊中因受帶寬制約，在保證圖片清晰、逼真的前提下，網頁中不可能大范圍的使用文件較大的bmp格式文件。

        無損壓縮 PNG文件采用LZ77算法的派生算法進行壓縮，其結果是獲得高的壓縮比，不損失數據。它利用特殊的編碼方法標記重復出現的數據，因而對圖像的顏色沒有影響，也不可能產生顏色的損失，這樣就可以重復保存而不降低圖像質量。

        索引彩色模式 PNG-8格式與GIF圖像類似，同樣采用8位調色板將RGB彩×××像轉換為索引彩×××像。圖像中保存的不再是各個像素的彩色信息，而是從圖像中挑選出來的具有代表性的顏色編號，每一編號對應一種顏色，圖像的數據量也因此減少，這對彩×××像的傳播非常有利。

        更優化的網絡傳輸顯示 PNG圖像在瀏覽器上采用流式瀏覽，即使經過交錯處理的圖像會在完全下載之前提供瀏覽者一個基本的圖像內容，然后再逐漸清晰起來。它允許連續讀出和寫入圖像數據，這個特性很適合于在通信過程中顯示和生成圖像。

        支持透明效果 PNG可以為原圖像定義256個透明層次，使得彩×××像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。這種功能是GIF和JPEG沒有的。

        PNG同時還支持真彩和灰度級圖像的Alpha通道透明度。[4]

        最高支持24位真彩×××像以及8位灰度圖像。

        支持Alpha通道的透明/半透明特性。

        支持圖像亮度的Gamma校準信息。

        支持存儲附加文本信息，以保留圖像名稱、作者、版權、創作時間、注釋等信息。

        漸近顯示和流式讀寫，適合在網絡傳輸中快速顯示預覽效果后再展示全貌。

        使用CRC防止文件出錯。

        最新的PNG標準允許在一個文件內存儲多幅圖像。

Canvas 與 SVG 的比較

Canvas

• 依賴分辨率

• 不支持事件處理器

• 弱的文本渲染能力

• 能夠以 .png 或 .jpg 格式保存結果圖像

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

SVG

• 不依賴分辨率

• 支持事件處理器

• 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）

• 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）

• 不適合游戲應用