H5和SVG的最大區別是什么？（ 計育韜老師高校公益巡講答疑實錄2024）
這是計育韜老師第 8 次開展面向全國高校的新媒體技術公益巡講活動了。而在每場講座尾聲，互動答疑環節往往反映了高校師生當前最普遍的運營困境，特此計老師在現場即興答疑之外，會盡量選擇有較高價值的提問進行文字答疑梳理。
*本輪巡講主題除了涉及 SVG 交互外，還包含了新媒體中 AI 人工智能工作流的詳解，為高校師生帶來包括與多家央媒的項目合作經驗和復旦大學本校的案例分析，因此答疑梳理中也會出現與 AI 相關的知識點，如有任何偏頗之處也歡迎在評論區斧正。
第十二期計育韜老師繼續梳理了在河南高校的講座中，關于「H5和SVG的最大區別和各自優勢是什么？」的問題，一起來看看計育韜老師的答復吧！
技術框架范疇不同
H5 是「HTML5 移動端交互頁面」被約定俗成的一種行業縮寫，從技術本質上講其范疇為第五代互聯網超文本標記語言；而 SVG 本身作為一種圖像格式，它這是 H5 內可被調用的一種視覺載體。
SVG 誕生于 HTML 的前身 XML 時代，因其小巧的特性和流暢的動畫而被互聯網兼容，并在數據可視化領域擁有當仁不讓的地位，與 JS 組合成為 Data Visualization 的主流范式。所以我們既不可粗略地將 SVG 包含在 H5 的概念之內，也無法強行從技術框架層面講他們相提并論。
而在當下中國融媒體生態中，SVG 甚至已經突破了傳統意義上 SVG 格式自身的定義，不限于矢量坐標式圖像的應用，而是廣泛通過<foreignObject>和<image>引入位圖要素，讓設計師在其應用過程中得以大展身手。
應用場景邊界不同
當我們試圖將兩者「比較」時，本質上是為了從功用層面進行更好的區分。那么它的應用場景邊界就非常值得同學們準確掌握：
1）SVG 無法完成數據回傳，僅限于效果的渲染與表達。
因此在 SVG 大行其道的今日，計育韜老師依然會與品牌合作開展包括如活動票選、項目展示與報名等目的的 H5 開發，因為這些頁面交互一定涉及數據庫和數據的采集&反饋。
2）SVG 的商品信息展示比 H5 更直達。
H5 在朋友圈的流轉方式是非常受限的，與其在圖文內通過外鏈/二維碼/閱讀原文等形式指引，確實不如直接在圖文中嵌入 SVG 更符合品牌方的轉化訴求。在動畫要求并不極端的情況下，SVG 足以完成大多數商詳標配的動畫效果。
3）SVG 的動畫上限低于 H5。
微信圖文內的 SVG 動畫渲染是有特定限制的，這些限制不僅包括如《微信下 SVG AttributeName 白名單》，還包括微信團隊對 JS、id 傳參、CSS 動畫等層面的限制影響，因而其動畫能力上限遠遠不及 H5。尤其一些如 3D、全景等 JS 特性頁面，是 SVG 完全無法企及的效果類型，依然要基于 H5 開發得以實現。
所以，理解了功用層面的區別，我們就理解所謂「H5和SVG的區別」。技術表達形式，形式服務內容——為內容匹配最恰當的形式，并依此調用最匹配的技術，是融媒體交互開發最重要的設計意識。
后續答疑預告
#如果要基于交互設計創意應該做哪些準備？
#可以運用AI寫SVG代碼嗎？
#SVG可以跨平臺應用嗎？
#做一篇有趣的SVG如何獲取靈感？
#排版的審美如何培養？
#SVG技能對應的求職崗位是哪些？
如有意向報名承辦巡講的高校站點，歡迎查看「報名須知」并在評論區留下你的聯系方式和組織信息，助教老師將協助前期對接工作。
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）