CN111414107A - 可缩放矢量图形处理方法及系统 - Google Patents

可缩放矢量图形处理方法及系统 Download PDF

Info

Publication number
CN111414107A
CN111414107A CN202010185155.2A CN202010185155A CN111414107A CN 111414107 A CN111414107 A CN 111414107A CN 202010185155 A CN202010185155 A CN 202010185155A CN 111414107 A CN111414107 A CN 111414107A
Authority
CN
China
Prior art keywords
svg
icon
icons
original
spliced
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010185155.2A
Other languages
English (en)
Inventor
智益
庞健
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Bank of China Ltd
Original Assignee
Bank of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Bank of China Ltd filed Critical Bank of China Ltd
Priority to CN202010185155.2A priority Critical patent/CN111414107A/zh
Publication of CN111414107A publication Critical patent/CN111414107A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/51—Indexing; Data structures therefor; Storage structures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G06F16/56—Information retrieval; Database structures therefor; File system structures therefor of still image data having vectorial format
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种可缩放矢量图形处理方法及系统，该方法包括：利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。本发明基于原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，能够基于一次请求从拼接SVG图标中获得所有目标原始SVG图标，大大提高SVG图标处理效率，同时基于一次请求获得所有目标原始SVG图标，也能够大大降低服务器资源消耗。

Description

