原標題：SVG的雷，你踩過了沒？

隨著SVG互動布局的出現和在H5的應用越來越多，不少小伙伴們會想在秀米里上傳自己制作的SVG圖形。秀米的首頁頂部教程收錄了一篇關于SVG圖形的講解：「秀米的SVG圖片」，里面主要介紹了SVG圖形有放大縮小不失真的特性以及如何從Adobe Illustrator(下面簡稱Ai)導出“.svg”文件的方法。但是這個教程有兩個地方沒有展開講解：

1、SVG是怎么構成的？

2、SVG有哪些使用禁忌？

SVG圖片并不是單純地把任意一個圖片文件的后綴改成".svg"就能轉換出來的。秀米的小伙伴們在上傳或者使用SVG的過程中經常會遇到像“該矢量圖形中包含不支持的內容”，“使用了過多SVG圖形無法同步”這樣的問題，那么本篇就來給大家排排雷。

01

SVG如何構成

熟知Ai或者其他矢量圖制作工具的小伙伴應該比較了解，制作一個矢量圖形，就是將多個錨點圍成一個形狀，這個形狀可以添加填充色或者是邊框：

那么換句話說，矢量圖就是由多個錨點圍成的一個或者多個形狀的集合。矢量圖和位圖(常見的位圖如JPG、PNG)最明顯的區別就是矢量圖有錨點，而位圖沒有：

矢量圖有錨點

位圖沒有錨點

常見的矢量圖文件格式有 “.svg”、“.ai”、“.eps”，而在秀米和公眾號上適用的矢量圖格式只有“.svg”。

02

SVG有哪些使用禁忌

錨點特別多的SVG不能用

每一篇公眾號圖文，其實相當于一個網頁頁面，除了表面上能看到的正文字數之外，其實公眾號圖文還會統計背后的代碼字數。不少小伙伴在使用了一些復雜SVG圖形后，同步到公眾號時會出現這樣一個提示：

這時小伙伴可能會納悶：我既沒有寫太多的字數，也沒有用過多圖形，怎么就無法同步呢？如果是用了SVG圖形，出現了這個報錯，但卻又不是因為用了過多的SVG圖形，那么絕對是因為所用的SVG圖形包含了過多的錨點。有些錨點很復雜的SVG圖形表面上看起來是這樣的：

光看著就有數不清的錨點

而這些錨點的html代碼形式更是夸張，這一個花的SVG代碼多達兩萬多字：

別說網頁會崩潰，我看著都崩潰了

雖然舉了個夸張的例子，可能一般情況下也碰不著，但還是奉勸大家，盡量不要用錨點過于復雜的SVG圖形。

SVG的描邊是無法改色的

有些小伙伴在制作SVG圖形時，會給圖形加上描邊，例如像下方的星星圖形有一圈黑色的描邊：

當這個圖形上傳到秀米后，描邊是可以正常顯示的，但是在秀米的SVG換色功能里卻不能改色。如果希望描邊是可以改色的話，解決方法很簡單。在Ai里選中這個圖形，然后執行對象→路徑→輪廓化描邊：

這個操作可以讓原來的描邊轉變成圖形，上傳到秀米后就能改色了。

SVG不支持字體

小伙伴制作的SVG圖形中，可能包含了一些未轉化成輪廓的文字。大多數字體在秀米和微信公眾號上都是不支持的，但如果想在SVG圖形中保留字體的話，可以給文字創建輪廓。在Ai創建字體輪廓的方法是，選中文字，右鍵菜單中選擇“創建輪廓”：

溫馨提醒各位，使用字體前記得了解清楚這款字體是否可商用哦。

SVG中不能包含位圖和剪切蒙板

有些小伙伴可能會用到一些帶圖案的JPG或者是PNG格式的圖片作為SVG圖形的底紋，雖然生成的文件是“.svg”沒錯，但是網頁上不支持含有位圖的“.svg”格式。同樣的將一個JPG或者是PNG文件強行保存為SVG文件也是不可行的，請務必記住這句話：網頁上只能識別SVG圖形中的錨點以及填充色！

同樣在SVG格式中不支持的內容還有“剪切蒙板”。例如有些圖形用了剪切蒙板來裁剪，那么你只能釋放剪切蒙板：

釋放剪切蒙板后

下一步

就想辦法做個一樣的

小結

SVG圖形是由多個錨點圍成一個或者是多個圖形的集合；制作SVG的時候，盡量不要用過多的錨點，圖形的描邊以及字體可以在Ai中先輪廓化之后再使用。位圖和剪切蒙板SVG圖形中是不支持的，切記只有錨點和圖形的填充色能被網頁識別。看完這篇排雷帖如果想繼續了解如何從Ai導出SVG的話，可以繼續閱讀下方這份陳年舊帖：

秀米的SVG圖片

模板

精選

急診

更新

支招

不點“好看”，領導怎么知道你上進？返回搜狐，查看更多

責任編輯：