一种处理可缩放矢量图形图标的方法和装置

摘要

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

说明书

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

可选地，遍历所述可缩放矢量图形图标的内容，根据所述复用元素对应的原有标识，确定所述内容中被使用的所述复用元素；

使用所述唯一标识替换所述内容中所述复用元素的原有标识，以生成新的内容。

为实现上述目的，根据本发明的另一个方面，提供了一种处理可缩放矢量图形图标的装置，包括：图标获取模块、图标处理模块；其中，

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

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

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

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

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

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

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

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

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

可选地，遍历所述可缩放矢量图形图标的内容，根据所述复用元素对应的原有标识，确定所述内容中被使用的所述复用元素；

使用所述唯一标识替换所述内容中所述复用元素的原有标识，以生成新的内容。

为实现上述目的，根据本发明的再一个方面，提供了一种用于处理可缩放矢量图形图标的服务器，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述处理可缩放矢量图形图标的方法中任一所述的方法。

为实现上述目的，根据本发明的又一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述处理可缩放矢量图形图标的方法中任一所述的方法。

上述发明的技术方案具有如下优点或有益效果：使用Webpack等处理所述可缩放矢量图形图标，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标，且在所述可缩放矢量图形图标具有一个或多个复用元素的情况下，所述对象中的所述复用元素具有新生成的唯一标识，使得处理后的一个或多个可缩放矢量图形图标中的不同的复用元素均具有不同的唯一标识，避免了不同可缩放矢量图形图标之间的影响，降低了页面展示错乱的可能性。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的处理可缩放矢量图形图标的方法的主要流程的示意图；

图2是根据本发明实施例的另一处理可缩放矢量图形图标的方法的主要流程的示意图；

图3是根据本发明实施例的处理可缩放矢量图形图标的装置的主要模块的示意图；

图4是本发明实施例可以应用于其中的示例性系统架构图；

图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的处理可缩放矢量图形图标的方法的主要流程示意图，如图1所示，该方法具体可以包括的步骤如下：

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

可缩放矢量图形图标(以下简称为SVG图标)具有清晰度高、易编辑等多种优点，因此，为丰富页面展示，在页面中常会加载一个或多个SVG图标。如采用ES6的方式在页面中引用SVG图标，以插入到页面中进行显示，具体地使用的代码示例如下：

import PptIcon from"@/image/newppt.svg"。

加载的每一个SVG图标均由一个或多个元素构成，如SVG图标中的环形、圆形、方形、三角形等多种元素，且一个SVG图标中可能含有多个可以重复使用的元素，即复用元素，除此之外，不同的SVG图标中可能含有相同或者不同的自定义的复用元素。因此，不同的SVG图标中含有的复用元素对应的标识或者名称可能相同，当在同一个页面中同时加载这些SVG图标时，则会造成页面显示混乱或者页面显示不完全、出错，因此需要对复用元素中的标识或者名称进行处理。SVG图标的属性则是指viewBox属性、xmlns属性等，其中，xmlns是一个命名空间的声明，viewBox通过横纵坐标、高度、宽度等定义了图形大小。

更进一步地，在页面开发过程中大多使用JavaScript编写页面，而加载的SVG图标则是非JavaScript编写的，因此，在页面中加载SVG图标时，需要对SVG图标进行加载编译，将SVG图标处理成JavaScript对象，使得页面可以显示加载的SVG图标。

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

可以理解的是，在SVG图标的内容中含有一个或多个复用元素的情况下，为保证生成的与SVG图标对应的JavaScript对象中的每一个不同的复用元素均具有不同的唯一标识，可以为每一个复用元素生成新的唯一标识，也可以保留部分复用元素的原有标识，同时更改部分复用元素的标识，以保证不通复用元素的标识的唯一性，以防止多个SVG图标之间的相互影响。

值得注意的是，在引用的SVG图标均不有复用元素的情况下，则不需考虑SVG图标之间的相互影响，则可以直接将SVG图标处理为JavaScript对象以供页面展示。

