A Method and Apparatus for Reverse Reuse of SVG Resources

Abstract

The present invention discloses a method and apparatus for reverse reuse of SVG resources, including: obtaining an SVG Symbol graphic, extracting at least one DOM fragment from the SVG Symbol graphic, and constructing a fragment library based on the DOM fragment; obtaining an original DOM fragment matching a service request from the fragment library; processing the original DOM fragment according to the service request to obtain a static graphic; and applying the static graphic to the service request. In the present invention, in a scenario where SVG Symbol graphics are widely used, DOM fragments are extracted from SVG Symbol graphics, and the DOM fragments are converted into static graphics according to service requests, realizing the reverse reuse of SVG Symbol graphics, which can exponentially reduce the number of HTTP requests and the size of static graphic resources, and improve the request and rendering performance of the interface.

Description

Technical Field

[0001] The present invention belongs to the field of Web technology, and more specifically, relates to a method and device for reverse reuse of SVG resources. Background Art

[0002] Currently, as Figure 1 shown, the traditional SVG (Scalable Vector Graphics) graphic application models include the following two: Method 1: Build Vue, React, and Angular components based on SVG Symbols and then use them in the form of components; Method 2: Use them in the form of static graphic resources. When static graphic resources are applied according to the resource size threshold, small graphics are converted into the base-64 resource form for use, and large graphics are kept in the form of static resource links for use.

[0003] The traditional application models of current SVG Symbol graphics have the following deficiencies in actual application scenarios:

[0004] The application of SVG Symbol to build components (Method 1) and the application of static graphic resources (Method 2) cannot communicate with each other, that is: when the same graphic must be applied using two application methods, two copies of the same graphic must be introduced, resulting in resource redundancy.

[0005] In the scenario of a canvas that uses a large number of graphics, only the static graphic resource method can be used, resulting in a large number of HTTP requests to obtain static graphic resources, which affects the interface performance.

[0006] In addition, the same graphic may have multiple variants in the application scenario, that is, on the basis of the same graphic, elements such as color, size, and text are slightly modified to meet the application scenario. In the traditional application mode, multiple graphic resources must be prepared in advance for switching use, increasing the redundancy of graphic resources. Summary of the Invention

[0007] In view of the above defects or improvement requirements of the prior art, the present invention provides a method and device for reverse reuse of SVG resources, aiming to reverse reuse SVG Symbol graphics, making the single use mode of the graphics derivable and deformable, enhancing the graphic reuse rate, and thus solving the technical problem of graphic redundancy caused by the inability to apply the same graphic in different application methods.

[0008] To achieve the above object, according to one aspect of the present invention, a method for reverse reuse of SVG resources is provided, including:

[0009] Obtain an SVG Symbol graphic, extract at least one DOM fragment from the SVG Symbol graphic, and construct a fragment library based on the DOM fragment;

[0010] Obtain the original DOM fragment that matches the service request from the fragment library;

[0011] Process the original DOM fragment according to the service request to obtain a static graphic;

[0012] Apply the static graphic to the service request.

[0013] Further, the obtaining the original DOM fragment that matches the scenario request from the fragment library includes:

[0014] Parse the service request to obtain the symbol ID corresponding to the graphic;

[0015] Access the fragment library according to the symbol ID to select the DOM fragment carrying the symbol ID, and this DOM fragment is the original DOM fragment.

[0016] Further, the processing the original DOM fragment according to the service request to obtain a static graphic includes:

[0017] Parse the service request to obtain the configuration elements corresponding to the graphic;

[0018] Modify the original DOM fragment based on the configuration elements to obtain a target DOM fragment;

[0019] Convert the target DOM fragment into a static graphic.

[0020] Further, the converting the target DOM fragment into a static graphic includes:

[0021] Remove the symbol label of the target DOM fragment and retain the graphic description information of the target DOM fragment;

[0022] Wrap the graphic description information with an svg label again to obtain an SVG DOM;

[0023] Convert the SVG DOM into a target string with a preset encoding, and convert the target string into a static graphic that matches the service request.

[0024] Further, the converting the SVG DOM into a target string with a preset encoding, and converting the target string into a static graphic that matches the service request includes:

[0025] Parse the service request to obtain a graphic format;

