SVG的处理方法、装置、存储介质及电子设备与流程

svg的处理方法、装置、存储介质及电子设备
技术领域
1.本技术涉及图像处理技术领域，具体而言，涉及一种可缩放的矢量图形(scalable vector graphics，svg)的处理方法、装置、存储介质及电子设备。


背景技术：

2.在二三维图形模型场景设计中，通常会用到一些图片作为场景各个部件的标识说明。渲染引擎在加载其他二维图像格式时通常局限于原图像的分辨率，会出现不清晰失真等现象，特别是在对渲染图形进行缩放时尤为明显。
3.svg是一种用xml定义的语言来描述的二维矢量图形，svg具有缩放不失真和占用存储空间小等优点。svg作为一种新型的矢量图片格式，在浏览器页面的生产设计中应用十分广泛，svg矢量格式可呈现任何大小而不降低其质量，而且具有高可压缩性和轻量级。但是，现有的方案通常应用在二维图形显示场景上，对于将svg格式图片渲染到三维图形引擎中，目前尚未有成熟的方案。因此，亟需一种能够将svg格式图片实时渲染到三维图形引擎上的方案。


技术实现要素：

4.本技术实施例的目的在于提供一种可缩放的矢量图形svg的处理方法、装置、存储介质及电子设备，能够将svg格式图片实时渲染到三维图形引擎上。
5.第一方面，本技术实施例提供了一种可缩放的矢量图形svg的处理方法，包括：
6.确定目标svg对象的图形单元顶点信息；
7.根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；
8.基于所述渲染数据对所述目标svg对象进行渲染显示。
9.在本技术实施例中，通过确定图形单元的顶点信息，根据顶点信息来进行图形渲染，从而能够在三维设计中实时渲染svg图形，解决了现有技术不能在三维图形引擎上显示svg矢量图形的问题。
10.在一个可能的实施例中，所述的可缩放的矢量图形svg的处理方法还包括：
11.实时捕捉所述目标svg对象的图形变化信息；
12.根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据；
13.基于所述第二渲染数据重新对所述目标svg对象进行渲染显示。
14.在本技术实施例中，通过实时监测svg图形的变化，如平移旋转或缩放等，再根据图形变化信息直接对原有渲染数据进行转换得到变换后的渲染数据。从而能够快速对图形进行变换并渲染显示，提高了图形变换的效率及实时性。
15.在一个可能的实施例中，所述根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据，具体包括：
16.确定所述目标svg对象发生平移或旋转变化；
17.根据所述图形变化信息计算平移旋转矩阵；
18.基于所述平移旋转矩阵对所述渲染数据进行变换，得到所述第二渲染数据。
19.在本技术实施例中，当判断当前图形变换是平移或旋转时，可以根据图形变化信息直接计算平移旋转矩阵，并根据平移旋转矩阵直接对渲染数据进行变换。从而提高了图形平移旋转显示的实时性。
20.在一个可能的实施例中，所述根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据，具体包括：
21.确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合；
22.根据所述图形变化信息计算缩放矩阵，并基于所述缩放矩阵对所述第一图形单元集合的渲染数据进行变换，得到所述第一图形单元集合对应的变换数据；
23.基于重新确定的第二图形单元集合的图形单元顶点信息对所述第二图形单元集合的渲染数据进行重新生成，得到所述第二图形单元集合对应的生成数据；
24.基于所述变换数据和所述生成数据确定所述第二渲染数据。
25.在本技术实施例中，当判断当前变换是缩放变换时，需要将图形单元划分为两类，一类直接计算缩放矩阵进行变换，另一类重新确定顶点信息并重新生成渲染数据，从而能够在确保缩放图形显示清晰度的前提下提高缩放显示的实时性。
26.在一个可能的实施例中，所述确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合，包括：
27.确定所述目标svg对象发生缩放变化，并根据所述图形变化信息确定当前缩放比例；
28.基于所述当前缩放比例确定所述目标svg对象中每一图形单元的缩放几何信息；
29.基于预设筛选阈值对所述缩放几何信息进行筛选，并根据筛选结果将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合。
30.在本技术实施例中，在图形缩放时，通过计算图形单元的缩放几何信息，并与预设阈值进行比较筛选，将图形单元划分为需要重新生成渲染数据和无需重新生成渲染数据两类，从而能够在确保缩放图形显示清晰度的前提下提高缩放显示的实时性。
31.在一个可能的实施例中，所述确定目标svg对象的图形单元顶点信息，包括：
32.解析所述目标svg对象的svg文件的图形单元控制参数；
33.基于所述图形单元控制参数确定所述目标svg对象的图形单元顶点信息。
34.在本技术实施例中，通过解析svg文件的图形单元控制参数来确定图形单元的顶点信息，从而能够根据顶点信息来进行图形渲染，进而能够在三维设计中实时渲染svg图形。
35.在一个可能的实施例中，所述的可缩放的矢量图形svg的处理方法还包括：
36.解析所述目标svg对象的svg文件的全局属性参数；
37.所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据，具体包括：
38.根据所述全局属性参数和所述图形单元顶点信息生成所述目标svg对象的渲染数据。
39.在本技术实施例中，通过解析svg文件的全局属性参数，根据全局属性参数结合顶点信息来生成渲染数据，使得渲染各个图形单元时可以通过引用全局属性参数来生成渲染
数据，从而简化了图形单元的渲染过程，提高图形渲染显示的效率。
40.在一个可能的实施例中，所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据，包括：
41.根据所述图形单元顶点信息确定所述目标svg对象的几何构图数据；
42.对所述几何构图数据进行三角化剖分，得到所述目标svg对象的几何渲染数据；
43.根据所述几何渲染数据生成所述目标svg对象的渲染数据。
44.在本技术实施例中，在根据顶点信息确定几何构图数据后，可以对几何构图数据进行三角化剖分，作为各个图形单元的通用几何渲染数据，从而提高了图形渲染的效率和精细度。
45.第二方面，本技术实施例提供了一种可缩放的矢量图形svg的处理装置，包括：
46.确定模块，用于确定目标svg对象的图形单元顶点信息；
47.生成模块，用于根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；
48.渲染模块，用于基于所述渲染数据对所述目标svg对象进行渲染显示。
49.第三方面，本技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时可实现第一方面任一实施例所述的方法。
50.第四方面，本技术实施例提供了一种计算机程序产品，所述的计算机程序产品包括计算机程序，其中，所述的计算机程序被处理器执行时可实现第一方面任一实施例所述的方法。
51.第五方面，本技术实施例提供了一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时可实现第一方面任一实施例所述的方法。
附图说明
52.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
53.图1为本技术实施例提供的一种可缩放的矢量图形svg的处理方法的流程示意图之一；
54.图2为本技术实施例提供的一种可缩放的矢量图形svg的处理方法的流程示意图之二；
55.图3为本技术实施例提供的一种可缩放的矢量图形svg的处理装置的结构示意图；
56.图4为本技术实施例提供的一种电子设备的结构示意图。
具体实施方式
57.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。
58.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本技术的
描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
59.如图1所示，本技术实施例提供了一种可缩放的矢量图形svg的处理方法，可以包括步骤：
60.s1、确定目标svg对象的图形单元顶点信息；
61.s2、根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；
62.s3、基于所述渲染数据对所述目标svg对象进行渲染显示。
63.需要说明的是，svg作为一种矢量图形格式，在显示时可以根据显示目标尺寸实时缩放，且能够保证目标缩放时的清晰度，基于这一特性，svg广泛应用于浏览器，矢量logo设计上。但是，目前对于在三维图形渲染引擎上显示svg图形，尚未有成熟方案。
64.需要说明的是，svg图形可以通过获取图形顶点坐标并进行连线构图，再根据填充颜色绘制线型等属性进行图形渲染。在本技术实施例中，通过确定图形单元的顶点信息，根据顶点信息来进行构图以实现svg图形渲染，能够精确、实时地将svg矢量图形渲染至三维设计软件中，解决了现有技术不能在三维图形引擎上显示svg矢量图形的问题。
65.在一个可能的实施例中，所述的可缩放的矢量图形svg的处理方法还可以包括步骤：
66.s401、实时捕捉所述目标svg对象的图形变化信息；
67.s402、根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据；
68.s403、基于所述第二渲染数据重新对所述目标svg对象进行渲染显示。
69.可以理解的是，在图形设计软件使用过程中，需要实时对显示的图形进行调整和修改，因此图形显示过程中需要对svg对象进行实时监测变化。根据实时捕捉的图形变化信息，可以直接对已经显示的渲染数据进行变换，得到图形变换后的第二渲染数据，从而可以基于第二渲染数据对变化后的svg对象进行重新渲染显示。
70.在本技术实施例中，通过实时监测svg图形的变化，如平移旋转或缩放等，再根据图形变化信息直接对原有渲染数据进行转换得到变换后的渲染数据。从而能够快速对图形进行变换并渲染显示，提高了图形变换的效率及实时性。
71.在一个可能的实施例中，步骤s402(所述根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据)具体可以包括步骤：
72.s4021、确定所述目标svg对象发生平移或旋转变化；
73.s4022、根据所述图形变化信息计算平移旋转矩阵；
74.s4023、基于所述平移旋转矩阵对所述渲染数据进行变换，得到所述第二渲染数据。
75.需要说明的是，svg对象的图形变化可以包括平移或旋转，当捕捉到平移或旋转信息(包括平移的位置或距离，旋转角度等)时，可以根据平移位置计算平移向量，再根据平移向量和旋转角度计算平移旋转矩阵，从而可以根据平移旋转矩阵对渲染数据进行变换，得到图形变化后的第二渲染数据，实现图形变化后的渲染显示。
76.在本技术实施例中，当判断当前图形变换是平移或旋转时，可以根据图形变化信息直接计算平移旋转矩阵，并根据平移旋转矩阵直接对渲染数据进行变换。从而提高了图形平移旋转显示的实时性。
77.在一个可能的实施例中，步骤s402(所述根据所述图形变化信息对所述渲染数据
进行变换，得到第二渲染数据)具体还可以包括步骤：
78.s4024、确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合；
79.s4025、根据所述图形变化信息计算缩放矩阵，并基于所述缩放矩阵对所述第一图形单元集合的渲染数据进行变换，得到所述第一图形单元集合对应的变换数据；
80.s4026、基于重新确定的第二图形单元集合的图形单元顶点信息对所述第二图形单元集合的渲染数据进行重新生成，得到所述第二图形单元集合对应的生成数据；
81.s4027、基于所述变换数据和所述生成数据确定所述第二渲染数据。
82.需要说明的是，当确定当前图形变化为图形缩放时，可以将svg对象的图形单元划分为两类，一类直接通过计算缩放矩阵对渲染数据进行转换，一类需要重新执行渲染数据生成的步骤。例如，对于无需重新生成渲染数据的一类图形单元，可以根据图形变化信息计算缩放矩阵，再根据缩放矩阵对其渲染数据进行变换，得到该类图形单元的变换后的渲染数据；对于需要重新生成渲染数据的一类图形单元，可以基于初始生成渲染数据的步骤对变化后的图形单元进行重新确定顶点信息，再根据重新确定的顶点信息进行重新构图并生成变换后的渲染数据。
83.在本技术实施例中，当判断当前变换是缩放变换时，可以将图形单元划分为两类，一类直接计算缩放矩阵进行变换，另一类重新确定顶点信息并重新生成渲染数据，从而能够在确保缩放图形显示清晰度的前提下提高缩放显示的实时性。
84.在一个可能的实施例中，步骤s4024(所述确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合)可以包括步骤：
85.s40241、确定所述目标svg对象发生缩放变化，并根据所述图形变化信息确定当前缩放比例；
86.s40242、基于所述当前缩放比例确定所述目标svg对象中每一图形单元的缩放几何信息；
87.s40243、基于预设筛选阈值对所述缩放几何信息进行筛选，并根据筛选结果将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合。
88.需要说明的是，在对svg对象的图形单元进行类别划分时，可以根据图形变化信息确定需要缩放的比例，再根据缩放比例获取图形单元需要变换的缩放几何信息，继而基于预设阈值对图形变化后的缩放几何信息进行筛选划分，例如，缩放后的图形单元的宽度(例如最小包围盒的宽度)低于一定的阈值时，划分至需要重新生成渲染数据的类别，否则划分为无需重新生成渲染数据的类别。
89.在本技术实施例中，在图形缩放时，通过计算图形单元的缩放几何信息，并与预设阈值进行比较、筛选，将图形单元划分为需要重新生成渲染数据和无需重新生成渲染数据两类，从而能够在确保缩放图形显示清晰度的前提下提高缩放显示的实时性。
90.在一个可能的实施例中，步骤s1(所述确定目标svg对象的图形单元顶点信息)可以包括步骤：
91.s101、解析所述目标svg对象的svg文件的图形单元控制参数；
92.s102、基于所述图形单元控制参数确定所述目标svg对象的图形单元顶点信息。
93.可以理解的是，对于任意图形单元，可以通过在svg文件中设置图形单元控制参数，用以描述图形单元的图形特征，通过解析这些控制参数，可以获取得到每个图形单元的顶点信息，从而实现任意图形单元的构图。在本技术实施例中，通过解析svg文件的图形单元控制参数来确定图形单元的顶点信息，从而能够根据顶点信息来进行图形渲染，进而能够在三维设计中实时渲染任意的svg图形。
94.在一个可能的实施例中，所述的可缩放的矢量图形svg的处理方法还可以包括步骤：
95.s5、解析所述目标svg对象的svg文件的全局属性参数；
96.步骤s2(所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据)具体可以包括步骤：
97.s201、根据所述全局属性参数和所述图形单元顶点信息生成所述目标svg对象的渲染数据。
98.需要说明的是，svg文件中可以设置全局属性参数，对于通用的图形单元构图元素，可以直接引用全局属性参数，而无需分别在各个图形单元的文件字段中描述构图参数，从而简化了svg文件整体的复杂度。在本技术实施例中，通过解析svg文件的全局属性参数，根据全局属性参数结合顶点信息来生成渲染数据，使得渲染各个图形单元时可以通过引用全局属性参数来生成渲染数据，从而简化了图形单元的渲染过程，提高图形渲染显示的效率。
99.在一个可能的实施例中，步骤s2(所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据)可以包括步骤：
100.s202、根据所述图形单元顶点信息确定所述目标svg对象的几何构图数据；
101.s203、对所述几何构图数据进行三角化剖分，得到所述目标svg对象的几何渲染数据；
102.s204、根据所述几何渲染数据生成所述目标svg对象的渲染数据。
103.需要说明的是，在对图形单元进行构图时，为了提高图形渲染的精细度和均匀性，可以将几何构图数据转化为三角剖分的形式，例如，可以通过狄洛尼三角剖分思想对构图得到的环形结构或闭合结构进行三角化剖分，获得几何渲染数据，再根据渲染参数的颜色属性等生成得到图形单元的渲染数据。在本技术实施例中，在根据顶点信息确定几何构图数据后，可以对几何构图数据进行三角化剖分，作为各个图形单元的通用几何渲染数据，从而提高了图形渲染的效率和精细度。
104.需要说明的是，在二三维图形模型场景设计中，通常会用到一些图片作为场景各个部件的标识说明。svg作为一种新型的矢量图片格式，在浏览器页面的生产设计中应用十分广泛。svg矢量格式可呈现任何大小而不降低其质量，而且具有高可压缩性和轻量级。svg基于文本的格式，面向未来同时也具有很高的可扩展性。渲染引擎在加载其他二维图像格式时通常局限于原图像的分辨率，会出现不清晰失真等现象，特别是在渲染图形在缩放时尤为明显。在实际生产中，很多二三维模型场景设计为了展示交互更便利都需要一些简易图标作为各个部件的标识及说明。传统的图片格式在此场景中通常会出现上述问题，在一些生产要求严格的场景往往需要更高的分辨率图片来满足需求。更高分辨率虽然会满足一些特定需求但也增加了渲染引擎在加载高分辨率图片时低效率的风险。svg作为一种矢量
图形格式，在显示时可以根据显示目标尺寸实时缩放，重新计算像素坐标，重新绘制从而保证目标缩放时的清晰度。基于这一特性svg广泛应用于浏览器，矢量logo设计上。
105.基于以上svg的特性以及二三维实际生产需求，本技术实施例提供一种将原始svg格式图片实时渲染到渲染引擎的方法，通过对svg文件进行解析，获取svg图片图形元素，样式属性，变换属性等矢量信息，并实时对矢量信息具象化生成对应的引擎顶点数据，索引数据纹理数据，坐标变换等渲染数据。
106.请参见图2，作为举例，本技术实施例可以通过以下步骤实现：
107.(1)加载svg文件，以xml文本格式加载到程序内存。
108.(2)解析svg文件：
109.1)读取并保存svg文件的高度，宽度以及可见区域等关键的全局定义属性；读取并保存svg内嵌式样式表和外部式样式表等全局样式，作为解析环节的全局数据储存。
110.2)读取并保存各个图形单元参数化几何特征描述信息，颜色，绘制线型等参数。
111.3)为各个图形单元映射全局颜色，线型等全局样式中的渲染参数。
112.4)保存所有图形单元到列表l；
113.(3)补充并保存各个图形单元原始顶点信息。
114.(4)单个图形单元生成渲染数据。
115.下面以“path”字段对应的图形单元为例：
116.1)根据path中的控制参数(a、h、v、l、m、t、s、q、c等)依次计算每个控制参数对应的顶点坐标。其中，a＝elliptical，arc，椭圆弧；h＝horizontal lineto，水平线；v＝vertical lineto，垂直线；l＝lineto，连线；m＝moveto，起始；t＝smooth quadratic bezier curveto，平滑的二次贝塞尔曲线；s＝smooth curveto，平滑的三次贝塞尔曲线；q＝quadratic bezier curveto，二次贝塞尔曲线；c＝curveto，三次贝塞尔曲线。
117.具体地，由前一个顶点和后续的控制参数生成后续的顶点，如前一个顶点为a(10,10)，后续控制参数为h 50(h表示绘制水平线50表示水平线长度)则后续顶点为b(10+50,10)即b(60,10)。
118.2)依次连接1)中计算的顶点生成连续顶点队列。
119.3)若图形单元属性中包含关键字
‘
z’，则连续顶点需要闭合，如需要闭合，设置闭合标识；根据关键字“fill”判断是否需要填充，设置填充标识。
120.4)根据当前屏幕像素尺寸以及svg显示范围计算当前缩放比例。
121.5)根据图形单元的线段宽度属性，将2)中生成的连续顶点相邻顶点依次连接生成一条多段线a(如连续顶点有a,b,c,d,e相邻顶点依次连接生成线段a-b-c-d-e)，将多段线a作为中心线，宽度属性中的宽度值d的一半作为偏移量，将中心线分别向内、向外偏移上述偏移量生成向外偏移多段线b和向内偏移多段线c。
122.6)若多段线a闭合，向外偏移多段线b和向内偏移多段线c分别为封闭线段，组成封闭环形结构o。
123.7)若多段线a不闭合，将向内偏移多段线c顶点倒叙排列。形成新的多段线c1，将c1的顶点队列插入b的顶点队列结尾并依次连接后生成多段线d，闭合多段线d。
124.8)若需要填充则设置多段线a闭合，得到闭合线段e。
125.9)若存在环形结构o、闭合多段线e或闭合多段线d，根据狄洛尼三角剖分思想对上
述环形结构或闭合结构(这里指的是o、e、d)进行三角化剖分。得到三角化集合，该集合可作为通用的几何渲染数据。
126.10)将图形单元渲染参数颜色属性映射到9)中(三角化集合)的几何顶点上，得到该几何单元的完整渲染数据。
127.(5)遍历所有图形单元为每个图形单元执行步骤(4)，存储所有渲染数据集合g，将每个图形单元与由该图形单元生成的渲染数据一一对应生成映射m。
128.(6)将渲染数据显示到渲染目标。
129.(7)开启渲染循环：
130.1)实时捕捉渲染目标变化；
131.2)若渲染目标发生平移，旋转变化，根据原始位置和平移后的位置计算平移向量。由平移向量和旋转角度计算平移旋转矩阵，将渲染数据g中的数据，进行矩阵变换后，执行步骤(6)。
132.3)若渲染目标发生缩放变化，计算缩放比例，根据缩放比例计算缩放矩阵。遍历所有图形单元，判断图形单元缩放后的几何信息，若为宽度低于一定阈值(例如，该阈值可在整个渲染流程执行之前进行全局预设默认为1个像素)，将该图形单元存储到需要重新计算渲染数据的图形单元集合y，否则存储到不需要重新计算渲染数据的图形单元集合n。
133.遍历集合n，在映射m中获取对应渲染的数据并对其进行缩放矩阵变换；遍历集合y，执行步骤(4)重新生成渲染数据并替换掉映射m中对应的渲染数据；执行步骤(6)。
134.需要说明的是，本技术实施例可运用于直接渲染svg矢量图形的场景，在需要图片作为渲染场景中的标识时，通过本技术实施例实时生成svg的渲染数据可以保证图标在渲染引擎场景在缩放、平移、旋转等交互操作时保持原有的清晰度。本技术实施例为通用二三维引擎直接加载图标文件，以及矢量图形文件实时渲染提供了有效的实现方案。
135.请参考图3，图3示出了本技术的一些实施例提供的可缩放的矢量图形svg的处理装置的组成框图。应理解，该可缩放的矢量图形svg的处理装置与上述图1方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该可缩放的矢量图形svg的处理装置的具体功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。
136.图3的可缩放的矢量图形svg的处理装置包括至少一个能以软件或固件的形式存储于存储器中或固化在可缩放的矢量图形svg的处理装置中的软件功能模块，该可缩放的矢量图形svg的处理装置包括：
137.确定模块310，用于确定目标svg对象的图形单元顶点信息；
138.生成模块320，用于根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；
139.渲染模块330，用于基于所述渲染数据对所述目标svg对象进行渲染显示。
140.可以理解的是上述装置项实施例，是与本发明方法项实施例相对应的，本发明实施例提供的一种可缩放的矢量图形svg的处理装置，可以实现本发明任意一项方法项实施例提供的可缩放的矢量图形svg的处理方法。
141.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法中的对应过程，在此不再过多赘述。
142.如图4所示，本技术的一些实施例提供一种电子设备400，该电子设备400包括：存
储器410、处理器420以及存储在存储器410上并可在处理器420上运行的计算机程序，其中，处理器420通过总线430从存储器410读取程序并执行所述程序时可实现如上述可缩放的矢量图形svg的处理方法包括的任意实施例的方法。
143.处理器420可以处理数字信号，可以包括各种计算结构。例如复杂指令集计算机结构、结构精简指令集计算机结构或者一种实行多种指令集组合的结构。在一些示例中，处理器420可以是微处理器。
144.存储器410可以用于存储由处理器420执行的指令或指令执行过程中相关的数据。这些指令和/或数据可以包括代码，用于实现本技术实施例描述的一个或多个模块的一些功能或者全部功能。本公开实施例的处理器420可以用于执行存储器410中的指令以实现上述所示的方法。存储器410包括动态随机存取存储器、静态随机存取存储器、闪存、光存储器或其它本领域技术人员所熟知的存储器。
145.本技术的一些实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行方法实施例所述的方法。
146.本技术的一些实施例还提供一种计算机程序产品，所述计算机程序产品在计算机上运行时，使得计算机执行方法实施例所述的方法。
147.需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
148.本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
149.另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
150.所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
151.以上所述仅为本技术的实施例而已，并不用于限制本技术的保护范围，对于本领
域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
152.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应所述以权利要求的保护范围为准。
153.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

