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