在之前的七夕主題中，在留言反饋中經(jīng)常會(huì)有人說："這個(gè)怎么又是圖片，還以為是畫出來的"。其實(shí)我很想說：靠人工是很難畫的。當(dāng)然基于七夕的優(yōu)化，我在圣誕中還是特意引入的一部分svg與canvas來做一些圖形操作。SVG是基于xml標(biāo)記語(yǔ)言可縮放矢量圖形，支持無(wú)損縮放的同時(shí)也因?yàn)槭莇om節(jié)點(diǎn)，所以也支持事件，但是弊端也很明顯，dom的數(shù)量非常大，復(fù)雜度高，渲染就比較慢了，也不適合游戲的開發(fā)，一般會(huì)用canvas之后會(huì)介紹

SVG有什么優(yōu)勢(shì)？

• 文件體積小，能夠被大量的壓縮
• 圖片可無(wú)限放大而不失真(矢量圖的基本特征)
• 在視網(wǎng)膜顯示屏上效果極佳
• 能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果

SVG的知識(shí)點(diǎn)太多了，這里不打算講知識(shí)點(diǎn)，相信整個(gè)教程就算講解SVG都不夠，所以希望大家查閱相關(guān)的知識(shí)點(diǎn)。

圣誕主題中只引入一個(gè)簡(jiǎn)單的五角星的制作，這個(gè)其實(shí)可以通過工具生成，通過修正viewbox實(shí)現(xiàn)縮放

更詳細(xì)的教程：SVG