[發明專利]一種生成并上傳SVG雪碧圖的方法

有效

• 申請號: 202110338566.5
• 申請日: 2021-03-30
• 公開（公告）號: CN112989242B
• 公開（公告）日: 2023-06-13
• 發明（設計）人: 陳恒君;李駿
• 申請（專利權）人: 多點（深圳）數字科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/903
• 代理公司: 成都三誠知識產權代理事務所(普通合伙) 51251
• 代理人: 成實

本發明公開了生成并上傳SVG雪碧圖的方法，包括以下步驟：步驟1：在Figma中選中要生成SVG文件的所有SVG圖標；步驟2：通過Figma?API獲取到選中的所有SVG圖標；步驟3：遍歷獲取到的所有SVG圖標，并通過exportAsync獲取到所有SVG圖標的字節數組，將獲取到的字節數組分別轉成對應的SVG字符串；步驟4：通過正則表達式分別抽取SVG字符串中的SVG屬性字符串和SVG內容字符串，并生成smbol字符串；步驟5：將獲取到的所有的SVG圖標所生成的smbol字符串進行合并，得到SVG文件；步驟6：通過Web?API?fetch將SVG文件上傳到服務器。本發明將多個SVG圖標合并為一個SVG文件，在Web?Application使用時將有效較少http?request次數，提高瀏覽器的渲染速度。

技術領域

本發明涉及計算機技術領域，具體是指一種生成并上傳SVG雪碧圖的方法。

背景技術

SVG是建立圖標系統的首選方案，但在Web應用中大量的svg?icon，會引起httprequest較多，從而阻塞瀏覽器的渲染，降低瀏覽器的渲染速度。因此，如何減少icon的httprequest個數，提高瀏覽器的渲染速度，則是目前的當務之急。

發明內容

本發明的目的在于解決上述問題，提供一種能夠減少icon的http?request個數，提高瀏覽器渲染速度的生成并上傳SVG雪碧圖的方法。

本發明的目的通過下述技術方案實現：一種生成并上傳SVG雪碧圖的方法，包括以下步驟：

步驟1：在Figma中選中要生成SVG文件的所有SVG圖標；

步驟2：通過Figma?API獲取到選中的所有SVG圖標；

步驟3：遍歷獲取到的所有SVG圖標，并通過exportAsync獲取到所有SVG圖標的字節數組，將獲取到的字節數組分別轉成對應的SVG字符串；

步驟4：通過正則表達式分別抽取SVG字符串中的SVG屬性字符串和SVG內容字符串，并生成symbol字符串；

步驟5：將獲取到的所有的SVG圖標所生成的symbol字符串進行合并，得到SVG文件；

步驟6：通過Web?API?fetch將SVG文件上傳到服務器。

進一步的，所述步驟1之前還包括在Figma中創建要生成SVG文件的SVG圖標。

所述步驟5之后還包括對SVG文件進行命名。

所述步驟4中通過正則表達式/svg\s*([^]+)([\S\s]+)\/svg/i抽取SVG字符串中的SVG屬性字符串和SVG內容字符串。

所述步驟4中生成smbol字符串包括以下步驟：

A、循環使用正則表達式/(\w+)＝\([^]+)\/g對SVG屬性字符串進行匹配，初始化symbol屬性對象；

B、使用SVG內容字符串、初始化后的symbol屬性對象、SVG圖標的名稱，生成symbol字符串。

本發明與現有技術相比，具有以下優點及有益效果：本發明在Figma中選擇指定SVG圖標，遍歷Figma當前選取中的對象，調用exportAsync接口導出字節數組并轉化成svg字符串，接著抽取字符串的內容后合并成一個SVG文件后，調用fetch接口上傳到指定的服務器，其通過將多個SVG圖標合并為一個SVG文件，在Web?Application使用時將有效較少http?request次數，提高瀏覽器的渲染速度。另外，本發明通過Figma插件來合并SVG文件，其將設計師從創建編輯SVG后壓縮合成SVG雪碧圖并上傳到服務器的繁瑣且重復過程中解放出來，并能減少設計師和開發人員的溝通，讓設計師們更專注于SVG圖標的設計本身。

附圖說明