[发明专利]一种处理可缩放矢量图形图标的方法和装置

说明书

本发明公开了一种处理可缩放矢量图形图标的方法和装置，涉及计算机技术领域。该方法的一种具体实施方式包括：获取页面待加载的一个或多个可缩放矢量图形图标，所述可缩放矢量图形图标具有属性和内容；根据所述可缩放矢量图形图标的属性和内容，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标；在所述可缩放矢量图形图标的内容中含有一个或多个复用元素的情况下，所述可缩放矢量图形图标对应的所述对象中的所述复用元素具有唯一标识。该实施方式防止了不同的可缩放矢量图形图标之间相互影响，降低了页面展示错乱的可能性。

技术领域

本发明涉及计算机技术领域，尤其涉及一种处理可缩放矢量图形图标的方法和装置。

背景技术

在页面开发过程中，为了提高页面的展示效果，往往会加载一些图标，如可缩放矢量图形(Scalable Vector Graphics，SVG)、JPG、PNG等各种格式的图标。其中，由于可缩放矢量图形图标使用XML格式定义，任何文本编辑器都可以对它进行编辑，且SVG图标在放大或改变尺寸的情况下其图形质量不会有所损失。因此，为了保证页面展示的清晰度，页面中常加载可缩放矢量图形图标进行展示。

由于可缩放矢量图形图标中的内容可能含有复用元素，即可重复使用的元素，且由于不同可缩放矢量图形图标设计者不同，在设计可缩放矢量图形图标时使用的不同复用元素对应的名称或标识可能相同，导致在页面中引用的多个可缩放矢量图形图标的内容中含有相同名称的复用元素时，不同的可缩放矢量图形图标之间相互影响，容易使页面显示错乱。

防止不同的可缩放矢量图形图标之间相互影响，现有技术中至少存在以下技术问题：在设计者设计可缩放矢量图形图标时进行处理，无法普及、难度较大；由使用者手动对可缩放矢量图形G图标进行处理，但耗时久，且易出错。

发明内容

有鉴于此，本发明提供一种处理可缩放矢量图形图标的方法和装置，能够实现对可缩放矢量图形图标中不同复用元素对应标识的自动处理，降低了人工的参与程度，效率高且不易出错可靠性高。

为实现上述目的，根据本发明的一个方面，提供了一种处理可缩放矢量图形图标的方法，包括：

获取页面待加载的一个或多个可缩放矢量图形图标，所述可缩放矢量图形图标具有属性和内容，所述属性指示了所述可缩放矢量图形图标的大小，所述内容指示了一个或多个构成所述可缩放矢量图形图标的元素及所述元素对应的标识；

根据所述可缩放矢量图形图标的属性和内容，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标；在所述可缩放矢量图形图标的内容中含有一个或多个复用元素的情况下，所述可缩放矢量图形图标对应的所述对象中的所述复用元素具有唯一标识。

可选地，根据所述可缩放矢量图形图标的属性和内容，使用Webpack生成与所述可缩放矢量图形图标对应的对象。

可选地，所述在所述可缩放矢量图形图标的内容中含有一个或多个复用元素的情况下，所述可缩放矢量图形图标对应的所述对象中的所述复用元素具有唯一标识，包括：

使用第一加载器，提取所述可缩放矢量图形图标的属性及内容；

使用第二加载器，遍历所述可缩放矢量图形图标的内容，根据所述复用元素的定义标签，获取所述内容中的一个或多个复用元素，其中，所述内容中具有所述定义标签的元素为复用元素；

为每一个所述复用元素生成新的唯一标识；

遍历所述可缩放矢量图形图标的内容，使用所述唯一标识替换所述内容中所述复用元素对应的原有标识，以生成新的内容；

根据所述新的内容及所述属性，生成与所述可缩放矢量图形图标对应的对象。

可选地，根据时间为每一个所述复用元素生成新的唯一标识。