可缩放矢量图形处理方法及系统
技术领域
本发明涉及图像处理技术领域，尤其涉及可缩放矢量图形处理方法及系统。
背景技术
本部分旨在为权利要求书中陈述的本发明实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
可缩放矢量图形(英文全称：Scalable Vector Graphics，简称SVG)，是基于XML(Extensible Markup Language)，由World Wide Web Consortium(W3C)联盟开发的一种图像文件格式。严格来说是一种XML定义的语言，用来描述二维矢量及矢量/格栅图形。
目前在处理SVG图标时，开发人员需要在每个页面重复引入不同的SVG图标。用户在访问页面时，根据需要加载的SVG图标，分别对每个待加载的SVG图标均需要进行一次请求，导致SVG图标处理效率很低；同时，分别对每个待加载的SVG图标均进行一次请求，会导致严重占用服务器资源。
因此，现有的SVG图标处理存在处理效率低及严重占用服务器资源的问题。
发明内容
本发明实施例提供一种可缩放矢量图形处理方法，用以提高SVG图标处理效率，降低服务器资源消耗，该方法包括：
利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；
确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置；
根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
本发明实施例还提供一种可缩放矢量图形处理系统，用以提高SVG图标处理效率，降低服务器资源消耗，该系统包括：
拼接模块，用于利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；
对应关系确定模块，用于确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置；
查找模块，用于根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述可缩放矢量图形处理方法。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述可缩放矢量图形处理方法的计算机程序。
本发明实施例中，利用资源打包工具将原始SVG图标拼接形成拼接SVG图标，从而确定原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，进而基于该标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。本发明实施例基于原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，能够基于一次请求从拼接SVG图标中获得所有目标原始SVG图标，大大提高SVG图标处理效率，同时基于一次请求获得所有目标原始SVG图标，也能够大大降低服务器资源消耗。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
图1为本发明第一实施例提供的可缩放矢量图形处理方法的实现流程图；
图2为本发明第二实施例提供的可缩放矢量图形处理方法的实现流程图；
图3为本发明第三实施例提供的可缩放矢量图形处理方法的实现流程图；
图4为本发明第四实施例提供的可缩放矢量图形处理方法的实现流程图；
图5为本发明第五实施例提供的可缩放矢量图形处理方法的实现流程图；
图6为本发明第六实施例提供的可缩放矢量图形处理系统的功能模块图；
图7为本发明第七实施例提供的可缩放矢量图形处理系统的功能模块图；
图8为本发明第八实施例提供的可缩放矢量图形处理系统的功能模块图；
图9为本发明第九实施例提供的可缩放矢量图形处理系统的功能模块图；
图10为本发明第十实施例提供的可缩放矢量图形处理系统的功能模块图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。
图1示出了本发明第一实施例提供的可缩放矢量图形处理方法的实现流程，为便于描述，仅示出了与本发明实施例相关的部分，详述如下：
如图1所示，可缩放矢量图形处理方法，其包括：
步骤101，利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；
步骤102，确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置；
步骤103，根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
原始SVG(英文全称：Scalable Vector Graphics，可缩放矢量图形)图标，为项目中使用的SVG图标，为便于描述和区分，将其称为原始SVG图标，以和拼接后的拼接SVG图标进行区分。
其中，资源打包工具在本发明实施例中用于对所有的原始SVG图标进行拼接，以形成拼接SVG图标。在本发明的一实施例中，该资源打包工具包括webpack打包工具将原始SVG图标进行拼接形成拼接SVG图标。本领域技术人员可以理解的是，该资源打包工具还可以包括除上述webpack打包工具之外的其它资源打包工具，例如rollup打包工具等等，本发明实施例对此不作特别的限制。此处rollup打包工具为现有技术中常用的打包工具，对此不再详细赘述。
其中，webpack打包工具是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
在形成拼接SVG图标后，可以对拼接SVG图标中的每个原始SVG图标添加标签，当然，本领域技术人员可以理解的是，也可以在形成拼接SVG图标之前，对每个原始SVG图标添加标签。原始SVG图标的标签用于区分不同的原始SVG图标，不同的原始SVG图标的标签是不同的。另外，在形成拼接SVG图标后，基于原始SVG图标在拼接SVG图标中的位置信息，确定每个原始SVG图标在拼接SVG图标中的位置标识。其中，每个原始SVG图标在拼接SVG图标中的位置标识，用于标识和区分不同原始SVG图标在拼接SVG图标中的位置。
进而，基于原始SVG图标的标签，以及每个原始SVG图标在拼接SVG图标中的位置标识，建立并确定原始SVG图标的标签与原始SVG图标在拼接SVG图标中的位置标识的映射关系，即标签位置对应关系。该标签位置对应关系反映了原始SVG图标的标签与该原始SVG图标的标签在拼接SVG图标中的位置标识的一一映射关系。
在建立该标签位置对应关系后，即可通过该标签位置对应关系，利用原始SVG图标的标签，查找拼接SVG图标中对应的原始SVG图标。因此，待查找的SVG图标我们可以成为目标SVG图标，在确定该标签位置对应关系后，根据目标SVG图标的标签，以及反映原始SVG图标的标签与该原始SVG图标的标签在拼接SVG图标中的位置标识的标签位置对应关系，确定与目标SVG图标的标签对应的目标SVG图标。
在本发明实施例中，利用资源打包工具将原始SVG图标拼接形成拼接SVG图标，从而确定原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，进而基于该标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。本发明实施例基于原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，能够基于一次请求从拼接SVG图标中获得所有目标原始SVG图标，大大提高SVG图标处理效率，同时基于一次请求获得所有目标原始SVG图标，也能够大大降低服务器资源消耗。
图2示出了本发明第二实施例提供的可缩放矢量图形处理方法的实现流程，为便于描述，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了节省SVG图标存储空间，如图2所示，在上述方法步骤的基础上，可缩放矢量图形处理方法，还包括：
步骤201，对所有原始SVG图标进行压缩，形成压缩后的所有原始SVG图标；
相应的，步骤101，利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标，包括：
步骤202，利用资源打包工具将压缩后的所有原始SVG图标进行拼接，形成拼接SVG图标。
鉴于SVG图标编辑器在输出SVG图标时，都会有很多冗余信息，例如ID，编辑器原信息，或者注释等等，该部分冗余信息对SVG图标的渲染结果没有影响，因此可以通过压缩的方式将该部分冗余信息识别出来并进行删除，以达到减小或者节省SVG图标存储空间的目的。
在本发明实施例中，对所有原始SVG图标进行压缩，形成压缩后的所有原始SVG图标，利用资源打包工具将压缩后的所有原始SVG图标进行拼接，形成拼接SVG图标，能够节省SVG图标的存储空间。
图3示出了本发明第三实施例提供的可缩放矢量图形处理方法的实现流程，为便于描述，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了进一步节省SVG图标的存储空间，如图3所示，在上述方法步骤的基础上，可缩放矢量图形处理方法，还包括：
步骤301，利用雪碧图技术将所有原始SVG图标调整为非静态资源。
雪碧图技术(英文全称：svg-sprite)，又称为精灵图技术，能够将图形图标整合在一起，并在实际呈现、展示的时候准确显示特定图标的一种技术。其中，原始SVG图标均为独立的静态资源，为了进一步节省SVG图标的存储空间，此处可以利用svg-sprite技术将原始SVG图标排除在SVG规则之外，即将原始SVG图标调整为非静态资源，仅保留最终的拼接SVG图标，这样能够进一步节省SVG图标的存储空间。
在本发明实施例中，利用雪碧图技术将所有原始SVG图标调整为非静态资源，能够进一步节省SVG图标的存储空间。
在本发明的一实施例中，为了进一步提高SVG图标的处理效率，降低服务器资源消耗，如图3所示，步骤101，利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标，包括：
步骤302，利用资源打包工具，基于雪碧图技术将所有原始SVG图标进行拼接，形成拼接SVG图标。
在形成拼接SVG图标时，资源打包工具webpack会利用雪碧图技术svg-sprite插件将所有原始SVG图标进行拼接，形成拼接SVG图标。本领域技术人员可以理解的是，所有原始SVG图标与拼接SVG图标均为二维平面图形。资源打包工具基于雪碧图技术将所有原始SVG图标进行拼接，能够进一步提高SVG图标的处理效率，降低服务器资源消耗。
在本发明实施例中，利用资源打包工具，基于雪碧图技术将所有原始SVG图标进行拼接，形成拼接SVG图标，能够进一步提高SVG图标的处理效率，降低服务器资源消耗。
图4示出了本发明第四实施例提供的可缩放矢量图形处理方法的实现流程，为便于描述，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了进一步提高SVG图标处理效率，降低服务器资源消耗，原始SVG图标的标签包括原始SVG图标名称，每个原始SVG图标在拼接SVG图标中的位置标识包括每个原始SVG图标在拼接SVG图标中的偏移量，标签位置对应关系包括名称偏移量对应关系。如图4所示，可缩放矢量图形处理方法中，步骤102，确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系，包括：
步骤401，确定每个原始SVG图标名称与每个原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系；
相应的，步骤103，根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标，包括：
步骤402，根据目标原始SVG图标的名称及名称偏移量对应关系，从拼接SVG图标中确定目标原始SVG图标。
在本发明实施例中，用于标识和区分不同原始SVG图标的标签可以包括原始SVG图标名称，不同的原始SVG图标具有不同的SVG图标名称。用于标识和区分每个原始SVG图标在拼接SVG图标中的位置标识可以包括原始SVG图标在拼接SVG图标中的偏移量，那么对应的，标签位置对应关系包括名称偏移量对应关系，该名称偏移量对应关系反映了原始SVG图标的名称与原始SVG图标在拼接SVG图标中的偏移量的映射关系。
在确定对应关系时，基于每个原始SVG图标名称，以及每个原始SVG图标在拼接SVG图标中的偏移量，确定原始SVG图标名称与原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系，进而在确定和查找目标SVG图标时，基于该名称偏移量对应关系，从拼接SVG图标中查找、确定对应的目标SVG图标。基于已通过svg-sprite技术将原始SVG图标调整为非静态资源，此处在查找到目标SVG图标后，将该目标SVG图标复制出来，以供后续处理使用。
在本发明实施例中，确定每个原始SVG图标名称与每个原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系，根据目标原始SVG图标的名称及名称偏移量对应关系，从拼接SVG图标中确定目标原始SVG图标，能够进一步提高SVG图标处理效率，降低服务器资源消耗。
图5示出了本发明第五实施例提供的可缩放矢量图形处理方法的实现流程，为便于描述，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了进一步提高SVG图标的处理效率，降低服务器资源消耗，如图5所示，在上述方法步骤的基础上，可缩放矢量图形处理方法，还包括：
步骤501，建立拼接SVG图标的平面坐标系，分别确定每个原始SVG图标在拼接SVG图标中的平面坐标；
步骤502，将每个原始SVG图标在拼接SVG图标中的平面坐标作为每个原始SVG图标在拼接SVG图标中的位置标识。
除了可以将每个原始SVG图标在拼接SVG图标中的偏移量作为每个原始SVG图标在拼接SVG图标中的位置标识外，还可以将每个原始SVG图标在拼接SVG图标中的坐标作为每个原始SVG图标在拼接SVG图标中的位置标识。
具体的，在形成拼接SVG图标后，对拼接SVG图标建立平面坐标系，进而分别确定每个原始SVG图标在拼接SVG图标中的平面坐标，利用原始SVG图标在该平面坐标系中的坐标表示原始SVG图标在拼接SVG图标中的位置标识。
在本发明实施例中，建立拼接SVG图标的平面坐标系，分别确定每个原始SVG图标在拼接SVG图标中的平面坐标，将每个原始SVG图标在拼接SVG图标中的平面坐标作为每个原始SVG图标在拼接SVG图标中的位置标识，能够进一步提高SVG图标的处理效率，降低服务器资源消耗。
另外，本领域技术人员可以理解的是，用于标识和区分原始SVG图标在拼接SVG图标中的位置标识还可以包括除上述偏移量及坐标等之外的其它位置标识，例如原始SVG图标在拼接SVG图标中的编码符，例如可以通过对拼接SVG图标中的每个原始SVG图标进行编码，得到每个原始SVG图标在拼接SVG图标中的编码符，不同的原始SVG图标具有不同的编码符，将原始SVG图标在拼接SVG图标中的编码符作为原始SVG图标在拼接SVG图标中的位置标识。
在本发明的一实施例中，原始SVG图标的标签还包括原始SVG图标编号或原始SVG图标标识代码。
与上述相类似的，本领域技术人员可以理解是，用于标识和区分不同原始SVG图标的标签还可以包括除上述SVG图标名称之外的其它标签。例如原始SVG图标编号，可以通过对每个原始SVG图标进行编号，得到每个原始SVG图标唯一编号，不同的原始SVG图标具有不同的编号，将原始SVG图标编号作为原始SVG图标的标签。
本领域技术人员可以理解的是，用于标识和区分不同原始SVG图标的标签还可以包括除上述SVG图标名称、原始SVG图标编号之外的其它标签，例如原始SVG图标标识代码。例如可以通过对每个原始SVG图标进行代码标识，得到每个原始SVG图标唯一标识代码，不同的原始SVG图标具有不同的标识代码，将原始SVG图标标识代码作为原始SVG图标的标签。
本发明实施例还提供一种可缩放矢量图形处理系统，如下面的实施例所述。由于这些系统解决问题的原理与可缩放矢量图形处理方法相似，因此这些系统的实施可以参见方法的实施，重复之处不再赘述。
图6示出了本发明第六实施例提供的可缩放矢量图形处理系统的功能模块，为便于说明，仅示出了与本发明实施例相关的部分，详述如下：
参考图6，所述可缩放矢量图形处理系统所包含的各个模块用于执行图1对应实施例中的各个步骤，具体请参阅图1以及图1对应实施例中的相关描述，此处不再赘述。本发明实施例中，所述可缩放矢量图形处理系统包括拼接模块601、对应关系确定模块602及查找模块603。
拼接模块601，用于利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标。
对应关系确定模块602，用于确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置。
查找模块603，用于根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
在本发明实施例中，拼接模块601利用资源打包工具将原始SVG图标拼接形成拼接SVG图标，从而对应关系确定模块602确定原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，进而查找模块603基于该标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。本发明实施例基于原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，能够基于一次请求从拼接SVG图标中获得所有目标原始SVG图标，大大提高SVG图标处理效率，同时基于一次请求获得所有目标原始SVG图标，也能够大大降低服务器资源消耗。
图7示出了本发明第七实施例提供的可缩放矢量图形处理系统的功能模块，为便于说明，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了节省SVG图标存储空间，参考图7，所述可缩放矢量图形处理系统所包含的各个模块用于执行图2对应实施例中的各个步骤，具体请参阅图2以及图2对应实施例中的相关描述，此处不再赘述。本发明实施例中，在上述模块结构的基础上，所述可缩放矢量图形处理系统，还包括压缩模块701。
压缩模块701，用于对所有原始SVG图标进行压缩，形成压缩后的所有原始SVG图标。
相应的，拼接模块601，具体用于利用资源打包工具将压缩后的所有原始SVG图标进行拼接，形成拼接SVG图标。
在本发明实施例中，压缩模块701对所有原始SVG图标进行压缩，形成压缩后的所有原始SVG图标，拼接模块601具体利用资源打包工具将压缩后的所有原始SVG图标进行拼接，形成拼接SVG图标，能够节省SVG图标的存储空间。
图8示出了本发明第八实施例提供的可缩放矢量图形处理系统的功能模块，为便于说明，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了进一步节省SVG图标的存储空间，参考图8，所述可缩放矢量图形处理系统所包含的各个模块用于执行图3对应实施例中的各个步骤，具体请参阅图3以及图3对应实施例中的相关描述，此处不再赘述。本发明实施例中，在上述模块结构的基础上，所述可缩放矢量图形处理系统，还包括调整模块801。
调整模块801，用于利用雪碧图技术将所有原始SVG图标调整为非静态资源。
在本发明实施例中，调整模块801利用雪碧图技术将所有原始SVG图标调整为非静态资源，能够进一步节省SVG图标的存储空间。
在本发明的一实施例中，为了进一步提高SVG图标的处理效率，降低服务器资源消耗，如图8所示，拼接模块601，具体用于利用资源打包工具，基于雪碧图技术将所有原始SVG图标进行拼接，形成拼接SVG图标。
在本发明实施例中，拼接模块601利用资源打包工具，基于雪碧图技术将所有原始SVG图标进行拼接形成拼接SVG图标，能够进一步提高SVG图标的处理效率，降低服务器资源消耗。
图9示出了本发明第九实施例提供的可缩放矢量图形处理系统的功能模块，为便于说明，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了提高SVG图标处理效率，降低服务器资源消耗，原始SVG图标的标签包括原始SVG图标名称，每个原始SVG图标在拼接SVG图标中的位置标识包括每个原始SVG图标在拼接SVG图标中的偏移量，标签位置对应关系包括名称偏移量对应关系。参考图9，所述可缩放矢量图形处理系统所包含的各个模块或者单元用于执行图4对应实施例中的各个步骤，具体请参阅图4以及图4对应实施例中的相关描述，此处不再赘述。本发明实施例中，对应关系确定模块602包括名称偏移量关系确定单元901。
名称偏移量关系确定单元901，用于确定每个原始SVG图标名称与每个原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系。
查找模块603包括查找单元902。
查找单元902，用于根据目标原始SVG图标的名称及名称偏移量对应关系，从拼接SVG图标中确定目标原始SVG图标。
在本发明实施例中，名称偏移量关系确定单元901确定每个原始SVG图标名称与每个原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系，查找单元902根据目标原始SVG图标的名称及名称偏移量对应关系，从拼接SVG图标中确定目标原始SVG图标，能够进一步提高SVG图标处理效率，降低服务器资源消耗。
图10示出了本发明第十实施例提供的可缩放矢量图形处理系统的功能模块，为便于说明，仅示出了与本发明实施例相关的部分，详述如下：
在本发明的一实施例中，为了进一步提高SVG图标的处理效率，降低服务器资源消耗，参考图10，所述可缩放矢量图形处理系统所包含的各个模块用于执行图5对应实施例中的各个步骤，具体请参阅图5以及图5对应实施例中的相关描述，此处不再赘述。本发明实施例中，在上述模块结构的基础上，所述可缩放矢量图形处理系统，还包括坐标系建立模块1001及位置标识确定模块1002。
坐标系建立模块1001，用于建立拼接SVG图标的平面坐标系，分别确定每个原始SVG图标在拼接SVG图标中的平面坐标。
位置标识确定模块1002，用于将每个原始SVG图标在拼接SVG图标中的平面坐标作为每个原始SVG图标在拼接SVG图标中的位置标识。
在本发明实施例中，坐标系建立模块1001建立拼接SVG图标的平面坐标系，分别确定每个原始SVG图标在拼接SVG图标中的平面坐标，位置标识确定模块1002将每个原始SVG图标在拼接SVG图标中的平面坐标作为每个原始SVG图标在拼接SVG图标中的位置标识，能够进一步提高SVG图标的处理效率，降低服务器资源消耗。
本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述可缩放矢量图形处理方法。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述可缩放矢量图形处理方法的计算机程序。
综上所述，本发明实施例中，利用资源打包工具将原始SVG图标拼接形成拼接SVG图标，从而确定原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，进而基于该标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。本发明实施例基于原始SVG图标的标签与其在拼接SVG图标中的位置标识的标签位置对应关系，能够基于一次请求从拼接SVG图标中获得所有目标原始SVG图标，大大提高SVG图标处理效率，同时基于一次请求获得所有目标原始SVG图标，也能够大大降低服务器资源消耗。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可缩放矢量图形处理方法，其特征在于，包括：
利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；
确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置；
根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
2.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，还包括：
对所有原始SVG图标进行压缩，形成压缩后的所有原始SVG图标；
相应的，利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标，包括：
利用资源打包工具将压缩后的所有原始SVG图标进行拼接，形成拼接SVG图标。
3.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，在利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标之前，还包括：
利用雪碧图技术将所有原始SVG图标调整为非静态资源。
4.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标，包括：
利用资源打包工具，基于雪碧图技术将所有原始SVG图标进行拼接，形成拼接SVG图标。
5.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，原始SVG图标的标签包括原始SVG图标名称，每个原始SVG图标在拼接SVG图标中的位置标识包括每个原始SVG图标在拼接SVG图标中的偏移量，标签位置对应关系包括名称偏移量对应关系，确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系，包括：
确定每个原始SVG图标名称与每个原始SVG图标在拼接SVG图标中的偏移量的名称偏移量对应关系；
相应的，根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标，包括：
根据目标原始SVG图标的名称及名称偏移量对应关系，从拼接SVG图标中确定目标原始SVG图标。
6.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，在利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标之后，还包括：
建立拼接SVG图标的平面坐标系，分别确定每个原始SVG图标在拼接SVG图标中的平面坐标；
将每个原始SVG图标在拼接SVG图标中的平面坐标作为每个原始SVG图标在拼接SVG图标中的位置标识。
7.如权利要求1所述的可缩放矢量图形处理方法，其特征在于，原始SVG图标的标签还包括原始SVG图标编号或原始SVG图标标识代码。
8.一种可缩放矢量图形处理系统，其特征在于，包括：
拼接模块，用于利用资源打包工具将所有原始SVG图标进行拼接，形成拼接SVG图标；
对应关系确定模块，用于确定每个原始SVG图标的标签与每个原始SVG图标在拼接SVG图标中的位置标识的标签位置对应关系；每个原始SVG图标的标签用于区分不同原始SVG图标，每个原始SVG图标在拼接SVG图标中的位置标识用于区分不同原始SVG图标在拼接SVG图标中的位置；
查找模块，用于根据目标原始SVG图标的标签及标签位置对应关系，从拼接SVG图标中确定目标原始SVG图标。
9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一所述可缩放矢量图形处理方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求1至7任一所述可缩放矢量图形处理方法的计算机程序。
CN202010185155.2A 2020-03-17 2020-03-17 可缩放矢量图形处理方法及系统 Pending CN111414107A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010185155.2A CN111414107A (zh) 2020-03-17 2020-03-17 可缩放矢量图形处理方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010185155.2A CN111414107A (zh) 2020-03-17 2020-03-17 可缩放矢量图形处理方法及系统