[0026] Convert the SVG DOM into an XML string, and convert the XML string into a target string with a preset encoding;

[0027] Concatenate the graphic format and the target string to obtain a static graphic that matches the service request.

[0028] Further, the configuration elements include at least one of color selection, size, and text.

[0029] Further, the extracting at least one DOM fragment from the SVG Symbol graphic and constructing a fragment library based on the DOM fragment includes:

[0030] Use the document.getElementId method to obtain at least one DOM fragment from the SVG Symbol graphic, store the obtained DOM fragment in the browser memory, and construct a fragment library based on the DOM fragment.

[0031] Further, the applying the static graphic to the service request includes:

[0032] Use a label or the src attribute of a new Image object to receive the static graphic, so as to further... The method further includes:

[0033] After obtaining the service request, analyze the service request to determine the graphic style required by the service request;

[0034] If the graphic style is a static graphic, execute the step of obtaining the original DOM fragment that matches the service request from the fragment library;

[0035] If the graphic style is a dynamic graphic, construct an encapsulated component based on the SVG Symbol graphic, and then implement the service request through the encapsulated component.

[0036] According to another aspect of the present invention, there is provided an apparatus for reverse reuse of SVG resources, including at least one processor and a memory, the at least one processor and the memory are connected through a data bus, the memory stores instructions executable by the at least one processor, and after the instructions are executed by the processor, they are used to complete the method for reverse reuse of SVG resources in the first aspect.

[0037] Generally speaking, compared with the prior art, the above technical solution conceived by the present invention has the following beneficial effects: The present invention provides a method and device for reverse reuse of SVG resources, including: obtaining an SVG Symbol graphic, extracting at least one DOM fragment from the SVG Symbol graphic, and constructing a fragment library based on the DOM fragment; obtaining an original DOM fragment matching the service request from the fragment library; processing the original DOM fragment according to the service request to obtain a static graphic; and applying the static graphic to the service request.

[0038] In the present invention, in a scenario where SVG Symbol graphics are used on a large scale, DOM fragments are extracted from the SVG Symbol graphics, and the DOM fragments are converted into static graphics according to service requests, realizing the reverse reuse of SVG Symbol graphics, which can exponentially reduce the number of HTTP requests and the size of static graphic resources, and improve the request and rendering performance of the interface. During the reverse reuse process, the DOM fragments can also be processed as needed for different service scenarios, and basic graphics can be deformed and derived. The single usage mode of the graphics becomes derivable and deformable, enhancing the graphic reuse rate. While reducing the redundancy of graphic resources, it can also meet the requirements of different scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention, and those of ordinary skill in the art can also obtain other drawings based on these drawings without creative efforts.

[0040] Figure 1 It is a schematic diagram of the traditional application model of the SVG Symbol graphic provided by the embodiment of the present invention;

[0041] Figure 2 It is a schematic flowchart of a method for reverse reuse of SVG resources provided by the embodiment of the present invention;

[0042] Figure 3 It is a schematic diagram of the definition of the SVG Symbol graphic provided by the embodiment of the present invention;

[0043] Figure 4 It is a schematic diagram of the code of the SVG DOM provided by the embodiment of the present invention;

[0044] Figure 5 It is a schematic diagram of the code for reverse parsing of the DOM provided by the embodiment of the present invention;

[0045] Figure 6It is a device for reverse reuse of SVG resources provided by an embodiment of the present invention. Detailed implementation manners

[0046] In order to make the objectives, technical solutions and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention. In addition, the technical features involved in the various embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other.

[0047] Embodiment 1:

[0048] Regarding the application mode of Web technology in the use of SVG Symbol graphics, this embodiment provides a method for reverse reuse of SVG resources, aiming to reverse reuse existing SVG Symbol resources according to scenario requirements, construct static graphic resources, avoid redundancy of graphic resources, and improve interface performance.

[0049] Refer to Figure 2 , this embodiment provides a method for reverse reuse of SVG resources, and the method includes:

[0050] Step 101: Obtain an SVG Symbol graphic, extract at least one DOM fragment from the SVG Symbol graphic, and construct a fragment library based on the DOM fragment;

