CN112989242B - Method for generating and uploading SVG (scalable vector graphics) snowplow - Google Patents

Method for generating and uploading SVG (scalable vector graphics) snowplow Download PDF

Info

Publication number
CN112989242B
CN112989242B CN202110338566.5A CN202110338566A CN112989242B CN 112989242 B CN112989242 B CN 112989242B CN 202110338566 A CN202110338566 A CN 202110338566A CN 112989242 B CN112989242 B CN 112989242B
Authority
CN
China
Prior art keywords
svg
character strings
generating
icons
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.)
Active
Application number
CN202110338566.5A
Other languages
Chinese (zh)
Other versions
CN112989242A (en
Inventor
陈恒君
李骏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Multipoint Shenzhen Digital Technology Co ltd
Original Assignee
Multipoint Shenzhen Digital Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Multipoint Shenzhen Digital Technology Co ltd filed Critical Multipoint Shenzhen Digital Technology Co ltd
Priority to CN202110338566.5A priority Critical patent/CN112989242B/en
Publication of CN112989242A publication Critical patent/CN112989242A/en
Application granted granted Critical
Publication of CN112989242B publication Critical patent/CN112989242B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR 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; CALCULATING OR 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

Abstract

The invention discloses a method for generating and uploading SVG (scalable vector graphics) snowplow images, which comprises the following steps: step 1: selecting all SVG icons to be used for generating SVG files in the Figma; step 2: all selected SVG icons are obtained through a Figma API; step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and converting the obtained byte arrays into corresponding SVG character strings respectively; step 4: respectively extracting SVG attribute character strings and SVG content character strings in the SVG character strings through regular expressions, and generating smbol character strings; step 5: combining all the smbol character strings generated by the obtained SVG icons to obtain an SVG file; 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 http request times are effectively reduced when Web Application is used, and the rendering speed of a browser is improved.

Description

Method for generating and uploading SVG (scalable vector graphics) snowplow
Technical Field
The invention relates to the technical field of computers, in particular to a method for generating and uploading SVG (scalable vector graphics) snowflake figures.
Background
SVG is a preferred scheme for establishing an icon system, but a large number of SVG icon in Web application can cause more http requests, so that the 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 increase the rendering speed of the browser is an urgent task at present.
Disclosure of Invention
The invention aims to solve the problems and provide a method for generating and uploading SVG (static var generator) snowplow images, which can reduce the number of http requests of icon, improve the rendering speed of a browser.
The aim of the invention is achieved by the following technical scheme: a method of generating and uploading SVG snowplow images, comprising the steps of:
step 1: selecting all SVG icons to be used for generating SVG files in the Figma;
step 2: all selected SVG icons are obtained through a Figma API;
step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and converting the obtained byte arrays into corresponding SVG character strings respectively;
step 4: respectively extracting SVG attribute character strings and SVG content character strings in the SVG character strings through regular expressions, and generating symbol character strings;
step 5: merging the 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 further includes creating an SVG icon in the Figma to generate an SVG file.
The step 5 further includes 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 the regular expression/< SVG/S ([ ]) ([ \S\s ] +) </SVG >/i.
The step 4 of generating the smbol character string comprises the following steps:
A. circularly using a regular expression/(\w+) = \ "([ ]") "/g to match SVG attribute character strings, and initializing a symbol attribute object;
B. and generating a 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: according to the invention, a designated SVG icon is selected in the Figma, an object in the current selection of the Figma is traversed, an exportAsync interface is called to export a byte array and converted into a SVG character string, then the content of the character string is extracted and combined into a SVG file, and then a fetch interface is called to upload the SVG file to a designated server, and a plurality of SVG icons are combined into one SVG file, so that the http request times are effectively reduced when Web Application is used, and the rendering speed of a browser is improved. In addition, the SVG files are combined through the Figma plug-in, a designer is liberated from the tedious and repeated process of creating and editing SVG, compressing and synthesizing the SVG snowplow and uploading the SVG snowplow to a server, communication between the designer and a developer can be reduced, and the designer is more focused on the design of the SVG icon.
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 embodiments of the present invention are not limited thereto.
Examples
As shown in fig. 1, the method for generating and uploading the SVG snowplow according to the present invention includes the following steps:
step 1: all SVG icons in the Figma that are to generate SVG files are selected.
Step 2: all SVG icons selected are obtained through the Figma API.
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 arrays into corresponding SVG character strings by using a decoding method in a textCoder text decoder of a Web API; the byte array is a uint8 array.
Step 4: extracting SVG attribute character strings and SVG content character strings in the SVG character strings respectively through regular expressions/< svg\s ([ ] +) > ([ \S\s ] +) </SVG >/i, and generating smbol character strings. Specifically, the generation of the smbol character string includes the following steps:
A. and circularly using the regular expression/(\w+) = \ "([ ]") \g to match the SVG attribute character strings, and initializing the symbol attribute object. The character string conforming to the key= "valid" mode is used as a key and a value to initialize a symbol attribute object, and the object includes a plurality of key values.
B. And generating a 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 ('symbol') Web API is created, a symbol attribute object is traversed, the attribute of the symbol element is set through a method of [ setAttribute Web API ], the name of the SVG icon is the value of the symbol element attribute name id, and meanwhile, the SVG content string is inserted into the symbol element to generate the symbol string by calling [ insertAdjacentHTML Web API ].
Step 5: and merging the symbol strings generated by all the obtained SVG icons, namely creating a defs element, and calling [ insertAdjacentHTML Web API ] to insert the symbol strings into the defs element to merge the symbol 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, the step 5 further comprises naming the obtained SVG file, so that the SVG file is convenient to search.
In addition, before step 1, creating an SVG icon in the Figma to generate an SVG file. The method comprises the following steps: a Frame is first created in Figma and named Frame1. And then icons SVG into Frame1.
According to the invention, a plurality of SVG icons are combined into one SVG file, so that the http request times are effectively reduced when Web Application is used, and the rendering speed of the browser is improved. In addition, the SVG files are combined through the Figma plug-in, a designer is liberated from the tedious and repeated process of creating and editing SVG, compressing and synthesizing the SVG snowplow and uploading the SVG snowplow to a server, communication between the designer and a developer can be reduced, and the designer is more focused on the design of the SVG icon.
As described above, the present invention can be well implemented.

