CN111611770A - Analysis method and system of SVG file - Google Patents

Abstract

The invention discloses an SVG file parsing method and system. The parsing method includes: loading and reading the SVG file, generating a DOM node tree, and creating a corresponding JSON data file; traversing each node layer by layer and identifying it; When a graphic element node is used, obtain graphic attributes and convert it into a path element of SVG; standardize the path format of the path element to generate a standard path; generate a JSON object after parsing the standard path, write it into a JSON data file, and return to the steps of traversing the node until The process ends after traversing all the nodes of the DOM node tree. The invention parses the drawing elements in the SVG into a path with better compatibility of the drawing API of the general platform, and standardizes the output as JSON data, so that the general platform can restore the SVG picture in the general platform with better performance and higher accuracy .

Description

Analysis method and system of SVG file

technical field

The invention relates to the technical field of graphics, in particular to a method and system for parsing an SVG file.

Background technique

SVG (Scalable Vector Graphics, Scalable Vector Graphics) is a language that uses XML (Extensible Markup Language, Extensible Markup Language) to describe two-dimensional graphics and drawing programs. SVG graphics storage capacity is small, the input load to the network is small, the network transmission delay is small, it supports interaction and animation, and the zoom-in and zoom-out operations of the image will not distort the image. SVG itself has many advantages, it is very suitable as the carrier of Web (Internet) two-dimensional map.