[0051] Among them, SVG (Scalable Vector Graphics, scalable vector graphics) is a graphic file format. SVG is a language defined by XML and is used to describe two-dimensional vectors and vector / raster graphics. The graphic quality of an SVG Symbol graphic will not be lost when it is enlarged or its size is changed.

[0052] Combined with Figure 3 , an SVG Symbol graphic contains at least one <symbol>element, wherein, <symbol>The role of the element is to define an image template that can be used <use>The element instantiates it, i.e., <symbol>The element itself does not output any images. Only when using <use>It will be displayed only after instantiation.

[0053] Among them, one <symbol>The element defines the description information of the graphic, and the DOM (Document Object Model) fragment refers to a certain <symbol>Code snippets corresponding to the elements.

[0054] Continue to refer to Figure 3 as shown <symbol>The depiction information in the element includes <path>Label, <text>Labels, etc. Among them, the path label defines several x and y coordinate points to outline a graph, and the text label carries the text in the graph. <path>Add "fill = "#000000"" to the label to control the color of the SVG Symbol graphic.

[0055] Among them, each DOM fragment has a symbol ID, and different DOM fragments can be distinguished by this symbol ID.

[0056] In this embodiment, the DOM fragments of the SVG Symbol graphic are obtained from the running HTML (HyperText Markup Language). When the HTML is in the running state, it means that the SVG Symbol graphic has been loaded and integrated into the graphic pool.

[0057] Among them, all the DOM fragments included in the already loaded SVG Symbol graphic are extracted, and a fragment library is constructed according to the obtained DOM fragments. This fragment library will increase as the number of SVG Symbol graphics increases, forming a resource pool.

[0058] In an actual application scenario, the document.getElementId method in JavaScript can be used to obtain the DOM fragments in the SVG Symbol graphic, store the obtained DOM fragments in the browser memory, and construct a fragment library based on the DOM fragments.

[0059] Such as Figure 5 shown, use document.getElementId('icon-frame') to obtain the DOM fragment of the symbol graphic with the symbol ID of icon-frame.

[0060] Step 102: Obtain the original DOM fragment that matches the service request from the fragment library;

[0061] In this embodiment, the fragment library contains multiple DOM fragments, and the symbol ID of each DOM fragment (as Figure 3 shown) is different, and the original DOM fragment that matches the service request can be obtained according to the symbol ID.

[0062] Among them, the service request is a graphic drawing request, and the ID of the required graphic, that is, the symbol ID, is carried in the service request. Then, access the fragment library with this symbol ID to obtain the original DOM fragment that meets the service request.

[0063] Step 103: Process the original DOM fragment according to the service request to obtain a static graphic;

[0064] In this embodiment, if no configuration elements are carried in the service request, directly remove the symbol tags of the original DOM fragment and retain the graphic description information of the original DOM fragment; wrap the graphic description information with svg tags to obtain an SVG DOM (as Figure 4 shown); convert the SVG DOM into a target string in a preset encoding, convert the SVG DOM into an XML string, and convert the XML string into a target string in a preset encoding; obtain the graphic format corresponding to the service request, and then splice the graphic format and the target string to obtain a static graphic matching the service request, and apply the static graphic to the service request.

[0065] If configuration elements are carried in the service request, the original DOM fragment needs to be modified to obtain a target DOM fragment, and then a corresponding static graphic is obtained according to the target DOM fragment. The specific processing method is as follows:

[0066] After receiving the service request, parse the service request to obtain the symbol ID corresponding to the graphic, the configuration elements corresponding to the graphic, and the graphic format. Among them, the configuration elements include color, size, and / or text, etc., and the graphic formats include PNG format, SVG format, JPG format, etc.

[0067] Furthermore, access the fragment library according to the symbol ID to select the DOM fragment carrying the symbol ID, and this DOM fragment is the original DOM fragment described above. Then modify the original DOM fragment based on the configuration elements to obtain a target DOM fragment; convert the target DOM fragment into a static graphic.

[0068] In an actual application scenario, use dom.setAttribute to modify the original DOM fragment to reconstruct the DOM fragment and obtain a target DOM fragment.

[0069] In this embodiment, if configuration elements are carried in the service request, the original DOM fragment is reconstructed by using the dom.setAttribute method provided natively by JavaScript to obtain a target DOM fragment. Among them, the configuration elements include the elements to be modified and the values after the modification of the elements.