在一个优选的实施例中，根据所述可缩放矢量图形图标的属性和内容，使用Webpack生成与所述可缩放矢量图形图标对应的对象。

所谓Webpack是指一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当Webpack理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。Webpack自身只理解JavaScript，因此Webpack需要借助loader(加载器)让Webpack能够去处理那些非JavaScript文件。loader可以将所有类型的文件转换为Webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。本质上，Webpackloader将所有类型的文件，转换为应用程序的依赖图(和最终的bundle)可以直接引用的模块。因此，在一个优选的实施例中，可以通过Webpack loader，即使用处理SVG图标的加载器，将SVG图标处理为与页面适配的JavaScript对象。

可以理解的是，现有的Webpack的第一加载器处理SVG图标后，仅能得到SVG图标的属性及内容，因此需要使用预设的或者预先编写的第二加载器对SVG图标的属性及内容进行处理，即更改SVG图标中的复用元素的标识，使得所有SVG图标内容中的不同复用元素均具有不同的唯一标识。

更具体地，在所述可缩放矢量图形图标的内容中含有一个或多个复用元素的情况下，所述可缩放矢量图形图标对应的所述对象中的所述复用元素具有唯一标识，包括：使用第一加载器，提取所述可缩放矢量图形图标的属性及内容；使用第二加载器，遍历所述可缩放矢量图形图标的内容，根据所述复用元素的定义标签，获取所述内容中的一个或多个复用元素，其中，所述内容中具有所述定义标签的元素为复用元素；为每一个所述复用元素生成新的唯一标识；遍历所述可缩放矢量图形图标的内容，使用所述唯一标识替换所述内容中所述复用元素对应的原有标识，以生成新的内容；根据所述新的内容及所述属性，生成与所述可缩放矢量图形图标对应的对象。

复用元素的定义标签是指SVG图标中的defs标签，在SVG图标中使用defs作为被引用元素的容器实现对复用元素的多次使用，因此，在实际的处理过程中，可以通过SVG图标内容中含有的defs标签确定对应的复用元素，也即是说，SVG图标内容中凡是具有defs标签的元素即为复用元素。具体地，以通过defs标签获取的复用元素为A、B、C、D对应的标识分别为1、2、1、4为例进行说明，由于A、B、C、D分别为不同的复用元素，但是不同复用元素A与C却具有相同的标识“1”，因此需要更改复用元素的标识使不同的复用元素具有不同的标识：如更改复用元素C的标识为3，则更改后的复用元素A、B、C、D对应的标识为1、2、3、4，即不同具有不同的唯一标识；或者直接为复用元素A、B、C、D分别生成新的唯一标识201901、201902、201903、201904，使得不同的复用元素具有不同的唯一标识。

在一个优选的实施例中，根据时间为每一个所述复用元素生成新的唯一标识。由于时间可以精确到微秒、纳秒等级别，可以很好地保证了不同复用元素新生成的标识的唯一性，避免重复。

在一个优选的实施例中，遍历所述可缩放矢量图形图标的内容，根据所述复用元素对应的原有标识，确定所述内容中被使用的所述复用元素；使用所述唯一标识替换所述内容中所述复用元素的原有标识，以生成新的内容。也即是说，在使的不同复用元素均具有不同的唯一标识后，需要在页面引用的一个或多个SVG图标内容中，使用复用元素原有的标识，定位复用元素，然后使用新的唯一标识替换复用元素的原有的标识。具体地，以通过defs标签获取的复用元素为A，对应的标识为1，且复用元素A生成新的唯一标识201901为例进行说明，遍历SVG图标的内容，使用原有标识1定位内容中的复用元素A，并使用复用元素A的唯一标识201901替换复用元素的原有标识1，以得到含有复用元素唯一标识的新内容，进而保证了不同SVG图标的正常显示。

基于上述实施例，基于Webpack等处理所述可缩放矢量图形图标，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标，且在所述可缩放矢量图形图标具有一个或多个复用元素的情况下，所述对象中的所述复用元素具有新生成的唯一标识，使得处理后的一个或多个可缩放矢量图形图标中的不同的复用元素均具有不同的唯一标识，避免了不同可缩放矢量图形图标之间的影响，降低了页面展示错乱的可能性。