Due to the openness of SVG and the rich support of related drawing methods, the cost of drawing SVG is lower and the efficiency is higher. However, due to its open-source nature, what you see is what you get, often the intellectual property rights of the SVG images drawn by the drafters cannot be effectively guaranteed, and the bitmap itself has the characteristics of loss and distortion and cannot replace the vector SVG, making SVG difficult to obtain. Widespread promotion. Therefore, to give full play to the advantages of efficient SVG drawing and lossless scaling, and to avoid the problem of SVG original image leakage, it is the best solution to dynamically draw SVG images on a common platform. However, if you want to add new components on Android (Android), desktop Java (an object-oriented computer programming language), and Canvas (an HTML (Hypertext Markup Language) 5 on the web page to draw various icons, SVG images are restored on general platforms such as animation, etc., and their respective drawing API (application programming interface) methods are not fully compatible with SVG drawing elements, and the original image cannot be accurately restored by directly parsing the graphic elements of the SVG image.

SUMMARY OF THE INVENTION

The technical problem to be solved by the present invention is to overcome the defect that each general platform in the prior art is not fully compatible with SVG drawing elements and cannot accurately restore the original image by directly analyzing the graphic elements of the SVG image, and provides an SVG file parsing method and method. system.

The present invention solves the above-mentioned technical problems through the following technical solutions:

The present invention provides a method for parsing an SVG file, comprising the following steps:

Load and read the SVG file and generate a DOM (Document Object Model) node tree, and create a new JSON (a lightweight data interchange format) data file corresponding to the SVG file;

Traverse each node of the DOM node tree layer by layer and identify the node;

When identifying that the node is a graphic element node, obtain the graphic attribute of the graphic element node and convert it into a path element of SVG;

Standardizing the path format of the path element to generate a standard path of the graphic element node;

After parsing the standard path, generate the JSON object of the graphic element node, write it into the JSON data file, and then return to the step of traversing each node of the DOM node tree until the DOM node tree is traversed End the process after all nodes of .

Preferably, the graphic element is a rectangle element, a circle element, an ellipse element or a polygon element;

The step of acquiring the graphic attribute of the graphic element node and converting it into a path element of SVG specifically includes:

When it is determined that the graphic element is a rectangular element according to the graphic attributes, various attributes of the rectangle are obtained, the attributes include width and height and the upper left corner coordinate, and the four corners of the rectangle are connected according to the attributes to obtain the Rectangular path element;

If the rectangle is a rectangle with rounded corners, the attribute further includes horizontal rounded corners and vertical rounded corners, and the horizontal rounded corners and vertical rounded corners are expressed by using Bezier curves, and the Bezier curve is added to the rectangle Get the path element of the rounded rectangle before the four corners;

When it is determined that the graphic element is a circle element according to the graphic attribute, the radius and center coordinates of the circle are obtained, a Bezier curve is used to simulate a circle, and a path element of the circle is obtained according to the Bezier curve;

When the graphic element is determined to be an ellipse element according to the graphic attribute, the center coordinates and the horizontal radius and the vertical radius of the ellipse are obtained, the ellipse is simulated by a Bezier curve, and the path element of the ellipse is obtained according to the Bezier curve ;

When it is determined that the graphic element is a polygon element according to the graphic attribute, a set of points of the polygon is obtained, and the path element of the polygon is obtained by connecting the set of points to form a closed path.

Preferably, the step of standardizing the path format of the path element specifically includes:

The path coordinates of the path elements are unified in absolute coordinates, and the coordinates and the spacers of the drawing commands are unified.

Preferably, the step of generating the JSON object of the graphic element node after parsing the standard path specifically includes: parsing the standard path, acquiring stroke attributes and filling attributes, and generating the JSON object.

The present invention also provides an SVG file parsing system, including:

The loading and reading module is used to load and read the SVG file and generate a DOM node tree, and create a new JSON data file corresponding to the SVG file;

A traversal module for traversing each node of the DOM node tree layer by layer and identifying the node;

a conversion module, configured to acquire the graphic attribute of the graphic element node and convert it into a path element of SVG when the node is identified as a graphic element node;

a standardization module, configured to standardize the path format of the path element, and generate a standard path of the graphic element node;

A parsing module, for generating the JSON object of the graphic element node after parsing the standard path, and writing it into the JSON data file, and then calling the traversal module to traverse each node of the DOM node tree until the traversal is complete All nodes of the DOM node tree.

Preferably, the graphic element is a rectangle element, a circle element, an ellipse element or a polygon element;

The conversion module is specifically used for:

When it is determined that the graphic element is a rectangular element according to the graphic attributes, various attributes of the rectangle are obtained, the attributes include width and height and the upper left corner coordinate, and the four corners of the rectangle are connected according to the attributes to obtain the Rectangular path element;

If the rectangle is a rectangle with rounded corners, the attribute further includes horizontal rounded corners and vertical rounded corners, and the horizontal rounded corners and vertical rounded corners are expressed by using Bezier curves, and the Bezier curve is added to the rectangle Get the path element of the rounded rectangle before the four corners;

When it is determined that the graphic element is a circle element according to the graphic attribute, the radius and center coordinates of the circle are obtained, a Bezier curve is used to simulate a circle, and a path element of the circle is obtained according to the Bezier curve;

When the graphic element is determined to be an ellipse element according to the graphic attribute, the center coordinates and the horizontal radius and the vertical radius of the ellipse are obtained, the ellipse is simulated by a Bezier curve, and the path element of the ellipse is obtained according to the Bezier curve ;

When it is determined that the graphic element is a polygon element according to the graphic attribute, a set of points of the polygon is obtained, and the path element of the polygon is obtained by connecting the set of points to form a closed path.

Preferably, the standardization module is configured to uniformly use absolute coordinates for the path coordinates of the path elements, and to unify the coordinates and spacers of drawing commands.

Preferably, the parsing module is configured to parse the standard path, obtain the stroke attribute and fill attribute, and generate the JSON object.

The positive improvement effect of the present invention is that: the present invention parses the drawing elements in the SVG into a path (PATH) with better compatibility of the drawing API of the general platform, and standardizes the output as JSON data, so that the general platform can have better performance and higher The accuracy of SVG restores the SVG image in the general platform. By dynamically drawing an SVG image on a common platform, a lossless zoomed SVG restoration image can be obtained, and at the same time, the problem of inability to protect the intellectual property rights of the drafters due to the characteristics of the SVG open standard is avoided.

Description of drawings

FIG. 1 is a flowchart of a method for parsing an SVG file according to a preferred embodiment of the present invention.

FIG. 2 is a specific flowchart of converting a rectangular element into a path element of an SVG in a method for parsing an SVG file according to a preferred embodiment of the present invention.

FIG. 3 is a specific flowchart of converting a circle element into a path element of SVG in a method for parsing an SVG file according to a preferred embodiment of the present invention.

FIG. 4 is a specific flowchart of converting an ellipse element into a path element of an SVG in a method for parsing an SVG file according to a preferred embodiment of the present invention.

FIG. 5 is a specific flowchart of converting polygon elements into path elements of SVG in a method for parsing an SVG file according to a preferred embodiment of the present invention.

FIG. 6 is a schematic block diagram of an SVG file parsing system according to a preferred embodiment of the present invention.

Detailed ways

The present invention is further described below by way of examples, but the present invention is not limited to the scope of the described examples.

As shown in Figure 1, the SVG file parsing method of the present invention includes the following steps:

Step 101, load and read the SVG file and generate a DOM node tree, and create a new JSON data file corresponding to the SVG file;

Step 102, traverse each node of the DOM node tree layer by layer and identify the node;

Step 103, when the node is identified as a graphic element node, obtain the graphic attribute of the graphic element node and convert it into a path element of SVG;

Step 104: Standardize the path format of the path element to generate a standard path of the graphic element node;

Step 105: After parsing the standard path, generate the JSON object of the graphic element node, and write it into the JSON data file, and then return to step 102, and end the process after traversing all the nodes of the DOM node tree.

Preferably, the graphic element is a rectangle element (rect), a circle element (circle), an ellipse (ellipse) element or a polygon (polygon) element;

When it is determined according to the graphic attribute that the graphic element is a rectangular element, as shown in FIG. 2 , the step of converting the rectangular element to a path element of SVG specifically includes:

Step 10311, obtain each attribute of the rectangle, the attribute includes width and height and upper left corner coordinates;

Step 10312, connecting the four corners of the rectangle according to the attribute to obtain the path element of the rectangle;

Step 10313, determine whether the rectangle is a rounded rectangle, if not, end the conversion, if so, execute step 10314;

Step 10314: Obtain the horizontal rounded corners and vertical rounded corners of the rounded rectangle;

Step 10315: Use Bezier curves to express the horizontal rounded corners and vertical rounded corners, and add the Bezier curves to the four corners of the rectangle to obtain the path elements of the rounded rectangle, and then end the conversion.

When it is determined according to the graphic attribute that the graphic element is a circle element, as shown in FIG. 3 , the step of converting the circle element into a path element of SVG specifically includes:

Step 10321: Obtain the radius of the circle and the coordinates of the center of the circle;

Step 10322: Use the Bezier curve to simulate a circle, and obtain the path element of the circle according to the Bezier curve, and then end the conversion.

Specifically, in step 10322, four Bezier curves may be used to simulate a circle.

When it is determined according to the graphic attribute that the graphic element is an ellipse element, as shown in FIG. 4 , the step of converting the ellipse element to a path element of SVG specifically includes:

Step 10331, obtain the center coordinates of the ellipse and the horizontal and vertical radius;

Step 10332: Use the Bezier curve to simulate an ellipse, and obtain the path element of the ellipse according to the Bezier curve, and then end the conversion.

Wherein, in step 10332, a circle composed of a horizontal radius and a circle composed of a vertical radius may be sequentially taken a quarter to simulate to form an ellipse composed of four Bezier curves.

When it is determined according to the graphic attribute that the graphic element is a polygonal element, as shown in FIG. 5 , the step of converting the polygonal element to a path element of SVG specifically includes:

Step 10341, obtain the point set of the polygon;

Step 10342: Obtain the path element of the polygon by connecting the point set into a closed path, and then end the conversion.

In the specific implementation process of the present invention, in step 104, the path coordinates of the path elements will be uniformly adopted as absolute coordinates, and the coordinates and the spacers of the drawing commands will be unified. The reasons are:

The shape of the path element in the SVG file is defined by the attribute d, and the value of the attribute d is a sequence of "command + parameter". Since SVG has high compatibility with path formats, the spacers of paths can have various formats, and also support the abbreviation of numbers and scientific notation, and the coordinates are also divided into absolute coordinates and relative coordinates. Due to its large number of formats, the platform parsing path performance will be affected. Therefore, it is necessary to standardize the path format, uniformly use absolute coordinates, and unify coordinates and spacers for drawing commands.

In step 105, the standard path is specifically parsed, a stroke attribute and a fill attribute are obtained, and the JSON object is generated.

In the present invention, the Bezier curve is a very important parameter curve in computer graphics. It describes a curve through an equation, and is divided into linear Bezier curves according to the highest order of the equation. , Quadratic Bezier, Cubic Bezier, and higher-order Bezier curves.

As shown in FIG. 6 , the present invention also provides an SVG file parsing system, including:

Loading and reading module 1 is used to load and read the SVG file and generate a DOM node tree, and create a new JSON data file corresponding to the SVG file;

Traversing module 2, for traversing each node of the DOM node tree layer by layer and identifying the node;

A conversion module 3, configured to acquire the graphic attribute of the graphic element node and convert it into a path element of SVG when the node is identified as a graphic element node;

Standardization module 4, for standardizing the path format of the path element, and generating the standard path of the graphic element node;

Parsing module 5, for generating the JSON object of the graphic element node after parsing the standard path, and writing it into the JSON data file, and then calling the traversal module to traverse each node of the DOM node tree until traversing Finish all nodes of the DOM node tree.

Wherein, the graphic element is a rectangle element, a circle element, an ellipse element or a polygon element;

The conversion module 3 is specifically used for:

When it is determined that the graphic element is a rectangular element according to the graphic attributes, various attributes of the rectangle are obtained, the attributes include width and height and the upper left corner coordinate, and the four corners of the rectangle are connected according to the attributes to obtain the Rectangular path element;

If the rectangle is a rectangle with rounded corners, the attribute further includes horizontal rounded corners and vertical rounded corners, and the horizontal rounded corners and vertical rounded corners are expressed by using Bezier curves, and the Bezier curve is added to the rectangle Get the path element of the rounded rectangle before the four corners;

When it is determined that the graphic element is a circle element according to the graphic attribute, the radius and center coordinates of the circle are obtained, a Bezier curve is used to simulate a circle, and a path element of the circle is obtained according to the Bezier curve;

When the graphic element is determined to be an ellipse element according to the graphic attribute, the center coordinates and the horizontal radius and the vertical radius of the ellipse are obtained, the ellipse is simulated by a Bezier curve, and the path element of the ellipse is obtained according to the Bezier curve ;

When it is determined that the graphic element is a polygon element according to the graphic attribute, a set of points of the polygon is obtained, and the path element of the polygon is obtained by connecting the set of points to form a closed path.

The standardization module 4 is used for uniformly adopting absolute coordinates for the path coordinates of the path elements, and unifying the coordinates and spacers of drawing commands.

The parsing module 5 is used for parsing the standard path, acquiring the stroke attribute and filling attribute, and generating the JSON object.

Although the specific embodiments of the present invention are described above, those skilled in the art should understand that this is only an illustration, and the protection scope of the present invention is defined by the appended claims. Those skilled in the art can make various changes or modifications to these embodiments without departing from the principle and essence of the present invention, but these changes and modifications all fall within the protection scope of the present invention.

Claims (8)

1. An SVG file parsing method is characterized by comprising the following steps:

loading and reading an SVG file, generating a DOM node tree, and creating a JSON data file corresponding to the SVG file;

traversing each node of the DOM node tree layer by layer and identifying the node;

when the node is identified to be a graphic element node, acquiring the graphic attribute of the graphic element node and converting the graphic attribute into a path element of the SVG;

standardizing the path format of the path elements to generate standard paths of the graphic element nodes;

and generating a JSON object of the graphic element node after analyzing the standard path, writing the JSON object into the JSON data file, and then returning to the step of traversing all nodes of the DOM node tree until the process is finished after all nodes of the DOM node tree are traversed.

2. The parsing method for SVG files according to claim 1, wherein said graphic elements are rectangular elements, circular elements, elliptical elements or polygonal elements;

the step of obtaining the graphic attributes of the graphic element nodes and converting the graphic attributes into the path elements of the SVG specifically comprises the following steps:

when the graphic element is determined to be a rectangular element according to the graphic attributes, acquiring each attribute of the rectangle, wherein the attributes comprise width, height and coordinates of the upper left corner, and connecting the four corners of the rectangle according to the attributes to obtain path elements of the rectangle;

if the rectangle is a rounded rectangle, the attributes further comprise a horizontal rounded corner and a vertical rounded corner, the horizontal rounded corner and the vertical rounded corner are expressed by adopting a Bezier curve, and path elements of the rounded rectangle are obtained before the Bezier curve is added to the four corners of the rectangle;

when the figure element is determined to be a circle element according to the figure attribute, acquiring the radius and the center coordinate of the circle, simulating the circle by adopting a Bezier curve, and obtaining a path element of the circle according to the Bezier curve;

when the figure element is determined to be an ellipse element according to the figure attribute, acquiring the central coordinate, the horizontal radius and the vertical radius of the ellipse, simulating the ellipse by adopting a Bezier curve, and acquiring a path element of the ellipse according to the Bezier curve;

and when the figure elements are determined to be polygon elements according to the figure attributes, acquiring a point set of the polygon, and connecting the point set into a closed path to obtain path elements of the polygon.

3. The parsing method for SVG files according to claim 1, wherein said step of standardizing the path format of said path elements specifically comprises:

and uniformly adopting absolute coordinates for the path coordinates of the path elements, and uniformly combining the coordinates and the interval symbols of the drawing commands.

4. The parsing method for SVG files according to claim 1, wherein said step of generating JSON objects for said graphic element nodes after parsing said standard path specifically comprises: and analyzing the standard path, acquiring a stroke attribute and a filling attribute, and generating the JSON object.

5. A parsing system for SVG files, comprising:

the loading and reading module is used for loading and reading the SVG file, generating a DOM node tree and creating a JSON data file corresponding to the SVG file;

the traversal module is used for traversing each node of the DOM node tree layer by layer and identifying the node;

the conversion module is used for acquiring the graphic attributes of the graphic element nodes and converting the graphic attributes into the path elements of the SVG when the nodes are identified as the graphic element nodes;

the standardization module is used for standardizing the path format of the path elements and generating standard paths of the graphic element nodes;

and the analysis module is used for generating the JSON object of the graphic element node after analyzing the standard path, writing the JSON object into the JSON data file, and calling the traversal module to traverse each node of the DOM node tree until all nodes of the DOM node tree are traversed.

6. The parsing system of an SVG file according to claim 5, wherein said graphic elements are rectangular elements, circular elements, elliptical elements or polygonal elements;

the conversion module is specifically configured to:

when the graphic element is determined to be a rectangular element according to the graphic attributes, acquiring each attribute of the rectangle, wherein the attributes comprise width, height and coordinates of the upper left corner, and connecting the four corners of the rectangle according to the attributes to obtain path elements of the rectangle;

if the rectangle is a rounded rectangle, the attributes further comprise a horizontal rounded corner and a vertical rounded corner, the horizontal rounded corner and the vertical rounded corner are expressed by adopting a Bezier curve, and path elements of the rounded rectangle are obtained before the Bezier curve is added to the four corners of the rectangle;

when the figure element is determined to be a circle element according to the figure attribute, acquiring the radius and the center coordinate of the circle, simulating the circle by adopting a Bezier curve, and obtaining a path element of the circle according to the Bezier curve;

when the figure element is determined to be an ellipse element according to the figure attribute, acquiring the central coordinate, the horizontal radius and the vertical radius of the ellipse, simulating the ellipse by adopting a Bezier curve, and acquiring a path element of the ellipse according to the Bezier curve;

and when the figure elements are determined to be polygon elements according to the figure attributes, acquiring a point set of the polygon, and connecting the point set into a closed path to obtain path elements of the polygon.

7. The parsing system of an SVG file according to claim 5 wherein said normalization module is operable to unify path coordinates of said path elements in absolute coordinates and in space of drawing commands.

8. The parsing system of an SVG file according to claim 5 wherein said parsing module is adapted to parse said standard path, obtain stroke attributes and fill attributes, and generate said JSON object.

Images