Publications (1)

Publication Number Publication Date
CN111414107A true CN111414107A (zh) 2020-07-14

Family

ID=71494512

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010185155.2A Pending CN111414107A (zh) 2020-03-17 2020-03-17 可缩放矢量图形处理方法及系统

Country Status (1)

Country Link
CN (1) CN111414107A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913777A (zh) * 2020-08-12 2020-11-10 曙光信息产业(北京)有限公司 信息处理方法、装置、电子设备及存储介质
CN112422543A (zh) * 2020-11-09 2021-02-26 建信金融科技有限责任公司 反爬虫方法和装置

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070097135A1 (en) * 2005-10-27 2007-05-03 Brown Christopher W Utility, method and device providing vector images that may be updated to reflect the physical states of configurable components of a device
CN103412741A (zh) * 2013-06-26 2013-11-27 中国南方电网有限责任公司 关联cim模型的变压器svg图形拼接方法与系统
CN104680421A (zh) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 一种可伸缩矢量图形svg显示方法及装置
CN105427353A (zh) * 2015-11-12 2016-03-23 小米科技有限责任公司 可缩放矢量图形的压缩、绘制方法及装置
CN106649794A (zh) * 2016-12-28 2017-05-10 北京奇虎科技有限公司 图片合成方法及装置
CN107092585A (zh) * 2017-04-11 2017-08-25 王建明 基于可缩放矢量图形的蒙古文显示方法及系统
CN107301046A (zh) * 2017-06-15 2017-10-27 腾讯科技（深圳）有限公司 图标的处理方法和装置、计算机设备和存储介质
CN109101688A (zh) * 2018-07-06 2018-12-28 烽火通信科技股份有限公司 一种模板式定制管道段截面图的方法
CN109461195A (zh) * 2018-09-28 2019-03-12 武汉优品楚鼎科技有限公司 一种基于svg的图表提取方法、装置及设备
CN110246081A (zh) * 2018-11-07 2019-09-17 浙江大华技术股份有限公司 一种图像拼接方法、装置及可读存储介质
CN110310226A (zh) * 2019-06-05 2019-10-08 携程旅游网络技术（上海）有限公司 图片的拼接显示方法及系统
CN110781333A (zh) * 2019-06-26 2020-02-11 杭州鲁尔物联科技有限公司 一种基于机器学习的斜拉桥非结构化监测数据处理方法

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070097135A1 (en) * 2005-10-27 2007-05-03 Brown Christopher W Utility, method and device providing vector images that may be updated to reflect the physical states of configurable components of a device
CN103412741A (zh) * 2013-06-26 2013-11-27 中国南方电网有限责任公司 关联cim模型的变压器svg图形拼接方法与系统
CN104680421A (zh) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 一种可伸缩矢量图形svg显示方法及装置
CN105427353A (zh) * 2015-11-12 2016-03-23 小米科技有限责任公司 可缩放矢量图形的压缩、绘制方法及装置
CN106649794A (zh) * 2016-12-28 2017-05-10 北京奇虎科技有限公司 图片合成方法及装置
CN107092585A (zh) * 2017-04-11 2017-08-25 王建明 基于可缩放矢量图形的蒙古文显示方法及系统
CN107301046A (zh) * 2017-06-15 2017-10-27 腾讯科技（深圳）有限公司 图标的处理方法和装置、计算机设备和存储介质
CN109101688A (zh) * 2018-07-06 2018-12-28 烽火通信科技股份有限公司 一种模板式定制管道段截面图的方法
CN109461195A (zh) * 2018-09-28 2019-03-12 武汉优品楚鼎科技有限公司 一种基于svg的图表提取方法、装置及设备
CN110246081A (zh) * 2018-11-07 2019-09-17 浙江大华技术股份有限公司 一种图像拼接方法、装置及可读存储介质
CN110310226A (zh) * 2019-06-05 2019-10-08 携程旅游网络技术（上海）有限公司 图片的拼接显示方法及系统
CN110781333A (zh) * 2019-06-26 2020-02-11 杭州鲁尔物联科技有限公司 一种基于机器学习的斜拉桥非结构化监测数据处理方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913777A (zh) * 2020-08-12 2020-11-10 曙光信息产业(北京)有限公司 信息处理方法、装置、电子设备及存储介质
CN112422543A (zh) * 2020-11-09 2021-02-26 建信金融科技有限责任公司 反爬虫方法和装置