[0070] Specifically, obtain the graphic description information of the original DOM fragment, and modify the values of relevant elements in the graphic description information according to the configuration elements to obtain the target DOM fragment. Among them, the graphic description information includes elements for describing color (fill color fill), elements for describing size (width width, height height), and elements for describing text (text). The color of the DOM object can be reconfigured by modifying the content corresponding to the fill color fill, the size of the DOM object can be reconfigured by modifying the width width and height height of the DOM fragment, and the text of the DOM object can be reconfigured by modifying the content of the text text. Which elements specifically need to be modified can be determined according to the business request and will not be specifically limited here.

[0071] For ease of understanding, in combination with Figure 4 for illustration, in Figure 4 the content outside the svg tag is the graphic description information of the DOM fragment. This graphic description information includes the fill color fill, width width, height height, and text tex. The color of the DOM object can be reconfigured by modifying the content corresponding to the fill color fill, the size of the DOM object can be reconfigured by modifying the width width and height height of the DOM fragment, and the text of the DOM object can be reconfigured by modifying the content of the text tex. Which elements specifically need to be modified can be determined according to the business request and will not be specifically limited here.

[0072] It should be noted here that Figure 4 the SVG DOM actually shown, referring to Figure 4 is only for illustrating the elements included in the graphic description information, so as to explain how to modify the original DOM fragment through the dom.setAttribute method provided natively by JavaScript to obtain the target DOM fragment.

[0073] In an optional embodiment, the process of converting the target DOM fragment into a static graphic is as follows: remove the symbol tag of the target DOM fragment and retain the graphic description information of the target DOM fragment; then, wrap the graphic description information with the svg tag again to obtain the SVG DOM; convert the SVG DOM into a target string with a preset encoding, and convert the target string into a static graphic that matches the business request.

[0074] In an optional embodiment, convert the SVG DOM into an XML (Extensible Markup Language) string, and convert the XML string into a target string with a preset encoding; splice the graphic format and the target string to obtain a static graphic that matches the business request.

[0075] Among them, the target string of the preset encoding is a binary string or a string in base-64 encoding format. Base-64 is one of the common encoding methods on the network for transmitting 8-bit byte codes. Base-64 is a method for representing binary data based on 64 printable characters. Preferably, the XML string is converted into a string in base-64 encoding format.

[0076] The foregoing splicing process is as follows: Determine the graphic prefix according to the graphic format, and then append the string in base-64 encoding format after the graphic prefix. For example, if the graphic format is PNG format, the graphic prefix is data:image / png, and append the target string after the graphic prefix. For example, the following shows a representation form of a static graphic:

[0077] data:image / png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB;

[0078] Among them, the string after base64 is the target string.

[0079] In an actual application scenario, in combination with Figure 5 the following method is adopted to obtain <symbol>The content inside the label is obtained through document.getElementById("icon-frame").innerHTML <symbol>Graphic description information within the element, discard the external <symbol>, the obtained graphic description information is enclosed outside with <svg>The label is repackaged to obtain the SVG DOM, completing the instantiation process. Among them, in Figure 5 , <svg>The label is specifically represented as <svg xmlns="http: / / www.w3.org / 2000 / svg" class="icon" viewBox="0 0 1024 1024" id="icon-frame">. Among them, is used to explain the standard that this piece of code complies with. Class is used to point to the class of the style sheet, which is used to modify the style of the label presentation. viewBox is used to control the actually displayed content, that is, only a partial area inside the svg element is displayed and scaled. This attribute is a list containing 4 parameters: start-x, start-y, width, and height, separated by spaces or commas, used to set the initial coordinates and width and height of the implementation display area. id is the unique identifier of the HTML element.

[0080] Furthermore, the complete SVG DOM can be converted into an XML string through the method new XMLSerializer().serializeToString provided natively by JavaScript, and then the XML string can be created into a target string encoded in base-64 through the method window.btoa provided natively by JavaScript.

[0081] Step 104: Apply the static graphic to the service request.

[0082] After obtaining the corresponding static graphic in the aforementioned manner, apply the static graphic to the service request.