技术特征：
1.一种可缩放的矢量图形svg的处理方法，其特征在于，包括：确定目标svg对象的图形单元顶点信息；根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；基于所述渲染数据对所述目标svg对象进行渲染显示。2.根据权利要求1所述的可缩放的矢量图形svg的处理方法，其特征在于，还包括：实时捕捉所述目标svg对象的图形变化信息；根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据；基于所述第二渲染数据重新对所述目标svg对象进行渲染显示。3.根据权利要求2所述的可缩放的矢量图形svg的处理方法，其特征在于，所述根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据，具体包括：确定所述目标svg对象发生平移或旋转变化；根据所述图形变化信息计算平移旋转矩阵；基于所述平移旋转矩阵对所述渲染数据进行变换，得到所述第二渲染数据。4.根据权利要求2所述的可缩放的矢量图形svg的处理方法，其特征在于，所述根据所述图形变化信息对所述渲染数据进行变换，得到第二渲染数据，具体包括：确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合；根据所述图形变化信息计算缩放矩阵，并基于所述缩放矩阵对所述第一图形单元集合的渲染数据进行变换，得到所述第一图形单元集合对应的变换数据；基于重新确定的第二图形单元集合的图形单元顶点信息对所述第二图形单元集合的渲染数据进行重新生成，得到所述第二图形单元集合对应的生成数据；基于所述变换数据和所述生成数据确定所述第二渲染数据。5.根据权利要求4所述的可缩放的矢量图形svg的处理方法，其特征在于，所述确定所述目标svg对象发生缩放变化，将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合，包括：确定所述目标svg对象发生缩放变化，并根据所述图形变化信息确定当前缩放比例；基于所述当前缩放比例确定所述目标svg对象中每一图形单元的缩放几何信息；基于预设筛选阈值对所述缩放几何信息进行筛选，并根据筛选结果将所述目标svg对象的图形单元划分为第一图形单元集合和第二图形单元集合。6.根据权利要求1所述的可缩放的矢量图形svg的处理方法，其特征在于，所述确定目标svg对象的图形单元顶点信息，包括：解析所述目标svg对象的svg文件的图形单元控制参数；基于所述图形单元控制参数确定所述目标svg对象的图形单元顶点信息。7.根据权利要求1所述的可缩放的矢量图形svg的处理方法，其特征在于，还包括：解析所述目标svg对象的svg文件的全局属性参数；所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据，具体包括：根据所述全局属性参数和所述图形单元顶点信息生成所述目标svg对象的渲染数据。8.根据权利要求1所述的可缩放的矢量图形svg的处理方法，其特征在于，所述根据所述图形单元顶点信息生成所述目标svg对象的渲染数据，包括：
根据所述图形单元顶点信息确定所述目标svg对象的几何构图数据；对所述几何构图数据进行三角化剖分，得到所述目标svg对象的几何渲染数据；根据所述几何渲染数据生成所述目标svg对象的渲染数据。9.一种可缩放的矢量图形svg的处理装置，其特征在于，包括：确定模块，用于确定目标svg对象的图形单元顶点信息；生成模块，用于根据所述图形单元顶点信息生成所述目标svg对象的渲染数据；渲染模块，用于基于所述渲染数据对所述目标svg对象进行渲染显示。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1-8任一所述的可缩放的矢量图形svg的处理方法。11.一种计算机程序产品，其特征在于，所述的计算机程序产品包括计算机程序，其中，所述的计算机程序被处理器执行时可实现权利要求1-8中任意一项权利要求所述的可缩放的矢量图形svg的处理方法。12.一种电子设备，其特征在于，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时可实现权利要求1-8中任意一项权利要求所述的可缩放的矢量图形svg的处理方法。

技术总结
本申请实施例提供一种可缩放的矢量图形SVG的处理方法、装置、存储介质及电子设备，涉及图像处理技术领域。所述方法包括：确定目标SVG对象的图形单元顶点信息；根据所述图形单元顶点信息生成所述目标SVG对象的渲染数据；基于所述渲染数据对所述目标SVG对象进行渲染显示。本申请实施例通过确定图形单元的顶点信息，根据顶点信息来进行图形渲染，从而能够在三维设计中实时渲染SVG图形，解决了现有技术不能在三维图形引擎上显示SVG矢量图形的问题。题。题。


技术研发人员：魏家霖 夏海兵 高阳 王栋栋 沈沁宇
受保护的技术使用者：上海秉匠信息科技有限公司
技术研发日：2023.06.16
技术公布日：2023/9/22