ScalableDots is a tool for converting image files such as PNG and GIF into SVG image. The conversion is done by replacing each pixel in the original image with an element in SVG and filling it with the original color. Its primary usage is to convert pixel art to SVG.
It's hard to show how amazing the pixel art is when we show it on the web without scaling. By showing the pixel art as an SVG image, it can be nicely scaled at any magnification.
When scaling pixel art images, typical raster image scaling algorithms result in a blurred image, so we need to select a proper algorithm as well as proper magnification to make each pixel edge sharp. Of course, there are tools that support this, but if we want to show it at multiple magnifications, we have to prepare multiple files as needed and switch them appropriately.
SVG images, on the other hand, are in vector format, so no matter how much we scale it, it will always be shown with a sharp edge of pixels at any magnification.
The page you're looking at now is the web version of ScalableDots. Unlike many other online tools, ScalableDots does everything in the browser. There is no need for uploading files thus it is fast, and there are no security concerns.
Therefore, there is no limit to the size of the image to be processed, but the performance of the processing on the browser naturally depends on the computing resource of your machine.
A command line version is also available for those who want to convert large images that are too heavy to process in a browser, or for those who want to convert a large number of files at once. Please consider using the command line version if necessary.
Node.js version 18 or later is required. Please install it in advance.
To install the command line version of ScalableDots, use npm command bundled with Node.js.
$ npm install @otchy/scalable-dots-cli$ npm install -g @otchy/scalable-dots-cli
The scalable-dots command writes the result of the conversion to SVG to standard output when an image file is passed as an
argument, so redirect it to another file and save it.
$ npx scalable-dots input.png > output.svg$ scalable-dots input.png > output.svgThe scalable-dots command accepts the following options
| Option | Description | Note | Default |
|---|---|---|---|
--type |
Type of dots | SQUARE, CIRCLE, or RHOMBUS |
SQUARE |
--size |
Size of dots | Integer value | 16 |
--gap |
Gap between dots | Integer value | 1 |
--pretty-print |
Enable pretty-print output | Disabled | |
--version |
Show version | ||
--help |
Show help |
$ scalable-dots --type=CIRCLE --size=32 --gap=0 --pretty-print input.png > output.svg
ScalableDots is created, published and maintained by Otchy (personal blog). If you have any bug reports or feature requests, please let us know via Twitter.
