[发明专利]SVG图像的处理方法及装置、存储介质和处理器

说明书

本申请公开了一种SVG图像的处理方法及装置、存储介质和处理器。该方法包括：获取待查看的SVG图像文件夹的目录；遍历目录下的内容，得到遍历的内容；对遍历的内容进行解析，得到SVG图像数据；对SVG图像数据进行处理，得到SVG图像的页面元素；根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像。通过本申请，解决了相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。

技术领域

本申请涉及信息处理技术领域，具体而言，涉及一种SVG图像的处理方法及装置、存储介质和处理器。

背景技术

随着前端技术的不断变革与发展，网页的设计中通常都会带有很多图标，从而丰富用户的体验，提升产品的使用感。在之前的开发过程中，我们通常会使用一些JPG,PNG等格式的图片用于页面的展示，但随着技术的成熟，在如今的项目开发过程中，或者在进行网页改版时，我们通常会使用SVG格式的图片。其中，SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。而且，SVG格式的图片与其他格式的图片相比，SVG格式的图片具有以下优点：

(1)SVG格式的图片是可伸缩的。用户可以任意缩放图像，且不会破坏图像的清晰度、细节等；

(2)SVG格式的图片相较于JPG、PNG和GIF等格式的图片，其尺寸更小，且可压缩性更强；

(3)SVG格式的图片有超强的显示效果，它在屏幕上显示时，图片边缘一直是清晰的，且适合任何屏幕分辨率；

(4)SVG格式的图片采用文本来描述对象，故可以用任何文字编辑器打开并修改。

但随着SVG图像的广泛使用，一个大型项目中，可能存在几百个SVG图像，由于SVG是矢量图，一般的图片查看工具无法打开。而且，当项目中不同的模块由不同的开发者进行开发时，由于一些操作按钮的图像会有相同，在实际的开发中，开发者通常会使用以下两种相关技术：相关技术一是在图片文件夹中挨个通过浏览器打开查看是否与当前模块的图像一致，如一致，则进行引用。如不一致，则下载一个新的图像放入项目中；相关技术二是安装第三方插件，安装此插件后即可以直接在文件系统内预览SVG图像，再在多个文件夹中进行查找，如有一致，则进行引用。如不一致，则下载一个新的图像放入项目中。

相关技术一中，通过浏览器预览SVG图像，即通过将单个SVG图像拖拽到浏览器或者以浏览器为打开方式，从而对SVG图像进行预览。例如，在市面上常见的Chrome、IE、Safari等浏览器上都可以直接展示SVG图像。但是，在大型项目中，SVG的图像数量众多，且分布在不同的图像文件夹中，故该技术存在以下缺点：通过浏览器对SVG图像进行逐个打开并查看，此操作繁琐，且耗费时间；且当项目中存在较多命名不同但展示相同或者只是颜色上有差异但图像结构相同的SVG图像时，无法清晰比对出SVG图像，只能新增图像文件，就会导致项目中图像文件数量越来越多，图像文件夹体积越来越大，从而导致项目体积的增大。

相关技术二中，通过在系统中安装第三方插件，此插件下载路径如下：https://github.com/tibold/svg-explorer-extension。该插件是Windows资源管理器的扩展模块，用于呈现SVG缩略图，便于预览SVG文件。Windows上安装完执行文件后，则可以在文件系统中像预览JPG/PNG这些图片一样预览SVG图像。该技术使开发者可以像使用其他格式的图片一样使用SVG图片，但由于windows文件系统的限制，使用此技术时，只能以一个文件夹的维度来预览图片，不能进行多个文件夹中SVG图像的比对。而当项目中存储图像的目录存在多层嵌套时，需频繁进行如下操作：进入文件夹查看图像，再进入更深层次文件夹，或再进行返回，在其他文件夹中去查看图像。所以，这些操作可能导致开发者无法清晰比对使用SVG图像，只能新增图像文件，仍然可能存在明显的冗余与重复现象。

针对相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题，目前尚未提出有效的解决方案。