Similar Documents

Publication Publication Date Title
CN108765534B (zh) 一种图像渲染方法、装置、设备及存储介质
CN107729083B (zh) 一种加载驱动程序的方法及嵌入式设备
CN107291497B (zh) 多固件升级方法、系统及可读存储介质
US11710266B2 (en) Rendering method and apparatus
US20050193372A1 (en) System and process for object rendering on thin client platforms
CN111680253B (zh) 页面应用数据包生成方法、装置、计算机设备及存储介质
CN110908697B (zh) 一种资源打包方法、装置、服务器及存储介质
CN113126990B (zh) 一种页面开发方法、装置、设备及存储介质
CN111414107A (zh) 可缩放矢量图形处理方法及系统
CN113609820A (zh) 基于可扩展标记语言文件生成word文件的方法、装置及设备
CN107766130A (zh) 虚拟机向容器迁移的方法和装置
CN110908707A (zh) 一种资源打包方法、装置、服务器及存储介质
CN113885935A (zh) 资源打包方法、装置、电子设备及计算机可读存储介质
CN109634611B (zh) 基于OpenGL的移动端三维模型ply文件解析与展示方法
CN112306594A (zh) 一种基于移动端的渲染方法、装置及存储介质
CN109658485B (zh) 网页动画绘制方法、装置、计算机设备和存储介质
CN111949312B (zh) 数据模块的打包方法、装置、计算机设备和存储介质
CN112817595A (zh) 界面渲染方法、装置、存储介质及电子设备
CN114092590B (zh) 电子设备及其图像渲染性能的评估方法、介质
CN110706035A (zh) 一种更新效果的评价方法、装置、存储介质及电子设备
CN115170765A (zh) 一种模型处理系统、方法及装置
CN114896161A (zh) 基于人工智能的文件构造方法、装置、计算机设备及介质
KR20180015564A (ko) 타일-기반 렌더링을 수행하는 방법 및 장치
CN109726346B (zh) 页面组件处理方法及装置
CN108845961B (zh) 一种创建顶点缓冲区方法、装置及可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20200714

RJ01 Rejection of invention patent application after publication