[0083] In an alternative embodiment, it is possible to use the label or the src attribute of the new Image object to receive the static graphic, so as to apply the static graphic to the service request.

[0084] Among them, the label is used to define a graphic in an HTML page to embed a graphic into the web page. The role of the label is to create a placeholder for the referenced graphic. The label has two required attributes: the src attribute and the alt attribute. Among them, the value of the src attribute is the URL (Uniform Resource Locator) of the graphic file, that is, the absolute path or relative path of the referenced graphic. The alt attribute is used to define a string of preparatory alternative text for the image, and the value of the alternative text attribute can be defined by the user.

[0085] That is, in this embodiment, by defining the value of the src attribute as the location of a certain static graphic, the corresponding graphic can be obtained through the label.

[0086] In an actual application scenario, after adopting this solution, existing SVG Symbol graphics can be reused, and different processing can be performed on the SVG Symbol graphics according to different service requests. Specifically, after obtaining the service request, the service request is analyzed to determine the graphic style required by the service request; if the graphic style is a static graphic, the step of obtaining the original DOM fragment matching the service request from the fragment library is executed, that is, the corresponding static graphic is obtained in the manner of the aforementioned steps 102 to 104.

[0087] If the graphic style is a dynamic graphic, an encapsulated component is constructed based on the SVG Symbol graphic, and the service request is implemented through the encapsulated component. Among them, the encapsulated component includes Vue, React, or Angular components.

[0088] For example, if the service request is to apply a graphic to a canvas, static graphic resources are required. The SVG Symbol graphic can be converted into static graphic resources in the manner of Embodiment 1, and then the static graphic is mounted on the src attribute through a tag or a newImage object to be applied to the canvas scenario.

[0089] This embodiment discloses a method and device for reverse reuse of SVG resources. In a scenario where SVG Symbol graphics are used on a large scale, DOM fragments are extracted from the SVG Symbol graphics, and the DOM fragments are converted into static graphics according to service requests, realizing the reverse reuse of SVG Symbol graphics. During the reuse process, the corresponding DOM fragments are obtained from the browser memory, and no separate HTTP request is sent to the server after data format processing, which can exponentially reduce the number of HTTP requests and the resource size of static graphic resources, and improve the request and rendering performance of the interface.

[0090] Specifically, after adopting the solution of this embodiment, in a scenario where graphics are used on a large scale, the HTTP requests for graphic static resources can be reduced, and the interface performance can be improved. Among them, for a normal 5KB graphic interface, the first loading and transmission takes about 300+ms. In an interface with large-scale application of graphics, it is estimated to take more than 1000+ms according to the parallel transmission speed. In the case of preloading SVG Symbol graphics, the interface transmission can be controlled within 10ms.

[0091] In this embodiment, during the reverse reuse process, for different service scenarios, the DOM fragments can be processed as needed. The basic graphics can be deformed and derived, and the single usage mode of the graphics becomes derivable and deformable, enhancing the graphics reuse rate. While reducing the redundancy of graphic resources, it can also meet the requirements of different scenarios. Taking a graphic usage scenario as an example, during use, there may be color sampling when the graphic is highlighted and text changes. In the traditional mode, two static graphics need to be introduced to meet this scenario. In the new mode, the basic graphic can be deformed to obtain these two different static graphics, reducing the redundancy of graphic resources.

[0092] Moreover, the scenarios of using static graphic resources alone will be greatly reduced, and the usage mode of the graphics tends to be unified. Without affecting the business operation, the resources occupied by the graphic resources are also significantly reduced.

[0093] In addition, the graphic pool built based on SVG Symbol can manage single-color and multi-color graphics, and can well maintain the attributes of the original graphics in the reverse reuse scenario, avoiding deformation and color changes, and having good adaptability for single-color and multi-color graphics.

[0094] Embodiment 2:

[0095] Based on the foregoing Embodiment 1, this embodiment introduces the method for reverse reuse of the foregoing SVG resources in combination with a specific scenario.

[0096] In a web page using SVG Symbol technology, the DOM fragments in the SVG Symbol graphics in the running-state HTML are collected through the document.getElementById method natively provided by JavaScript, the obtained DOM fragments are stored in the browser memory, and a fragment library is built based on the DOM fragments.

