SVG optimization/file size reduction tool | ZeroTools

Image files in the Scalable Vector Graphics format are two-dimensional vector data written in accordance with the strict XML standards established by the W3C.

This function converts the input string into a document object model and performs a depth-first search of the element tree to examine the dependencies of all nodes.

The analysis engine implements an advanced non-destructive path optimization algorithm similar to SVGO, which mathematically recalculates the coordinate positions of control points and anchor points of Bezier curves.

Accurately identifies duplicate anchor points and unnecessary control points on straight lines, and merges or deletes them while completely preserving the original drawing results.

This precise scanning allows data structures to be kept as simple as possible without any visual quality degradation. Additionally, an internal tree reconstruction process is performed simultaneously that reduces the rendering load on the rendering engine by unnesting g tags, which are unnecessary grouping elements, and appropriately aggregating style attributes and transformation matrices that can be inherited by parent elements.

Files output from graphic design tools such as Adobe Illustrator and Inkscape have a large amount of attributes and metadata that have namespaces unique to the editing software.

These include attributes with their own namespace prefixes that do not contribute to browser display in any way, layer information for editing, color profile information, etc.

Our system recursively scans and completely removes metadata tags, unused defs tags, XML declarations, DOCTYPE declarations, and even comment nodes automatically inserted by the editor from the parsed tree.

At the same time, rounding is applied to the floating point numbers written in the coordinate values ​​and path data of each element.

Generally, vector image coordinate data records decimal values ​​with excessive precision, but in this process, the number of significant digits after the decimal point is set to a threshold that does not cause any visual difference, and unnecessary fractions are rounded down.

This greatly reduces the length of numeric strings, which account for the largest amount of data in a file, and dramatically reduces the number of bytes during network transfer.

The d attribute of the path element, which is the core of an SVG image, contains a list of command characters and numbers to define the drawing trajectory.

This engine lexically analyzes this d attribute string and breaks it down into an array of each drawing command. After decoding all commands, such as movement using the M command, straight lines using the L command, cubic Bézier curves using the C and S commands, and path closing using the Z command, the algorithm evaluates whether it can be expressed using fewer characters when written in an absolute or relative coordinate system.

Especially in consecutive drawing commands of the same type, redundant characters are removed by making full use of the standard specification that allows the first command character to be omitted.

It also performs the process of replacing the control point with a shorter abbreviated command if the coordinates of the control point are the symmetry point of the previous command.

It also identifies places where delimiters such as spaces and commas can be safely deleted by checking syntax rules such as negative signs and consecutive decimal points, and reconstructs a dense command string that eliminates white space to the utmost.

Vector images that run on web browsers have specifications that allow them to contain JavaScript code and event handlers, so they are at risk of becoming a breeding ground for cross-site scripting attacks using malicious input data.

Our system performs strict code sanitization within a secure execution environment on the client side.

Script elements existing in the DOM tree to be analyzed will be separated from the node tree and discarded without any questions asked.

Additionally, it scans the attribute values ​​of all elements and detects and disables event handler attributes such as onclick and onmouseover, as well as URLs containing javascript pseudo protocols written in the href attribute.

By including the loading of image elements that refer to external resources and unnecessary external style sheets in the blocking criteria, only pure graphic drawing commands that ensure safety remain.

This powerful sanitization process cleans even an unspecified number of files provided by users into source code that can be safely embedded directly inline into the DOM.

This processing platform includes a measurement system that calculates the exact number of bytes of the original file and the optimized file on the memory stream in parallel with the data conversion process, and immediately presents the reduction rate.

Measures the exact byte array length based on the input string encoding and quantifies the difference as it passes through each optimization phase.

In addition to simply reducing file size, it also calculates internal metrics to determine the impact of floating point rounding and path simplification on visual rendering accuracy.

This is done by mathematically evaluating the maximum deviation distance between the curve traced by the original path and the optimized curve.

Based on the results of this calculation, a feedback loop automatically adjusts the degree of decimal digit retention if excessive rounding occurs that exceeds a set quality threshold.

This allows users to determine the optimal compression parameters while understanding the trade-off between quality and size using quantitative indicators without having to wait for visual confirmation.

Extremely optimized and sanitized vector data has a wide variety of uses in modern front-end development. A set of path data consisting of a single color is ideal as an input source for a web font generation engine, and can be used directly as the foundation data when building your own icon font set.

Additionally, even when embedded directly in the source code as inline SVG in component-oriented JavaScript frameworks such as React or Vue, unnecessary metadata and redundant grouping are eliminated, making it possible to minimize the virtual DOM construction load and memory consumption.

Furthermore, when embedded in the data URI scheme format as a CSS background image or mask image, the number of characters after base-64 encoding is significantly reduced, reducing style sheet parsing time in the critical rendering path and serving as an important component for dramatically improving the initial display performance of the entire website.