CN112989242A - Method for generating and uploading SVG sprite picture - Google Patents
Method for generating and uploading SVG sprite picture Download PDFInfo
- Publication number
- CN112989242A CN112989242A CN202110338566.5A CN202110338566A CN112989242A CN 112989242 A CN112989242 A CN 112989242A CN 202110338566 A CN202110338566 A CN 202110338566A CN 112989242 A CN112989242 A CN 112989242A
- Authority
- CN
- China
- Prior art keywords
- svg
- character string
- icons
- generating
- uploading
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/903—Querying
- G06F16/90335—Query processing
- G06F16/90344—Query processing by using string matching techniques
-
- 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)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computational Linguistics (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a method for generating and uploading SVG sprite pictures, which comprises the following steps: step 1: selecting all SVG icons of the SVG file to be generated in Figma; step 2: acquiring all selected SVG icons through a Figma API; and step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and respectively converting the obtained byte arrays into corresponding SVG character strings; and 4, step 4: extracting an SVG attribute character string and an SVG content character string in the SVG character string respectively through a regular expression, and generating an smbol character string; and 5: merging smbol character strings generated by all the obtained SVG icons to obtain SVG files; step 6: and uploading the SVG file to a server through a Web API fetch. According to the invention, a plurality of SVG icons are combined into one SVG file, so that the number of http requests is effectively reduced when Web Application is used, and the rendering speed of the browser is improved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method for generating and uploading SVG sprite pictures.
Background
SVG is a preferred scheme for establishing an icon system, but a large amount of SVG icons in Web application can cause more http requests, so that rendering of a browser is blocked, and the rendering speed of the browser is reduced. Therefore, how to reduce the number of http requests of icon and improve the rendering speed of the browser is a current urgent task.
Disclosure of Invention
The invention aims to solve the problems and provides a method for generating and uploading SVG (scalable vector graphics) snow-Bill images, which can reduce the number of http requests of icon and improve the rendering speed of a browser.
The purpose of the invention is realized by the following technical scheme: a method for generating and uploading SVG sprites comprises the following steps:
step 1: selecting all SVG icons of the SVG file to be generated in Figma;
step 2: acquiring all selected SVG icons through a Figma API;
and step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and respectively converting the obtained byte arrays into corresponding SVG character strings;
and 4, step 4: extracting an SVG attribute character string and an SVG content character string in the SVG character string respectively through a regular expression, and generating a symbol character string;
and 5: merging symbol character strings generated by all the obtained SVG icons to obtain an SVG file;
step 6: and uploading the SVG file to a server through a Web API fetch.
Further, the step 1 is preceded by creating an SVG icon in Figma, wherein the SVG icon is to be generated into an SVG file.
Step 5 is followed by naming the SVG file.
And in the step 4, extracting the SVG attribute character string and the SVG content character string in the SVG character string through a regular expression/< SVG \ S ([ ^ > ] +) > ([ \ S \ S ] +) </SVG >/i.
The generation of the smbol character string in the step 4 comprises the following steps:
A. matching the SVG attribute character string by circularly using a regular expression/(\ w +) = \ ([ "] +), and/g, and initializing a symbol attribute object;
B. and generating the symbol character string by using the SVG content character string, the initialized symbol attribute object and the name of the SVG icon.
Compared with the prior art, the invention has the following advantages and beneficial effects: the method selects the appointed SVG icon in Figma, traverses the object currently selected in Figma, calls the exportAsync interface to export a byte array and convert the byte array into an SVG character string, extracts the content of the character string and combines the character string into an SVG file, calls the fetch interface to upload the SVG file to the appointed server, combines a plurality of SVG icons into an SVG file, effectively reduces the number of times of http requests when Web Application is used, and improves the rendering speed of the browser. In addition, the SVG files are merged through the Figma plug-in, a designer is liberated from a complicated and repeated process of creating, editing and compressing the SVG into the SVG sprite and uploading the SVG sprite to the server, communication between the designer and a developer can be reduced, and the designer can concentrate on the design of the SVG icons.
Drawings
FIG. 1 is a flow chart of the method of the present invention.
Detailed Description
The present invention will be described in further detail with reference to examples, but the embodiments of the present invention are not limited thereto.
Examples
As shown in fig. 1, the method for generating and uploading the SVG sprite map of the present invention includes the following steps:
step 1: and selecting all SVG icons in the Figma to generate the SVG file.
Step 2: and acquiring all the selected SVG icons through a Figma API.
And step 3: traversing all the obtained SVG icons, calling an exportAsync method provided by a Figma API to obtain byte arrays of all the SVG icons, and converting the byte arrays into corresponding SVG character strings by using a decode method in a TextCoder text decoder of a Web API; the byte array is the uint8 array.
And 4, step 4: and respectively extracting the SVG attribute character string and the SVG content character string in the SVG character string through a regular expression/< SVG \ S ([ ^ > ] +) > ([ \ S \ S ] +) < \/SVG >/i, and generating the smbol character string. Specifically, the generation of the smbol character string comprises the following steps:
A. and circularly using a regular expression/(\\ w +) = \ ([ "] +), and/g to match the SVG attribute character string and initialize the symbol attribute object. The character string conforming to the key-result mode is used as a key and a value to initialize the symbol attribute object, and the object comprises a plurality of key values.
B. And generating the symbol character string by using the SVG content character string, the initialized symbol attribute object and the name of the SVG icon. Specifically, a symbol element [ document. createlement ('symbol') Web API ], a symbol attribute object is traversed, an attribute of the symbol element is set through a [ setattenbute Web API ], the name of an SVG icon is the value of the attribute name id of the symbol element, and meanwhile, an [ insert adjjacenthtml Web API ] is called to insert an SVG content character string into the symbol element, so as to generate the symbol character string.
And 5: and merging symbol character strings generated by all the obtained SVG icons, namely creating a defs element, and calling an 'insert AdjacentHTML Web API' to insert the symbol character strings into the defs element to merge the symbol character strings to obtain the SVG file.
Step 6: and uploading the SVG file to a server through a Web API fetch.
As a preferable scheme, naming the obtained SVG file to facilitate searching is further included after the step 5.
In addition, before step 1, creating an SVG icon in Figma for generating an SVG file is also included. The method comprises the following specific steps: the Frame is first created in Figma and named Frame 1. And then to the SVG icon in Frame 1.
According to the invention, a plurality of SVG icons are combined into one SVG file, so that the number of http requests is effectively reduced when Web Application is used, and the rendering speed of the browser is improved. In addition, the SVG files are merged through the Figma plug-in, a designer is liberated from a complicated and repeated process of creating, editing and compressing the SVG into the SVG sprite and uploading the SVG sprite to the server, communication between the designer and a developer can be reduced, and the designer can concentrate on the design of the SVG icons.
As described above, the present invention can be preferably realized.
Claims (5)
1. A method for generating and uploading SVG sprites is characterized by comprising the following steps:
step 1: selecting all SVG icons of the SVG file to be generated in Figma;
step 2: acquiring all selected SVG icons through a Figma API;
and step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and respectively converting the obtained byte arrays into corresponding SVG character strings;
and 4, step 4: extracting an SVG attribute character string and an SVG content character string in the SVG character string respectively through a regular expression, and generating a symbol character string;
and 5: merging symbol character strings generated by all the obtained SVG icons to obtain an SVG file;
step 6: and uploading the SVG file to a server through a Web API fetch.
2. A method of generating and uploading SVG sprites according to claim 1, further comprising, prior to step 1, creating an SVG icon in Figma for which an SVG file is to be generated.
3. The method of generating and uploading SVG sprites according to claim 1, further comprising naming SVG files after step 5.
4. The method for generating and uploading SVG sprites according to claim 1, wherein SVG attribute strings and SVG content strings in SVG strings are extracted in step 4 by regular expression/< SVG \ S ([ < > ] +) > ([ \ S \ S ] +) < \/SVG >/i.
5. The method for generating and uploading SVG sprites according to claim 1, wherein the step 4 of generating smbol character strings comprises the steps of:
A. matching the SVG attribute character string by circularly using a regular expression/(\ w +) = \ ([ "] +), and/g, and initializing a symbol attribute object;
B. and generating the symbol character string by using the SVG content character string, the initialized symbol attribute object and the name of the SVG icon.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110338566.5A CN112989242B (en) | 2021-03-30 | 2021-03-30 | Method for generating and uploading SVG (scalable vector graphics) snowplow |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110338566.5A CN112989242B (en) | 2021-03-30 | 2021-03-30 | Method for generating and uploading SVG (scalable vector graphics) snowplow |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112989242A true CN112989242A (en) | 2021-06-18 |
| CN112989242B CN112989242B (en) | 2023-06-13 |
Family
ID=76338334
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110338566.5A Active CN112989242B (en) | 2021-03-30 | 2021-03-30 | Method for generating and uploading SVG (scalable vector graphics) snowplow |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112989242B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826953A (en) * | 2022-12-16 | 2023-03-21 | 杭州易知微科技有限公司 | Method and system for automatically generating and managing icons |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6886131B1 (en) * | 1999-04-13 | 2005-04-26 | Canon Kabushiki Kaisha | Data processing method and apparatus |
| US7210095B1 (en) * | 2000-10-31 | 2007-04-24 | Cisco Technology, Inc. | Techniques for binding scalable vector graphics to associated information |
| US20070133593A1 (en) * | 2005-11-21 | 2007-06-14 | Udaya Shankara | Searching Strings Representing a Regular Expression |
| CN105550247A (en) * | 2015-12-08 | 2016-05-04 | 许继电气股份有限公司 | SVG standard customizable graphic symbol based power system graphic display method |
| US20170308576A1 (en) * | 2016-04-26 | 2017-10-26 | International Business Machines Corporation | Character matching in text processing |
| US20190004778A1 (en) * | 2017-06-30 | 2019-01-03 | Samsung Electronics Co., Ltd. | Method and electronic device for rendering scalable vector graphics content |
| CN112422543A (en) * | 2020-11-09 | 2021-02-26 | 建信金融科技有限责任公司 | Anti-crawler method and device |
| CN112445478A (en) * | 2020-12-09 | 2021-03-05 | 北京有竹居网络技术有限公司 | Graphic file processing method, device, equipment and medium |
-
2021
- 2021-03-30 CN CN202110338566.5A patent/CN112989242B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6886131B1 (en) * | 1999-04-13 | 2005-04-26 | Canon Kabushiki Kaisha | Data processing method and apparatus |
| US7210095B1 (en) * | 2000-10-31 | 2007-04-24 | Cisco Technology, Inc. | Techniques for binding scalable vector graphics to associated information |
| US20070133593A1 (en) * | 2005-11-21 | 2007-06-14 | Udaya Shankara | Searching Strings Representing a Regular Expression |
| CN105550247A (en) * | 2015-12-08 | 2016-05-04 | 许继电气股份有限公司 | SVG standard customizable graphic symbol based power system graphic display method |
| US20170308576A1 (en) * | 2016-04-26 | 2017-10-26 | International Business Machines Corporation | Character matching in text processing |
| US20190004778A1 (en) * | 2017-06-30 | 2019-01-03 | Samsung Electronics Co., Ltd. | Method and electronic device for rendering scalable vector graphics content |
| CN112422543A (en) * | 2020-11-09 | 2021-02-26 | 建信金融科技有限责任公司 | Anti-crawler method and device |
| CN112445478A (en) * | 2020-12-09 | 2021-03-05 | 北京有竹居网络技术有限公司 | Graphic file processing method, device, equipment and medium |
Non-Patent Citations (2)
| Title |
|---|
| NO-ONE: "Figma设计系统中图标的注意事项", 《HTTPS：//WWW.UIFIG.COM/1146.HTML》 * |
| 孟秀霞: "Web UI技术的研究与应用", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115826953A (en) * | 2022-12-16 | 2023-03-21 | 杭州易知微科技有限公司 | Method and system for automatically generating and managing icons |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112989242B (en) | 2023-06-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20230075403A1 (en) | Voice packet recommendation method and apparatus, device and storage medium | |
| JP2008520131A (en) | Method and system for streaming documents, email attachments, and maps to a wireless device | |
| CN105589836A (en) | Document previewing method, terminal and server | |
| CN110609965A (en) | Page display method and device and storage medium | |
| CN107622519A (en) | 3D model hybrid rendering system and method based on mobile device | |
| CN113382083B (en) | Webpage screenshot method and device | |
| CN113723064B (en) | Stream type document online editing method | |
| CN112487763A (en) | SVG-based OFD file online display method, server side and system | |
| CN117076811A (en) | Webpage export method, device, equipment and storage medium | |
| CN114422718A (en) | Video conversion method and device, electronic equipment and storage medium | |
| CN115131470A (en) | A kind of graphic material synthesis method, device, electronic device and storage medium | |
| JP2012504362A (en) | Method and apparatus for providing rich media service | |
| CN116168108A (en) | Method and device for generating image from text, storage medium and electronic device | |
| CN112989242A (en) | Method for generating and uploading SVG sprite picture | |
| CN116432609A (en) | Method for converting OFD file into PDF file | |
| CN113448649A (en) | Redis-based home page data loading server and method | |
| CN106664299A (en) | Media presentation guide method based on hyper text transport protocol media stream and related devic | |
| CN114401406B (en) | Facial video encoding method, decoding method and device | |
| KR20050108677A (en) | Method for creating and managing flash automatically and recording medium | |
| CN109344217A (en) | A kind of WebGIS implementation method based on JavaScript and SVG | |
| CN113515213A (en) | Cursor shape synchronization method, remote browsing system, equipment and storage medium | |
| CN115587265B (en) | SVG resource inverse multiplexing method and device | |
| CN118629051B (en) | Picture generation method and device, and text-to-graphic model training method and device | |
| US8639845B2 (en) | Method for editing multimedia pages on a terminal using pre-stored parameters of objects appearing in scenes | |
| US20250299431A1 (en) | Method, apparatus, and electronic device for three-dimensional scene generation |
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 |