[發明專利]一種SVG資源反向復用的方法和裝置

在審

• 申請號: 202211093324.5
• 申請日: 2022-09-08
• 公開（公告）號: CN115587265A
• 公開（公告）日: 2023-01-10
• 發明（設計）人: 楊明翔;李毅;王彩麗;李繁毅;楊曉靜;李海濤;李琦;柯曾勇
• 申請（專利權）人: 烽火通信科技股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F9/451;G06F9/455;G06F16/56;G06F16/58
• 代理公司: 深圳市六加知識產權代理有限公司 44372
• 代理人: 許銓芬

本發明公開了一種SVG資源反向復用的方法和裝置，包括：獲取SVGSymbol圖形，從所述SVG Symbol圖形中提取至少一個DOM片段，并基于所述DOM片段構建片段庫；從所述片段庫中獲取與業務請求相匹配的原始DOM片段；根據業務請求對所述原始DOM片段進行處理，得到靜態圖形；將所述靜態圖形應用到所述業務請求中。在本發明中，在大規模使用SVG Symbol圖形的場景中，從SVG Symbol圖形中提取DOM片段，根據業務請求將DOM片段轉換為靜態圖形，實現了對SVG Symbol圖形的反向復用，可以指數級減少靜態圖形資源的HTTP請求數量和資源大小，提高了界面的請求、渲染性能。

技術領域

本發明屬于Web技術領域，更具體地，涉及一種SVG資源反向復用的方法和裝置。

背景技術

目前，如圖1所示，傳統的SVG(Scalable Vector Graphics，可縮放矢量圖形)圖形應用模型包括如下兩種：方式一，以SVG Symbol為基礎構建Vue、React、Angular組件，再以組件形式使用；方式二，以靜態圖形資源的方式去使用，靜態圖形資源根據資源大小閾值在應用時，小圖形轉成base-64資源形式使用，大圖形保持靜態資源鏈接形式使用。

目前SVG Symbol圖形的傳統應用模型，在實際應用場景中存在以下不足：

SVG Symbol構建組件應用(方式一)和靜態圖形資源方式應用(方式二)，兩種應用方式不能互通，即：同一個圖形必須使用兩種應用方式應用時，必須引入兩份相同的圖形，導致出現資源冗余。

在大規模使用圖形的畫布(Canvas)場景中，只能用靜態圖形資源方式，導致存在大量HTTP請求來獲取靜態圖形資源影響界面性能。

此外，同一個圖形在應用場景上可能存在多種變種，即在同一個圖形的基礎上小幅度修改采色、大小、文本等要素來滿足應用場景。在傳統應用模式下必須提前準備好多份圖形資源來切換使用，增大了圖形資源的冗余。

發明內容

針對現有技術的以上缺陷或改進需求，本發明提供了一種SVG資源反向復用的方法和裝置，其目的在于對SVG Symbol圖形進行反向復用，圖形的單一使用方式變成可以衍生變形，增強圖形復用率，由此解決同一個圖形不能應用在不同的應用方式中，造成圖形冗余的技術問題。

為實現上述目的，按照本發明的一個方面，提供了一種SVG資源反向復用的方法，包括：

獲取SVG Symbol圖形，從所述SVG Symbol圖形中提取至少一個DOM片段，并基于所述DOM片段構建片段庫；

從所述片段庫中獲取與業務請求相匹配的原始DOM片段；

根據業務請求對所述原始DOM片段進行處理，得到靜態圖形；

將所述靜態圖形應用到所述業務請求中。

進一步地，所述從所述片段庫中選取與場景請求相匹配的原始DOM片段包括：

對所述業務請求進行解析，得到圖形所對應的symbol ID；

根據所述symbol ID對所述片段庫進行訪問，以選取攜帶有所述symbol ID的DOM片段，該DOM片段為所述原始DOM片段。

進一步地，所述根據業務請求對所述原始DOM片段進行處理，得到靜態圖形包括：

對所述業務請求進行解析，得到圖形所對應的配置要素；

基于所述配置要素對所述原始DOM片段進行修改，得到目標DOM片段；

將所述目標DOM片段轉換為靜態圖形。

進一步地，所述將所述目標DOM片段轉換為靜態圖形包括：