[发明专利]一种生成并上传SVG雪碧图的方法

说明书

本发明公开了生成并上传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图标的设计本身。

附图说明