Claims (4)

1. A method for generating and uploading SVG snowplow, comprising the steps of:
step 1: selecting all SVG icons to be used for generating SVG files in the Figma;
step 2: all selected SVG icons are obtained through a Figma API;
step 3: traversing all the obtained SVG icons, obtaining byte arrays of all the SVG icons through exportAsync, and converting the obtained byte arrays into corresponding SVG character strings respectively;
step 4: respectively extracting SVG attribute character strings and SVG content character strings in the SVG character strings through regular expressions, and generating symbol character strings; the regular expression is:
extracting SVG attribute character strings and SVG content character strings from the SVG character strings by using the V < SVG/S ([ +] +) > ([ \S\s ] +) <V-SVG/i;
step 5: merging the 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. The method for generating and uploading SVG snowplow according to claim 1, wherein the step 1 is preceded by creating an SVG icon in the Figma for generating the SVG file.
3. The method of claim 1, wherein the step 5 further comprises naming the SVG file.
4. The method for generating and uploading SVG snowplow according to claim 1, wherein the generating of the smbol string in the step 4 comprises the steps of:
A. circularly using a regular expression/(\w+) = \ "([) ]"/g to match SVG attribute character strings, and initializing a symbol attribute object;
B. and generating a symbol character string by using the SVG content character string, the initialized symbol attribute object and the name of the SVG icon.
CN202110338566.5A 2021-03-30 2021-03-30 Method for generating and uploading SVG (scalable vector graphics) snowplow Active CN112989242B (en)

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 CN112989242A (en) 2021-06-18
CN112989242B true 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)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105550247A (en) * 2015-12-08 2016-05-04 许继电气股份有限公司 SVG standard customizable graphic symbol based power system graphic display method
CN112422543A (en) * 2020-11-09 2021-02-26 建信金融科技有限责任公司 Anti-crawler method and device

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1045315A3 (en) * 1999-04-13 2011-03-02 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
US10169414B2 (en) * 2016-04-26 2019-01-01 International Business Machines Corporation Character matching in text processing
US10642590B2 (en) * 2017-06-30 2020-05-05 Samsung Electronics Co., Ltd. Method and electronic device for rendering scalable vector graphics content
CN112445478A (en) * 2020-12-09 2021-03-05 北京有竹居网络技术有限公司 Graphic file processing method, device, equipment and medium

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105550247A (en) * 2015-12-08 2016-05-04 许继电气股份有限公司 SVG standard customizable graphic symbol based power system graphic display method
CN112422543A (en) * 2020-11-09 2021-02-26 建信金融科技有限责任公司 Anti-crawler method and device

Also Published As

Publication number Publication date
CN112989242A (en) 2021-06-18

Similar Documents

Publication Publication Date Title
US8542235B2 (en) System and method for displaying complex scripts with a cloud computing architecture
US8042036B1 (en) Generation of a URL containing a beginning and an ending point of a selected mark-up language document portion
CN103593434A (en) Application recommendation method and device and server equipment
CN106453572B (en) Method and system based on Cloud Server synchronous images
US20090199093A1 (en) Image Capture And Sharing System and Method
CN105630459A (en) Method for converting PPT document to HTML page
CN102193953A (en) System and method for migrating desktop applications
EP3944592B1 (en) Voice packet recommendation
CN113382083B (en) Webpage screenshot method and device
CN112269576A (en) Component display method and device, server and storage medium
CN115357755B (en) Video generation method, video display method and device
CN114330236A (en) Character generation method and device, electronic equipment and storage medium
CN112989242B (en) Method for generating and uploading SVG (scalable vector graphics) snowplow
CN117076811A (en) Webpage export method, device, equipment and storage medium
CN105740475B (en) Web page conversion method and system
CN102651795B (en) Run-length reduced binary sequence compressed encoding method
CN112991148B (en) Style image generation method, model training method, device, equipment and medium
Wu et al. Coverless steganography based on english texts using binary tags protocol
CN113448649A (en) Redis-based home page data loading server and method
US20100223565A1 (en) Method and system for providing an image effects interface
CN115770394B (en) Blueprint plug-in application method based on hapi implementation
US11379664B2 (en) Method for acquiring a parallel corpus, electronic device, and storage medium
Liu et al. Mimic-ppt: Mimicking-based steganography for microsoft power point document
KR100494845B1 (en) Apparatus for Coding Metadata based on eXtensible Markup Language(XML)
WO2024046029A1 (en) Method and apparatus for creating media content, and device and storage medium

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