[发明专利]一种SVG资源反向复用的方法和装置

说明书

本发明公开了一种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片段转换为静态图形包括：