apng以更高的色彩呈現、更小的體積，取代了gif，成為了許多精簡建站者動圖的首選。
svg作為以文本形式保存的矢量圖標準，原生支持<animate/>標籤，使其擁有最高的動畫自由度。
那麼二者的區別何在？分別適用於哪種情況？下面我就來講解一下。
首先講一下甚麼是圖片
可能你會産生疑感：甚麼？你要跟我講甚麼是圖片？！我每天都在看圖片，拍照是圖片，上網購物看圖片，進實體店牆上也都是圖片，買的東西包裝袋上都是圖片，買東西付現金錢上印的都是圖片，我還不知道甚麼是圖片？
cout << "滾" << endl;
滾回來。你說說看甚麼是圖片？
- 圖片其實就是相對於文字和聲音的第三種表達方式。
- 圖片又稱「影像」。
- 實際上，文字也屬於圖片的一種。
從人的生理解度來看，當人睜開眼睛，所有的信息都通過圖像的方式傳達，或說以圖片的形式呈現。
因此，圖片是一種基於人體生理上的一種最基礎的表達方式和信息呈現方式。圖片是一種必要的、重要的表現技巧。很多時候，某些事理邏輯只能用圖片來闡述。
甚麼是動畫？
動畫，臺灣人說視訊，大陸人說視頻。都是一個概念。
只要是連續多張圖片不停的替換，人眼就感覺它動了，這就是動畫。
當我們看見自己的手在動，或者敵不動我動，我們看到的都是動畫。
有很多時候，僅用一張靜止的圖片，已經無法涵蓋所有你想表達的信息，你需要把多個相關的、有遞進關係的圖片串聯起來，做成一個動圖。
或者，你希望網站或文章顯的生動一點，使人看了更喜歡，更吸引人，那麼你也需要動圖。
這就是為甚麼，現在最主流的媒體形式是視頻。如果你的思想還停留在上個世紀，單純希望用靜止的文字和圖片去講解你的産品或理念，那你已經完全out了。
適用於apng的情況
比如當我想介紹我的wordpress的編輯器：
當圖片中的元素已經多到你不可能逐一創建時，這時你最好的辦法是，截五張圖，之後製作成一張apng動畫。
這種動畫製作方法，經過編排，也能達到專業效果。
對於「精簡」建站，過高的體積，過多的內容，都是不必要的。舉個例子，你現在去垃圾堆拍張照片，圖片確實包含了大量信息，然而都是垃圾信息。
這就是為甚麼我前面要先講「甚麼是圖片」，當你明白了圖片是用來表達的，你就不會無緣無故上傳一張與你的文章無關，與你所要表達的信息無關的圖片。
將你所想表達的事物選取出來，調好用色數量，壓縮進一張apng，僅需要幾十k的體積便能美觀的將你所要講的內容完整表達。
apng的製作
寡人製作了一個apng合成工具，同時還能設置色彩數量。
色彩數量越少，則圖像體積越小。
svg的適用情況
svg一般用於簡單的圖形或文字邏輯表達。如：
上圖是一個最簡單的幾何問題，如果單純用文字表達，也會使人聽的一頭霧水。
不止如此，大家在寫文章表述觀點時，應儘可能多的使用圖片/動畫來說明。這樣別人就可以清晰簡單的理解。
svg動圖的製作
電腦端一般使用inkscape，這是一個開源免費的矢量圖製作軟體。經過多年的應用，寡人已經非常熟練使用了，如果你還沒用過，趕緊找教程來學一下基本操作。
android上的一款app叫simplector，也是一款非常優秀的svg製作軟體。它能夠完整的製作一個svg圖的所有相關元素及屬性。
以上兩款svg軟件，我在用的過程中，都經歷過閃崩→資料丢失。矢量圖編輯軟體確實都挺容易閃崩的，各位注意實時保存。
svg動畫，主要用的是<animate/>標籤，你需要把.svg文檔當作文本打開，再在相應的地方插入這個標籤。當然這些svg的動畫標籤需要一定的學習才能掌握。
總結
動畫作為一種重要的表達類型，是文章創作者所必備的技能。
apng跟svg都是精簡動畫之王。如果使用得當，就能給網站文章增添色彩，使敍述更為生動有趣。