計育韜｜微博SVG交互開發限制性規則｜內參

原創贊收藏評論

舉報 2024-05-15

掃描,分享朋友圈

0 (5).jpeg

首先很高興在我們的推動下，一大批好朋友包括資深開發者、頂尖運營人都陸續加入了微博的 SVG 內測活動。此外，我也協調支持了包括秀米、135 編輯器兩方共同參與，以期官方編輯器能快速入局為更普遍的用戶提供好模版服務。

但是既然稱之為「內測」，必定有尚不確定的版本特性會不斷變更。例如在 V3 新版發布前夕，我曾就微博 SVG 編輯器 30 萬字符限制的特性向微博官方提出了開放建議，希望可以提供約 80 萬的容量。因此在編輯器更新后，我們收到了微博官方的信息，已將字符限制上調到 100 萬，在此也為微博團隊的誠意點贊！

那么除此以外，當前在微博 SVG 生態內的開發還有哪些限制性規則？

鑒于微博 SVG 整體技術的白名單尚未確定，我撰寫此帖為內參，也匯總了多位資深開發者好友的探討，相信可以為未來的入局者們提供積極的參考價值。知乎帖和微博帖將保持更新，公眾號圖文則于評論區更新，以不斷納入新的平臺側技術變動情況。

微博 SVG 編輯器的代碼字符量限制，當前為 100 萬字符。對于是否超過了字符限制，請以編輯時下方的浮窗提示為準。
微博內的 HTML-CSS3 和 XML-CSS 書寫都處于嚴格語法環境中，這意味著包括空格、分號、駝峰命名等必須遵循最規范的書寫格式，否則將被抹去。
微博頭條文章在「深色模式」（微博自身設置中的「深色模式」）下表現并不完全穩定，會出現尚不明原因的 fill 填充色表現異常。
經過我的初步不完全測試，微博對頭條文章內圖像壓縮的效果相對優于微信公眾號，上傳的初始限制為 20M，對于一般合理尺寸（如 1080 寬）的圖像，壓縮率約在 93%；對于橫向超寬圖，微博會將其壓縮至 1080 寬。歡迎更多感興趣的同學進行具體的測試活動！
請開發者注意，微博 SVG 對 max-width 參數的具體表現與微信公眾號有顯著差異，特別是涉及開發伸長-回縮的效果時，請不要采用常規的 max-width: none !important 寫法，而是將實際展開量的具體數值同步給 max-width，否則會出現回縮瞬間圖文下方瞬間轉化為大片空白的肉眼感官，我在此暫且將其稱之為「超量伸長」。
目前無法以 <style> 形式先描述屬性，再構建 HTML 結構，<style> 會被抹去。
對于 AttributeName 當前微博暫無「白名單」型限制，因此在微博 SVG 中可以操控的動畫類型會比微信公眾號生態內更多。
微博普通正文內的多媒體不可在微博 SVG 編輯器內插入，即便采用 Chrome 調試工具注入也會被抹去，這就意味著當下并不能實現如音頻、視頻關聯 SVG 交互動畫的形式。
微博 SVG 編輯器內可以直接復制微信公眾號端圖文，雖然會短暫出現「圖片來自微信公眾號無法顯示」的畫面提示，但稍等片刻就會轉化為微博圖床地址。
pointer-events 屬性曾在非 SVG 結構內被禁用過，或出于對微博原生組件干擾的考慮？（存疑）因此仍然建議廣大開發者在非必要情況下，減少 pointer-events 的使用，轉而基于 id 能力更科學地管理動畫代碼。
逆向滑動 dir="rtl" 不可應用，會被抹去。
對于存在圖片上傳失敗情況，目前并沒有非?？梢暬膯螐垐D片地址替換方法，建議壓縮對應圖片重新操作。