[0097] After obtaining a service request, the service request is parsed to obtain the ID of the graphic, the configuration elements corresponding to the graphic, and the graphic format. Among them, the ID of the graphic is the symbol ID, the configuration elements include color sampling, size, and / or text, etc., and the graphic formats include PNG format, SVG format, JPG format, etc.

[0098] Then, access the fragment library with the symbol ID to obtain the corresponding original DOM fragment. Based on the configuration elements such as color picking, size, and text involved in the business scenario requirements, use the dom.setAttribute method provided natively by JavaScript to reconstruct the original DOM fragment to obtain the target DOM fragment. Specifically, the color picking of the DOM object can be reconfigured by modifying the fill color, the size of the DOM object can be reconfigured by modifying the width and height of the DOM fragment, and the text of the DOM object can be reconfigured by modifying the content of the text. Among them, the aforementioned DOM fragment corresponds to the tag fragment of the HTML syntax, and the DOM object corresponds to the DOM object that converts the DOM fragment into the JavaScript language through the JavaScript method. Through the aforementioned method, a new DOM object is deformed from the original DOM fragment in the SVG Symbol graphic.

[0099] Then, use <svg>The tag re-wraps the graphic description information in the target DOM fragment to obtain the SVG DOM, and converts the complete SVG DOM into an XML string through the new XMLSerializer().serializeToString method provided by JavaScript natively.

[0100] Furthermore, the XML string is created into a base-64 encoded target string through the window.btoa method provided by JavaScript natively, and a complete base-64 encoded graphic static resource is constructed according to the graphic format image / svg+xml, image / png+xml or image / jpg+xml. Labels and new Image objects are applied to business scenarios in real time.

[0101] In this embodiment, in the scenario where SVG Symbol graphics are used on a large scale, DOM fragments are extracted from the SVG Symbol graphics, and the DOM fragments are converted into static graphics according to business requests, thereby realizing reverse multiplexing of the SVG Symbol graphics, which can exponentially reduce the number of HTTP requests and resource size of static graphic resources, and improve the request and rendering performance of the interface. Specifically, after adopting the solution of this embodiment, in the scenario where graphics are used on a large scale, HTTP requests for static graphic resources can be reduced, and the interface performance can be improved. Among them, the first loading and transmission of a normal 5KB graphic interface is about 300+ms. In the case of large-scale application of graphic interfaces, it is estimated that it takes 1000+ms according to the speed of parallel transmission. When SVG Symbol graphics are preloaded, the interface transmission can be controlled within 10ms.

[0102] Embodiment 3:

[0103] Based on the aforementioned embodiment 1, this embodiment provides another method for reverse multiplexing of SVG resources. In embodiment 1, if the business request carries configuration factors, the original DOM fragment will be modified according to the configuration factors to obtain the target DOM fragment, and then the static graphic will be obtained based on the target DOM fragment. If the business request does not carry the configuration factors, the original DOM fragment will be directly converted into a static graphic.

[0104] During this process, different target DOM fragments can be derived from the original DOM fragment. To make reasonable use of the target DOM fragment and reduce the time for reconfiguring the original DOM fragment into the target DOM fragment, in a preferred embodiment, the DOM fragment (original DOM fragment) directly obtained from the SVG Symbol graphic can be stored in the first fragment library, and the target DOM fragment derived from the original DOM fragment can be stored in the second fragment library. At the same time, an association factor is generated according to the configuration factor and the symbol ID, and the target DOM fragment is associated with the association factor for subsequent service requests to select the appropriate target DOM fragment based on the association factor. For example, the association factor can be generated by concatenating strings.

[0105] Specifically, if the service request carries both the configuration factor and the symbol ID at the same time, an association factor is generated based on the configuration factor and the symbol ID, and then the second fragment library is accessed based on the association factor to obtain the target DOM fragment corresponding to the association factor; if the target DOM fragment matching the association factor is not obtained in the second fragment library, the first fragment library is accessed with the symbol ID to obtain the original DOM fragment corresponding to the symbol ID, and then the original DOM fragment is reconfigured based on the configuration factor; if the target DOM fragment matching the association factor is obtained in the second fragment library, the target DOM fragment is directly converted into a static graphic. By adopting this method, the repeated configuration of the original DOM fragment can be avoided.

