Canvas VS . SVG

SVG

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

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

在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

SVG 的優(yōu)勢

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

• SVG 圖像可通過文本編輯器來創(chuàng)建和修改

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

• SVG 是可伸縮的

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

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

Canvas

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

Canvas 是逐像素進(jìn)行渲染的。

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

JPEG

JPEG是一種廣泛適用的壓縮圖像標(biāo)準(zhǔn)方式。

優(yōu)點(diǎn)：攝影作品或?qū)憣?shí)作品支持高級(jí)壓縮。

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

支持交錯(cuò)（對(duì)于漸近式JPEG文件）。

廣泛支持Internet標(biāo)準(zhǔn)。

缺點(diǎn)：有損耗壓縮會(huì)使原始圖片數(shù)據(jù)質(zhì)量下降。

當(dāng)您編輯和重新保存JPEG文件時(shí)，JPEG會(huì)混合原始圖片數(shù)據(jù)的質(zhì)量下降。這種下降是累積性的。

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

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

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

GIF主要分為兩個(gè)版本，即GIF 89a和GIF 87a

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

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

Png

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

        特征

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

        無損壓縮 PNG文件采用LZ77算法的派生算法進(jìn)行壓縮，其結(jié)果是獲得高的壓縮比，不損失數(shù)據(jù)。它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，因而對(duì)圖像的顏色沒有影響，也不可能產(chǎn)生顏色的損失，這樣就可以重復(fù)保存而不降低圖像質(zhì)量。

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

        更優(yōu)化的網(wǎng)絡(luò)傳輸顯示 PNG圖像在瀏覽器上采用流式瀏覽，即使經(jīng)過交錯(cuò)處理的圖像會(huì)在完全下載之前提供瀏覽者一個(gè)基本的圖像內(nèi)容，然后再逐漸清晰起來。它允許連續(xù)讀出和寫入圖像數(shù)據(jù)，這個(gè)特性很適合于在通信過程中顯示和生成圖像。

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

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

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

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

        支持圖像亮度的Gamma校準(zhǔn)信息。

        支持存儲(chǔ)附加文本信息，以保留圖像名稱、作者、版權(quán)、創(chuàng)作時(shí)間、注釋等信息。

        漸近顯示和流式讀寫，適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。

        使用CRC防止文件出錯(cuò)。

        最新的PNG標(biāo)準(zhǔn)允許在一個(gè)文件內(nèi)存儲(chǔ)多幅圖像。

Canvas 與 SVG 的比較

Canvas

• 依賴分辨率

• 不支持事件處理器

• 弱的文本渲染能力

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

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

SVG

• 不依賴分辨率

• 支持事件處理器

• 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

• 復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）

• 不適合游戲應(yīng)用