参见图2，在上述实施例的基础上，提供了另一种处理可缩放矢量图形图标的主要流程的示意图，该方法具体包括的步骤如下：

步骤S201，获取页面待加载的一个或多个可缩放矢量图形图标，，所述可缩放矢量图形图标具有属性和内容。

步骤S202，使用第一加载器，提取所述可缩放矢量图形图标的属性及内容。第一加载器即为Webpack中的对SVG图标进行处理的loader。

步骤S203，使用第二加载器，遍历所述可缩放矢量图形图标的内容，根据所述复用元素的定义标签，获取所述内容中的一个或多个复用元素，其中，所述内容中具有所述定义标签的元素为复用元素。第二加载器即为Webpack中的对SVG图标的内容继续进行处理的预设的或自行编写的loader。

步骤S204，为每一个所述复用元素生成新的唯一标识。可以根据时间为每一个复用元素生成新的唯一标识，也可以根据其他任何可区别复用元素的信息，如阿拉伯数字、字母等为每一个复用元素生成不同的唯一标识。

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

步骤S206，根据所述新的内容及所述属性，生成与所述可缩放矢量图形图标对应的对象。新生成的与所述可缩放矢量图形图标对应的对象即为JavaScript对象，且该对象中的每一个复用元素均具有不同的唯一标识，以供页面正常展示SVG图标。

步骤S207，所述页面通过所述对象加载所述可缩放矢量图形图标。

参见图3，在上述实施例的基础上，提供了一种处理可缩放矢量图形图标的装置300，包括：图标获取模块301、图标处理模块302；其中，

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

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

在一个优选的实施例中，所述图标处理模块302，用于根据所述可缩放矢量图形图标的属性和内容，使用Webpack生成与所述可缩放矢量图形图标对应的对象。

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

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

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

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

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

在一个优选的实施例中，根据时间为每一个所述复用元素生成新的唯一标识。

在一个优选的实施例中，遍历所述可缩放矢量图形图标的内容，根据所述复用元素对应的原有标识，确定所述内容中被使用的所述复用元素；使用所述唯一标识替换所述内容中所述复用元素的原有标识，以生成新的内容。

图4示出了可以应用本发明实施例的处理可缩放矢量图形图标的方法或处理可缩放矢量图形图标的装置的示例性系统架构400。

如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如引用SVG图标的页面)反馈给终端设备。

需要说明的是，本发明实施例所提供的处理可缩放矢量图形图标的方法一般由服务器405执行，相应地，处理可缩放矢量图形图标的装置一般设置于服务器405中。

应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图5，其示出了适于用来实现本发明实施例的终端设备的计算机系统500的结构示意图。图5示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括图标获取模块、图标处理模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，图标获取模块还可以被描述为“用于获取页面待加载的一个或多个可缩放矢量图形图标的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：获取页面待加载的一个或多个可缩放矢量图形图标，所述可缩放矢量图形图标具有属性和内容，所述属性指示了所述可缩放矢量图形图标的大小，所述内容指示了一个或多个构成所述可缩放矢量图形图标的元素及所述元素对应的标识；根据所述可缩放矢量图形图标的属性和内容，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标；在所述可缩放矢量图形图标的内容中含有一个或多个复用元素的情况下，所述可缩放矢量图形图标对应的所述对象中的所述复用元素具有唯一标识。

根据本发明实施例的技术方案，基于Webpack等处理所述可缩放矢量图形图标，生成与所述可缩放矢量图形图标对应的对象，所述页面通过所述对象加载所述可缩放矢量图形图标，且在所述可缩放矢量图形图标具有一个或多个复用元素的情况下，所述对象中的所述复用元素具有新生成的唯一标识，使得处理后的一个或多个可缩放矢量图形图标中的不同的复用元素均具有不同的唯一标识，避免了不同可缩放矢量图形图标之间的影响，降低了页面展示错乱的可能性。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。