[0106] In this embodiment, if multiple service requests carry the same configuration factor and symbol ID, the target DOM fragment corresponding to the prior service request can be directly utilized, avoiding the repeated configuration of the original DOM fragment and improving the efficiency.

[0107] Embodiment 4:

[0108] Based on the foregoing Embodiment 1, this embodiment provides another method for reverse reuse of SVG resources. The solution of the foregoing Embodiment 3 can avoid the repeated configuration of the original DOM fragment, but the process of converting the DOM fragment into a static graphic will still be repeatedly executed. To avoid the foregoing process.

[0109] Based on the foregoing Embodiment 1, this embodiment provides an improved solution, which is specifically as follows:

[0110] If there is no configuration factor in the service request, based on the solution of Embodiment 1, the original DOM fragment will be converted into a static graphic. For the convenience of description, the static graphic converted from the original DOM fragment is called the first static graphic, and the first static graphic is stored in the first resource pool, where each first static graphic is associated with the symbol ID.

[0111] If the service request carries configuration factors, based on the solution of Embodiment 1, the original DOM fragment will be reconfigured first to generate a target DOM fragment, and then the target DOM fragment will be converted into a static graph. For the convenience of description, the static graph converted from the target DOM fragment is called the second static graph, and the second static graph is stored in the second resource pool. An association factor is generated according to the configuration factors and the symbol ID, and the second static graph is associated with the association factor, so that a subsequent service request can select an appropriate second static graph based on the association factor. For example, the association factor can be generated by concatenating strings. Among them, each second static graph is associated with the association factor.

[0112] The above describes the process of establishing the first resource pool and the second resource pool. The following introduces the process of obtaining a static graph matching the service request based on the first resource pool and the second resource pool.

[0113] Specifically, if the service request carries both configuration factors and a symbol ID at the same time, an association factor is generated based on the configuration factors and the symbol ID, and then the second resource pool is accessed based on the association factor to obtain a second static graph corresponding to the association factor; if a second static graph matching the association factor is not obtained in the second resource pool, the fragment library is accessed with the symbol ID to obtain the original DOM fragment corresponding to the symbol ID, and then the original DOM fragment is reconfigured based on the configuration factors to obtain a target DOM fragment, and the static graph (i.e., the second static graph) converted from the target DOM fragment is obtained, and the second static graph is added to the second resource pool.

[0114] If a second static graph matching the association factor is obtained in the second resource pool, it is judged whether the graph format of the second static graph meets the service request. If the graph format of the second static graph meets the service request, the second static graph is directly applied to the service request; if the graph format of the second static graph does not meet the service request, the graph format of the second static graph is modified.

[0115] If only the symbol ID is carried in the service request, access the first resource pool based on the symbol ID to obtain the first static graphic corresponding to the symbol ID; if the first static graphic matching the symbol ID is not obtained in the first resource pool, then access the fragment library with the symbol ID to obtain the original DOM fragment corresponding to the symbol ID, and then convert the static graphic converted from the original DOM fragment (i.e., the first static graphic), and add the first static graphic to the first resource pool. If the first static graphic matching the symbol ID is obtained in the first resource pool, directly apply the first static graphic to the service request.

[0116] In this embodiment, if the configuration factors and symbol IDs carried by multiple service requests are the same, the second static graphic corresponding to the prior service request can be directly utilized, avoiding the process of repeatedly modifying the DOM fragment and converting the DOM fragment into a static graphic, thereby improving the efficiency.

[0117] Embodiment 5:

[0118] Based on the SVG resource reverse reuse method provided in the above Embodiments 1-4, the present invention further provides an apparatus for implementing the SVG resource reverse reuse method, as Figure 6 shown, which is a schematic diagram of the apparatus architecture of an embodiment of the present invention. The apparatus for the SVG resource reverse reuse method in this embodiment includes one or more processors 21 and a memory 22. Among them, Figure 6 one processor 21 is taken as an example.

[0119] The processor 21 and the memory 22 can be connected through a bus or other means, Figure 6 taking the connection through a bus as an example.

