CLI for converting cursor SVG files to PNG.
This library has the capability to rasterize both static and animated SVG files, regardless of whether they use SMIL, CSS, or other types of animations supported by modern browsers. It can transform these files into PNG sequences. Additionally, it offers a CLI tool named cbmp, which runs Puppeteer to load SVG files within a browser page, take screenshots using an algorithm, and save them.
npm install ful1e5/cbmpyarn add ful1e5/cbmpUsage: cbmp [Args] [Options] ...
CLI for converting cursor SVG files to PNG.
Arguments:
path Path to JSON configuration file.
Options:
-V, --version Output the version number.
-d, --dir <path> Specify the directory to search for SVG files.
-o, --out <path> Specify the directory where rasterized PNG files will be saved. (default: "./bitmaps")
-bc, --baseColor [string] Specifies the CSS color for the inner part of the cursor. (optional)
-oc, --outlineColor [string] Specifies the CSS color for the cursor's outline. (optional)
-wc, --watchBackgroundColor [string] Specifies the CSS color for the animation background. (optional)
-fps, --fps [number|float] Specifies the FPS for rendering animated SVGs. (default: 1)
--debug Run Puppeteer in non-headless mode and print additional debugging logs.
-h, --help Display help for the command.
To begin, use the following command to convert convert SVG files from the svg directory and save the PNG files to the out directory:
npx cbmp -d svg -o outFor debugging and Inspect Puppeteer window, add the --debug flag:
npx cbmp -d svg -o out --debugYou can simplify the process by using a JSON configuration file.
This JSON configuration file represents a series of cbmp command. It's structured into separate sections, each focusing on a specific conversion task.
- Sections: It is divided into sections, each representing a different conversion task.
- Parameters:
"dir": Specifies the directory containing SVG files to convert."out": Specifies the output directory for the PNG sequence."fps": (Optional) Sets the frames per second (fps) for the animation."colors": (Optional) Allows you to define color replacements in the SVGs.
{
"Sample Task": { <--- Task Name
"dir": "svg", <--- Specify Directory containing SVG files
"out": "out", <--- Specify output directory
"fps": 60, <--- (Optional) Adjust FPS
"colors": [ <--- (Optional) List of Color Replacements
{ "match": "#00FF00", "replace": "#FFFFFF" },
{ "match": "#0000FF", "replace": "#000000" },
{ "match": "#FF0000", "replace": "#FFF000" }
]
}
}npx cbmp sample.jsonYou can also control the frames per second (fps) using the -fps or --fps options:
npx cbmp sample.json -fps 30{
"Sample 1": {
"dir": "svg",
"out": "out/sample1"
},
"Sample 2": {
"dir": "svg",
"out": "out/sample2"
"fps": 10,
},
"Sample 3": {
"dir": "svg",
"out": "out/sample3",
"colors": [
{ "match": "#00FF00", "replace": "#FFFFFF" },
{ "match": "#0000FF", "replace": "#000000" }
]
},
"Sample 4": {
"dir": "svg",
"out": "out/sample4",
"fps": 60,
"colors": [
{ "match": "#00FF00", "replace": "#FFFFFF" },
{ "match": "#0000FF", "replace": "#000000" },
{ "match": "#FF0000", "replace": "#FFF000" }
]
}
}This project is released under the terms of the MIT license.
See opensource.org for more information.