CN112835574A - Method and device for processing scalable vector graphics icon - Google Patents
Method and device for processing scalable vector graphics icon Download PDFInfo
- Publication number
- CN112835574A CN112835574A CN201911154061.2A CN201911154061A CN112835574A CN 112835574 A CN112835574 A CN 112835574A CN 201911154061 A CN201911154061 A CN 201911154061A CN 112835574 A CN112835574 A CN 112835574A
- Authority
- CN
- China
- Prior art keywords
- scalable vector
- icon
- vector graphics
- content
- multiplexing
- 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.)
- Granted
Links
- 238000012545 processing Methods 0.000 title claims abstract description 45
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000004590 computer program Methods 0.000 claims description 9
- 239000000126 substance Substances 0.000 claims description 3
- 230000003993 interaction Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 10
- 238000004891 communication Methods 0.000 description 7
- 230000003287 optical effect Effects 0.000 description 4
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device for processing a scalable vector graphics icon, and relates to the technical field of computers. One embodiment of the method comprises: acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents; generating an object corresponding to the scalable vector graphics icon according to the attributes and contents of the scalable vector graphics icon, the scalable vector graphics icon being loaded by the page through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification. This embodiment prevents interaction between different scalable vector graphics icons, reducing the possibility of page display clutter.
Description
Technical Field
The present invention relates to the field of computer technology, and in particular, to a method and apparatus for processing scalable vector graphics icons.
Background
In the process of page development, in order to improve the presentation effect of a page, some icons, such as icons in various formats, such as Scalable Vector Graphics (SVG), JPG, PNG, and the like, are often loaded. Wherein, because the scalable vector graphics icon is defined using XML format, it can be edited by any text editor, and the SVG icon does not lose its graphics quality in case of magnification or change of size. Therefore, in order to ensure the clarity of page display, scalable vector graphics icons are often loaded in pages for display.
Since the contents in the scalable vector graphics icon may contain multiplexing elements, i.e., elements that can be reused, and since the different scalable vector graphics icon designers may be different, the names or identifications corresponding to the different multiplexing elements used in designing the scalable vector graphics icon may be the same, causing the different scalable vector graphics icons to interact with each other when the contents of the plurality of scalable vector graphics icons referenced in the page contain multiplexing elements of the same name, which may easily confuse the display of the page.
To prevent the interaction between different scalable vector graphic icons, there are at least the following technical problems in the prior art: the scalable vector graphics icon is processed when a designer designs the scalable vector graphics icon, and the scalable vector graphics icon cannot be popularized and is difficult to implement; the scalable vector graphics G icon is handled manually by the user, but is time consuming and error prone.
Disclosure of Invention
In view of this, the present invention provides a method and an apparatus for processing a scalable vector graphics icon, which can automatically process corresponding identifiers of different multiplexing elements in the scalable vector graphics icon, reduce the degree of manual involvement, and have high efficiency, high reliability and low probability of errors.
To achieve the above object, according to one aspect of the present invention, there is provided a method of processing a scalable vector graphics icon, comprising:
acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents, the attributes indicate the sizes of the scalable vector graphic icons, and the contents indicate one or more elements forming the scalable vector graphic icons and corresponding identifications of the elements;
generating an object corresponding to the scalable vector graphics icon according to the attributes and contents of the scalable vector graphics icon, the scalable vector graphics icon being loaded by the page through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
Optionally, an object corresponding to the scalable vector graphics icon is generated using Webpack according to the properties and content of the scalable vector graphics icon.
Optionally, in the case that the content of the scalable vector graphics icon contains one or more multiplexing elements, the multiplexing element in the object corresponding to the scalable vector graphics icon has a unique identifier, including:
extracting attributes and contents of the scalable vector graphics icon using a first loader;
traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements;
generating a new unique identifier for each multiplexing element;
traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content;
and generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes.
Optionally, a new unique identifier is generated for each of the multiplexing elements as a function of time.
Optionally, traversing the content of the scalable vector graphics icon, and determining the multiplexing element used in the content according to the original identifier corresponding to the multiplexing element;
and replacing the original identification of the multiplexing element in the content by using the unique identification to generate new content.
To achieve the above object, according to another aspect of the present invention, there is provided an apparatus for processing a scalable vector graphics icon, comprising: the icon processing module is used for processing the icon; wherein the content of the first and second substances,
the icon acquisition module is used for acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents, the attributes indicate the sizes of the scalable vector graphic icons, and the contents indicate one or more elements forming the scalable vector graphic icons and identifiers corresponding to the elements;
the icon processing module is used for generating an object corresponding to the scalable vector graphic icon according to the attribute and the content of the scalable vector graphic icon, and the page loads the scalable vector graphic icon through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
Optionally, the icon processing module is configured to generate an object corresponding to the scalable vector graphics icon by using Webpack according to the attribute and the content of the scalable vector graphics icon.
Optionally, in the case that the content of the scalable vector graphics icon contains one or more multiplexing elements, the multiplexing element in the object corresponding to the scalable vector graphics icon has a unique identifier, including:
extracting attributes and contents of the scalable vector graphics icon using a first loader;
traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements;
generating a new unique identifier for each multiplexing element; traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content;
and generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes.
Optionally, a new unique identifier is generated for each of the multiplexing elements as a function of time.
Optionally, traversing the content of the scalable vector graphics icon, and determining the multiplexing element used in the content according to the original identifier corresponding to the multiplexing element;
and replacing the original identification of the multiplexing element in the content by using the unique identification to generate new content.
To achieve the above object, according to still another aspect of the present invention, there is provided a server for processing a scalable vector graphics icon, comprising: one or more processors; a storage device to store one or more programs that, when executed by the one or more processors, cause the one or more processors to implement any of the methods of processing scalable vector graphics icons as described above.
To achieve the above object, according to still another aspect of the present invention, there is provided a computer readable medium having stored thereon a computer program which, when executed by a processor, implements any one of the methods of processing a scalable vector graphics icon as described above.
The technical scheme of the invention has the following advantages or beneficial effects: and processing the scalable vector graphic icon by using Webpack and the like, generating an object corresponding to the scalable vector graphic icon, loading the scalable vector graphic icon through the object by the page, and under the condition that the scalable vector graphic icon has one or more multiplexing elements, enabling the multiplexing elements in the object to have a newly generated unique identifier, so that different multiplexing elements in the processed one or more scalable vector graphic icons all have different unique identifiers, avoiding the influence among different scalable vector graphic icons and reducing the possibility of page display disorder.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a schematic diagram of the main flow of a method of processing a scalable vector graphics icon according to an embodiment of the invention;
FIG. 2 is a schematic diagram of the main flow of another method of processing a scalable vector graphics icon according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of the main blocks of an apparatus for processing scalable vector graphics icons according to an embodiment of the present invention;
FIG. 4 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
fig. 5 is a schematic block diagram of a computer system suitable for use in implementing a terminal device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a schematic main flow diagram of a method for processing a scalable vector graphics icon according to an embodiment of the present invention, which may specifically include the following steps, as shown in fig. 1:
step S101, one or more scalable vector graphics icons to be loaded on a page are obtained, the scalable vector graphics icons have attributes and contents, the attributes indicate the size of the scalable vector graphics icons, and the contents indicate one or more elements forming the scalable vector graphics icons and corresponding identifiers of the elements.
Scalable vector graphics icons (hereinafter referred to as SVG icons) have many advantages such as high definition and easy editing, and therefore, for rich page display, one or more SVG icons are often loaded in a page. As SVG icons are referred to in the page in the manner of ES6 for insertion into the page for display, specifically using the following code examples:
import PptIcon from"@/image/newppt.svg"。
each SVG icon loaded consists of one or more elements, such as multiple elements of rings, circles, squares, triangles and the like in the SVG icon, and one SVG icon may contain multiple elements which can be reused, namely multiplexing elements, besides, different SVG icons may contain the same or different customized multiplexing elements. Therefore, the identifiers or names corresponding to the multiplexing elements contained in different SVG icons may be the same, and when these SVG icons are loaded in the same page at the same time, page display may be disordered or page display may be incomplete and erroneous, so that the identifiers or names in the multiplexing elements need to be processed. The attributes of the SVG icon refer to a viewBox attribute, an xmlns attribute, and the like, wherein xmlns is a declaration of a namespace, and the viewBox defines the size of the graph through horizontal and vertical coordinates, height, width, and the like.
Furthermore, in the page development process, most of pages are written by using JavaScript, and the loaded SVG icons are written by non-JavaScript, so that when the SVG icons are loaded in the pages, the SVG icons need to be loaded and compiled, and the SVG icons are processed into a JavaScript object, so that the loaded SVG icons can be displayed on the pages.
Step S102, generating an object corresponding to the scalable vector graphics icon according to the attribute and the content of the scalable vector graphics icon, and loading the scalable vector graphics icon through the object by the page; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
It can be understood that, under the condition that the content of the SVG icon contains one or more multiplexing elements, in order to ensure that each different multiplexing element in the generated JavaScript object corresponding to the SVG icon has a different unique identifier, a new unique identifier can be generated for each multiplexing element, the original identifier of a part of multiplexing elements can be also reserved, and meanwhile, the identifier of a part of multiplexing elements is changed, so that the uniqueness of the identifier of an unused multiplexing element is ensured, and the mutual influence among a plurality of SVG icons is prevented.
It is worth noting that under the condition that none of the quoted SVG icons has multiplexing elements, mutual influence among the SVG icons does not need to be considered, and the SVG icons can be directly processed into JavaScript objects for page display.
In a preferred embodiment, the object corresponding to the scalable vector graphics icon is generated using Webpack based on the properties and content of the scalable vector graphics icon.
By Webpack is meant a static module wrapper (module bundler) for modern JavaScript applications. When a Webpack physics application program is used, it recursively builds a dependency graph (dependency graph) that contains each module that the application requires, and then packages all of these modules into one or more bundles. Webpack itself only understands JavaScript, so Webpack needs to have the Webpack handle those non-JavaScript files by means of a loader. loader can convert all types of files into effective modules that Webpack can process, and then you can process the files by using the packing capability of Webpack. Essentially, Webpack loader converts all types of files into modules that the dependency graph (and ultimately bundle) of the application can reference directly. Thus, in a preferred embodiment, SVG icons can be processed by Webpack loader, i.e., using a loader that processes SVG icons, as JavaScript objects that fit the page.
It can be understood that after the SVG icons are processed by the first loader of the existing Webpack, only the attributes and contents of the SVG icons can be obtained, and therefore, the attributes and contents of the SVG icons need to be processed by using a preset or pre-programmed second loader, that is, the identifications of multiplexing elements in the SVG icons are changed, so that different multiplexing elements in all SVG icon contents have different unique identifications.
More specifically, in the case where one or more multiplexed elements are contained in the content of the scalable vector graphics icon, the multiplexed elements in the object to which the scalable vector graphics icon corresponds have a unique identifier, including: extracting attributes and contents of the scalable vector graphics icon using a first loader; traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements; generating a new unique identifier for each multiplexing element; traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content; and generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes.
The definition tag of the multiplexing element is a defs tag in the SVG icon, and the defs is used as a container of the quoted element in the SVG icon to realize multiple use of the multiplexing element, so that in the actual processing process, the corresponding multiplexing element can be determined through the defs tag contained in the SVG icon content, namely, all the elements with the defs tag in the SVG icon content are the multiplexing element. Specifically, taking the identifiers corresponding to the multiplexing elements obtained by the defs tag as A, B, C, D as 1, 2, 1, and 4 as examples, since A, B, C, D is different multiplexing elements, but different multiplexing elements a and C have the same identifier "1", the identifier of the multiplexing element needs to be changed to make different multiplexing elements have different identifiers: if the identifier of the modified multiplexing element C is 3, the identifiers corresponding to the modified multiplexing element A, B, C, D are 1, 2, 3, and 4, that is, different identifiers have different unique identifiers; or directly generate new unique identifications 201901, 201902, 201903, 201904 for the multiplexing element A, B, C, D, respectively, such that different multiplexing elements have different unique identifications.
In a preferred embodiment, a new unique identification is generated for each of the multiplexing elements as a function of time. Because the time can be accurate to microsecond, nanosecond and other levels, the uniqueness of the newly generated identifiers of different multiplexing elements can be well ensured, and the repetition is avoided.
In a preferred embodiment, traversing the content of the scalable vector graphics icon, and determining the multiplexing elements used in the content according to the original identifiers corresponding to the multiplexing elements; and replacing the original identification of the multiplexing element in the content by using the unique identification to generate new content. That is, after different multiplexing elements are made to have different unique identifiers, the original identifier of the multiplexing element needs to be used to locate the multiplexing element in one or more SVG icon contents referenced by a page, and then the original identifier of the multiplexing element needs to be replaced with a new unique identifier. Specifically, the multiplexing element obtained through the defs label is taken as a, the corresponding identifier is 1, and the multiplexing element a generates a new unique identifier 201901 for example, so that the content of the SVG icon is traversed, the multiplexing element a in the content is located by using the original identifier 1, and the original identifier 1 of the multiplexing element is replaced by using the unique identifier 201901 of the multiplexing element a, so that new content containing the unique identifier of the multiplexing element is obtained, and normal display of different SVG icons is ensured.
Based on the above embodiment, the scalable vector graphics icon is processed based on Webpack and the like, an object corresponding to the scalable vector graphics icon is generated, the page loads the scalable vector graphics icon through the object, and in the case that the scalable vector graphics icon has one or more multiplexing elements, the multiplexing elements in the object have a newly generated unique identifier, so that different multiplexing elements in the processed one or more scalable vector graphics icons each have a different unique identifier, the influence between different scalable vector graphics icons is avoided, and the possibility of page display disorder is reduced.
Referring to fig. 2, based on the above embodiment, there is provided another schematic diagram of a main flow of processing a scalable vector graphics icon, and the method specifically includes the following steps:
in step S201, one or more scalable vector graphics icons to be loaded on a page are obtained, the scalable vector graphics icons having attributes and content.
Step S202, using a first loader, extracting the attributes and contents of the scalable vector graphics icon. The first loader is a loader for processing the SVG icons in the Webpack.
Step S203, traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements. The second loader is a preset or self-written loader for continuously processing the content of the SVG icon in the Webpack.
Step S204, generating a new unique identifier for each multiplexing element. A new unique identifier may be generated for each multiplexing element according to time, or a different unique identifier may be generated for each multiplexing element according to any other information that can distinguish multiplexing elements, such as arabic numbers, letters, etc.
Step S205, traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content.
Step S206, generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes. And newly generated objects corresponding to the scalable vector graphics icons are JavaScript objects, and each multiplexing element in the objects has different unique identifiers so that the SVG icons can be normally displayed on the page.
Step S207, the page loads the scalable vector graphics icon through the object.
Referring to fig. 3, on the basis of the above embodiment, there is provided an apparatus 300 for processing a scalable vector graphics icon, comprising: an icon acquisition module 301 and an icon processing module 302; wherein the content of the first and second substances,
the icon obtaining module 301 is configured to obtain one or more scalable vector graphics icons to be loaded on a page, where the scalable vector graphics icons have an attribute and content, the attribute indicates a size of the scalable vector graphics icon, and the content indicates one or more elements constituting the scalable vector graphics icon and an identifier corresponding to the elements;
the icon processing module 302 is configured to generate an object corresponding to the scalable vector graphics icon according to the attribute and content of the scalable vector graphics icon, and the page loads the scalable vector graphics icon through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
In a preferred embodiment, the icon processing module 302 is configured to generate an object corresponding to the scalable vector graphics icon using Webpack according to the property and content of the scalable vector graphics icon.
In a preferred embodiment, said in the case that the content of said scalable vector graphics icon contains one or more multiplexing elements, said multiplexing element in said object to which said scalable vector graphics icon corresponds has a unique identifier, comprising:
extracting attributes and contents of the scalable vector graphics icon using a first loader;
traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements;
generating a new unique identifier for each multiplexing element; traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content;
and generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes.
In a preferred embodiment, a new unique identification is generated for each of the multiplexing elements as a function of time.
In a preferred embodiment, traversing the content of the scalable vector graphics icon, and determining the multiplexing elements used in the content according to the original identifiers corresponding to the multiplexing elements; and replacing the original identification of the multiplexing element in the content by using the unique identification to generate new content.
Fig. 4 illustrates an exemplary system architecture 400 for a method of processing a scalable vector graphics icon or an apparatus for processing a scalable vector graphics icon to which embodiments of the present invention may be applied.
As shown in fig. 4, the system architecture 400 may include terminal devices 401, 402, 403, a network 404, and a server 405. The network 404 serves as a medium for providing communication links between the terminal devices 401, 402, 403 and the server 405. Network 404 may include various types of connections, such as wire, wireless communication links, or fiber optic cables, to name a few.
A user may use terminal devices 401, 402, 403 to interact with a server 405 over a network 404 to receive or send messages or the like. The terminal devices 401, 402, 403 may have various communication client applications installed thereon, such as shopping applications, web browser applications, search applications, instant messaging tools, mailbox clients, social platform software, and the like.
The terminal devices 401, 402, 403 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 405 may be a server that provides various services, such as a background management server that supports shopping websites browsed by users using the terminal devices 401, 402, and 403. The background management server can analyze and process the received data such as the product information inquiry request and feed back the processing result (such as a page which quotes the SVG icon) to the terminal equipment.
It should be noted that the method for processing the scalable vector graphics icon provided by the embodiment of the present invention is generally executed by the server 405, and accordingly, the apparatus for processing the scalable vector graphics icon is generally disposed in the server 405.
It should be understood that the number of terminal devices, networks, and servers in fig. 4 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 5, shown is a block diagram of a computer system 500 suitable for use with a terminal device implementing an embodiment of the present invention. The terminal device shown in fig. 5 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 501.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor comprises an icon acquisition module and an icon processing module. The names of these modules do not in some cases constitute a limitation on the module itself, for example, the icon capture module may also be described as a "module for capturing one or more scalable vector graphics icons to be loaded on a page".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents, the attributes indicate the sizes of the scalable vector graphic icons, and the contents indicate one or more elements forming the scalable vector graphic icons and corresponding identifications of the elements; generating an object corresponding to the scalable vector graphics icon according to the attributes and contents of the scalable vector graphics icon, the scalable vector graphics icon being loaded by the page through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
According to the technical scheme of the embodiment of the invention, the scalable vector graphics icon is processed based on Webpack and the like, the object corresponding to the scalable vector graphics icon is generated, the page loads the scalable vector graphics icon through the object, and under the condition that the scalable vector graphics icon has one or more multiplexing elements, the multiplexing elements in the object have the newly generated unique identifier, so that different multiplexing elements in the processed one or more scalable vector graphics icons have different unique identifiers, the influence among different scalable vector graphics icons is avoided, and the possibility of page display disorder is reduced.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (8)
1. A method of processing a scalable vector graphics icon, comprising:
acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents, the attributes indicate the sizes of the scalable vector graphic icons, and the contents indicate one or more elements forming the scalable vector graphic icons and corresponding identifications of the elements;
generating an object corresponding to the scalable vector graphics icon according to the attributes and contents of the scalable vector graphics icon, the scalable vector graphics icon being loaded by the page through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
2. The method of processing a scalable vector graphics icon according to claim 1,
and generating an object corresponding to the scalable vector graphics icon by using Webpack according to the attribute and the content of the scalable vector graphics icon.
3. The method of handling a scalable vector graphics icon according to claim 2, wherein said multiplexing element in said object to which said scalable vector graphics icon corresponds having a unique identity if said scalable vector graphics icon has one or more multiplexing elements in its content, comprising:
extracting attributes and contents of the scalable vector graphics icon using a first loader;
traversing the content of the scalable vector graphics icon by using a second loader, and acquiring one or more multiplexing elements in the content according to the definition tags of the multiplexing elements, wherein the elements with the definition tags in the content are multiplexing elements;
generating a new unique identifier for each multiplexing element;
traversing the content of the scalable vector graphics icon, and replacing the original identifier corresponding to the multiplexing element in the content with the unique identifier to generate new content;
and generating an object corresponding to the scalable vector graphics icon according to the new content and the attributes.
4. A method of processing a scalable vector graphics icon according to claim 3,
and generating a new unique identifier for each multiplexing element according to the time.
5. A method of processing a scalable vector graphics icon according to claim 3,
traversing the content of the scalable vector graphics icon, and determining the multiplexing elements used in the content according to the original identifiers corresponding to the multiplexing elements;
and replacing the original identification of the multiplexing element in the content by using the unique identification to generate new content.
6. An apparatus for processing a scalable vector graphics icon, comprising: the icon processing module is used for processing the icon; wherein the content of the first and second substances,
the icon acquisition module is used for acquiring one or more scalable vector graphic icons to be loaded on a page, wherein the scalable vector graphic icons have attributes and contents, the attributes indicate the sizes of the scalable vector graphic icons, and the contents indicate one or more elements forming the scalable vector graphic icons and identifiers corresponding to the elements;
the icon processing module is used for generating an object corresponding to the scalable vector graphic icon according to the attribute and the content of the scalable vector graphic icon, and the page loads the scalable vector graphic icon through the object; in the case where one or more multiplexing elements are contained in the content of the scalable vector graphics icon, the multiplexing element in the object to which the scalable vector graphics icon corresponds has a unique identification.
7. A server for processing scalable vector graphics icons, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-5.
8. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911154061.2A CN112835574B (en) | 2019-11-22 | 2019-11-22 | Method and device for processing scalable vector graphic icons |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911154061.2A CN112835574B (en) | 2019-11-22 | 2019-11-22 | Method and device for processing scalable vector graphic icons |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112835574A true CN112835574A (en) | 2021-05-25 |
| CN112835574B CN112835574B (en) | 2024-03-01 |
Family
ID=75921707
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911154061.2A Active CN112835574B (en) | 2019-11-22 | 2019-11-22 | Method and device for processing scalable vector graphic icons |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112835574B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100079459A1 (en) * | 2008-10-01 | 2010-04-01 | International Business Machines Corporation | method and system for generating and displaying an interactive dynamic graph view of multiply connected objects |
| CN102508991A (en) * | 2011-09-30 | 2012-06-20 | 北京航空航天大学 | Method of constructing virtual experiment teaching scene based on image material |
| CN103970896A (en) * | 2014-05-27 | 2014-08-06 | 重庆大学 | Method and system for graphic display based on scalable vector graphic continuous information |
| CN105700867A (en) * | 2014-12-11 | 2016-06-22 | 海德堡印刷机械股份公司 | Method for generating executable applications with dynamic scalable vector graphics |
| US20160322029A1 (en) * | 2015-04-30 | 2016-11-03 | Intuit Inc. | Rendering graphical assets natively on multiple screens of electronic devices |
| WO2019004670A1 (en) * | 2017-06-30 | 2019-01-03 | Samsung Electronics Co., Ltd. | Method and electronic device for rendering scalable vector graphics content |
-
2019
- 2019-11-22 CN CN201911154061.2A patent/CN112835574B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100079459A1 (en) * | 2008-10-01 | 2010-04-01 | International Business Machines Corporation | method and system for generating and displaying an interactive dynamic graph view of multiply connected objects |
| CN102508991A (en) * | 2011-09-30 | 2012-06-20 | 北京航空航天大学 | Method of constructing virtual experiment teaching scene based on image material |
| CN103970896A (en) * | 2014-05-27 | 2014-08-06 | 重庆大学 | Method and system for graphic display based on scalable vector graphic continuous information |
| CN105700867A (en) * | 2014-12-11 | 2016-06-22 | 海德堡印刷机械股份公司 | Method for generating executable applications with dynamic scalable vector graphics |
| US20160322029A1 (en) * | 2015-04-30 | 2016-11-03 | Intuit Inc. | Rendering graphical assets natively on multiple screens of electronic devices |
| WO2019004670A1 (en) * | 2017-06-30 | 2019-01-03 | Samsung Electronics Co., Ltd. | Method and electronic device for rendering scalable vector graphics content |
Non-Patent Citations (4)
| Title |
|---|
| XIANBIN WANG等: "Cross-Layer Signaling and Interface Design for OFDM Systems Using Overlay Watermarks", XIANBIN WANG * |
| 刘东明;陈联;李昕岩;: "基于可伸缩矢量图形的手绘几何图形结构分析方法", 计算机应用, no. 04 * |
| 郑晨;杨骁;: "SVG网页数字图像标准的应用", 网络安全技术与应用, no. 01 * |
| 黄缙华;赵强;: "基于开放标准的电力***图数模一体化研究", 现代电力, no. 06 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112835574B (en) | 2024-03-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107832045B (en) | Method and apparatus for cross programming language interface conversion | |
| CN109062563B (en) | Method and device for generating page | |
| CN107491382B (en) | Log output method and device | |
| CN110554874A (en) | Method and device for reusing webpage components of SaaS platform | |
| CN113377653B (en) | Method and device for generating test cases | |
| US20160371244A1 (en) | Collaboratively reconstituting tables | |
| CN113031946A (en) | Method and device for rendering page component | |
| CN113382083A (en) | Webpage screenshot method and device | |
| CN113553123B (en) | Data processing method, device, electronic equipment and storage medium | |
| CN112818026A (en) | Data integration method and device | |
| CN111381899A (en) | Method and apparatus for developing target system | |
| CN113360106B (en) | Webpage printing method and device | |
| CN112783887A (en) | Data processing method and device based on data warehouse | |
| CN112486482A (en) | Page display method and device | |
| CN111767498B (en) | Method and device for realizing file information sharing | |
| CN112835574B (en) | Method and device for processing scalable vector graphic icons | |
| CN112256254A (en) | Method and device for generating layout code | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| CN113761415A (en) | Page display method and device | |
| CN114528510A (en) | Webpage data processing method and device, electronic equipment and medium | |
| CN113377376A (en) | Data packet generation method, data packet generation device, electronic device, and storage medium | |
| CN112926294A (en) | Template file generation method and device | |
| CN113742321A (en) | Data updating method and device | |
| CN111179164A (en) | Method and device for generating thumbnail | |
| CN112784187A (en) | Page display method and device |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |