Two conversion directions
This tool features a two-way conversion function between vector and raster formats: SVG to PNG conversion and Raster image to SVG conversion.
On the user interface, these two modes are clearly distinguished by tabs, and users select the processing direction according to their purpose.
For file input, it only supports loading via file selection through the standard OS dialog or drag-and-drop into a designated area.
A UI for pasting SVG source code directly into a text area to draw it is not implemented; it relies solely on reading file objects via FileReader.
Data parsing and various drawing processes are performed by expanding the input file into the browser's memory space and manipulating the DOM API and Canvas API via JavaScript.
The file to be converted is never sent to an external server. The entire conversion process, from file expansion and pixel information extraction to the final generation of the Blob object, is executed exclusively within the user's browser.
Processing progress and results are immediately displayed in the preview area through temporarily generated object URLs. The SVG to PNG and Image to SVG modes maintain independent state management (React State), and SVG string data, base dimensions, and raster image file references are stored as variables unique to each mode.
Input states are maintained even if you switch tabs, and the preview, raster, and traced URLs are completely independently released, meaning a URL on one side will no longer be released early due to actions on the other.
SVG dimensions and magnification
When rasterizing an SVG file into a PNG image, the first step is to determine the base dimensions of the original vector image. The tool parses the SVG string using DOMParser and retrieves the width and height attribute values from the root svg element.
The width and height are expected to be positive values, either unitless or in 'px', and they fully support decimal numbers. If other units are encountered, the system falls back to the viewBox attribute.
If still unobtainable, the default value is set to 300.
After the base dimensions are determined, the user can specify the output resolution magnification from the options of 1x, 2x, 4x, or 8x.
It is set to 2x by default, and the intended output dimension is calculated by multiplying the base dimension by this magnification, with decimals rounded to an integer.
This scaling function enlarges the drawing size of the Canvas and is not a feature that improves the quality of the original image or text itself.
Strict output upper limits are enforced in this environment, restricting the output to a maximum of 8192 pixels per edge and a total of 16,777,216 pixels.
Both conditions must be met for the processing to proceed; for example, an image dimension of 10000x1 would be rejected due to exceeding the edge limit, while an 8192x8192 image would be rejected for exceeding the total pixel limit.
These constraints apply to the final calculated dimensions after the 1x, 2x, 4x, or 8x magnification factor is applied to the base canvas size.
PNG transparency and drawing constraints
The conversion process from SVG to PNG relies on the HTML5 Canvas API provided by the browser. The parsed SVG string is converted into a Blob with the MIME type set to image/svg+xml, and the URL generated from it is assigned as the source of an Image object.
Once the Image object finishes loading, a Canvas with the output dimensions calculated in the previous chapter is prepared. First, the pixel information of the entire Canvas area is completely erased using the clearRect method.
This initializes the background to a transparent state, and the contents of the SVG are then transferred onto it using the drawImage method, making it possible to output the transparent parts of the original SVG as transparent parts in the PNG.
However, this drawing process has constraints stemming from browser specifications. If the SVG code contains references to image files on external domains, or if it loads web fonts, they may not render on the Canvas due to issues like resource resolution timing, resulting in an output image with missing parts.
Also, if the SVG syntax contains fatal errors, the loading of the Image object itself will fail. This failure is handled by the Image.onerror event, which notifies the issue and releases the URL.
To prevent resource consumption, the temporary object URL created for loading is designed to be discarded by revokeObjectURL regardless of success or failure.
Expanding images to reduced pixels
In the other conversion mode, Image to SVG conversion, images that can be standardly loaded in a browser, such as JPEG, PNG, WebP, and GIF, are targeted.
When a user selects an image file, preprocessing is performed to draw it on a Canvas and extract RGBA data for each pixel. During this time, the original image size is not processed as is; instead, a reduction is performed based on a parameter called the Trace resolution upper limit.
The trace resolution upper limit can be specified using a slider in the range of 32 to 256 (in increments of 16), and the default value is set to 128.
If either the width or height of the loaded image exceeds this upper limit, a reduction calculation is performed so that the long side matches the specified upper limit while maintaining the original aspect ratio.
The short side is rounded, and if any calculated dimension results in 0, it is automatically adjusted to 1. The image is drawn on a temporary Canvas possessing these reduced dimensions.
This processing is a measure to physically decrease the number of attempts in the subsequent pixel analysis loop, thereby reducing the calculation target.
It is strictly a step to generate the base image information for converting pixel data into grid-like rectangular elements. The tracing relies on run-length rectangular approximation and does not perform vector curve restoration, meaning it is not intended to draw smooth curves.
Even high-resolution photographic images are forcibly treated as pixel data confined within this resolution limit.
Horizontal rect and transparency approximation
After obtaining the one-dimensional array of RGBA data from the resolution-adjusted Canvas using getImageData, the tool generates SVG elements using a unique run-length encoding method.
Instead of detecting color boundary contours and using path elements, it scans the image pixels from left to right and represents them as a continuous sequence of rect elements.
During scanning, if the alpha value of the target pixel is less than 10, any slight opacity is omitted by the specified threshold and excluded from the SVG drawing targets.
For pixels to be drawn, their color information is compared with the adjacent pixel to the right. If the respective RGB values match perfectly and the difference in their alpha values falls within an approximation range of less than 10, they are determined to be the same continuous color.
The horizontal scan continues until this continuity is broken, and a single rect element is generated with a width equal to the combined length.
The fill color of the generated rect element is described as a string in rgb(R,G,B) format. Furthermore, if the pixel is not fully opaque (an alpha value of 255), a fill-opacity attribute is added.
The opacity at this time is calculated by dividing the alpha value by 255 and formatting it into a string with 2 decimal places to approximately represent the translucent state.
Since there is no vertical merging or path contour tracing, the output code consists solely of groups of rect elements for each horizontal line.
Save results and capacity judgment
When the image-to-SVG conversion process is completed, an SVG string containing the generated group of rect elements is constructed.
At this time, the width and height attributes of the SVG root element describe the original pixel size of the source image, while the viewBox attribute specifies the post-trace dimensions used as the reduced grid.
Consequently, when displayed on a browser, it is structured so that the coarse drawing result is enlarged to the size of the original image.
The generated SVG code is converted into a Blob, and a URL for downloading is issued.
This pixel vectorization method is effective for images where the same colors tend to be contiguous horizontally, such as pixel art, because they can be represented with a small number of rect elements.
However, if an image containing many gradients or noise, like a photograph, is inputted, a new rect element is generated for almost every pixel.
As a result, the text size of the output SVG file can greatly exceed the file size of the original image. The tool does not guarantee any capacity reduction.
As for memory management during operation, when a new file is loaded or a trace process is executed, React's cleanup process activates, and older preview URLs issued previously are released.
The system ensures that preview, raster, and traced URLs are managed and released independently. Furthermore, trace generations are evaluated to ignore older completions, and error exceptions trigger a clearing of previous results.
This implementation handles memory and visual output on screen by strictly managing the lifecycle of object URLs. The generation tracking logic ensures that delayed asynchronous rendering tasks from previous, superseded actions do not overwrite the canvas state of the most recent action.
The independent management of these URLs helps mitigate memory accumulation when repeatedly modifying images or loading new files into the workspace.