[0120] The memory 22, as a non-volatile computer-readable storage medium for the SVG resource reverse reuse method, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the SVG resource reverse reuse method in Embodiment 1. The processor 21 executes various functional applications and data processing of the SVG resource reverse reuse apparatus by running the non-volatile software programs, instructions, and modules stored in the memory 22, that is, implementing the SVG resource reverse reuse methods of Embodiments 1-4.

[0121] The memory 22 may include high-speed random access memory and may also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some embodiments, the memory 22 optionally includes a memory remotely disposed relative to the processor 21, and these remote memories can be connected to the processor 21 through a network. Examples of the above-mentioned network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0122] The program instructions / modules are stored in the memory 22 and, when executed by the one or more processors 21, perform the SVG resource reverse multiplexing in the above embodiments. For example, perform each of the steps described above. Figure 2 shown steps.

[0123] Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the embodiments can be completed by instructing relevant hardware through a program, and this program can be stored in a computer-readable storage medium. The storage medium may include: a read-only memory (ROM, Read Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk, an optical disc, or the like.

[0124] Those skilled in the art can easily understand that the above are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, and improvements made within the spirit and principle of the present invention should be included in the protection scope of the present invention.< / svg> < / svg> < / svg> < / symbol> < / symbol> < / symbol> < / path> < / text> < / path> < / symbol> < / symbol> < / symbol> < / use> < / symbol> < / use> < / symbol> < / symbol>

Claims

1. A method for reverse reuse of SVG resources, characterized in that, Including: Obtain an SVG Symbol graphic, extract at least one DOM fragment from the SVG Symbol graphic, and build a fragment library based on the DOM fragment; Obtain an original DOM fragment matching the service request from the fragment library; Process the original DOM fragment according to the service request to obtain a static graphic; Apply the static graphic to the service request; The method further includes: After obtaining the service request, analyze the service request to determine the graphic style required by the service request; If the graphic style is a static graphic, execute the step of obtaining an original DOM fragment matching the service request from the fragment library; If the graphic style is a dynamic graphic, build a packaged component based on the SVG Symbol graphic, and then implement the service request through the packaged component.

2. The method according to claim 1, characterized in that, The selecting an original DOM fragment matching the scenario request from the fragment library includes: Parse the service request to obtain the symbol ID corresponding to the graphic; Access the fragment library according to the symbol ID to select a DOM fragment carrying the symbol ID, and this DOM fragment is the original DOM fragment.

3. The method according to claim 1, wherein The processing the original DOM fragment according to the service request to obtain a static graphic includes: Parse the service request to obtain the configuration elements corresponding to the graphic; Modify the original DOM fragment based on the configuration elements to obtain a target DOM fragment; Convert the target DOM fragment into a static graphic.

4. The method according to claim 3, wherein The converting the target DOM fragment into a static graphic includes: Remove the symbol tag of the target DOM fragment and retain the graphic description information of the target DOM fragment; Wrap the graphic description information with an svg tag again to obtain an SVG DOM; Convert the SVG DOM into a target string with a preset encoding, and convert the target string into a static graphic matching the service request.

5. The method according to claim 4, wherein The converting the SVG DOM into a target string with a preset encoding and converting the target string into a static graphic matching the service request includes: Parse the service request to obtain the graphic format; Convert the SVG DOM into an XML string, and convert the XML string into a target string with a preset encoding; Concatenate the graphic format and the target string to obtain a static graphic matching the service request.

6. The method according to claim 3, wherein The configuration elements include at least one of color, size, and text.

7. The method according to any one of claims 1 to 6, characterized in that The extracting at least one DOM fragment from the SVG Symbol graphic and building a fragment library based on the DOM fragment includes: Use the document.getElementId method to obtain at least one DOM fragment from the SVG Symbol graphic, store the obtained DOM fragment in the browser memory, and build a fragment library based on the DOM fragment.

8. The method according to any one of claims 1 to 6, characterized in that, The applying the static graphic to the service request includes: Adopt Receive the static graph by using a label or the src attribute of a new Image object so as to apply the static graph to the service request.

9. An apparatus for reverse reuse of SVG resources, characterized in that, Comprising at least one processor and a memory, the at least one processor and the memory are connected via a data bus, the memory stores instructions executable by the at least one processor, and after being executed by the processor, the instructions are used to complete the method for reverse multiplexing SVG resources according to any one of claims 1-8.

Images