cbmp
v1.1.1
Published
CLI for converting cursor svg files to png.
Downloads
140
Maintainers
Readme
cbmp
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.
Notices
Subscribe to this discussion to receive updates on breaking changes and deprecations.
- 2024-02-24: cbmp now uses @resvg/resvg-js as its default rendering engine. See discussion#24022024 for details.
Requirments
- Node.js >= 16.16.0
Install
npm install ful1e5/cbmp
yarn add ful1e5/cbmp
Usage
Usage: cbmp [Args] [Options] ...
CLI for converting cursor svg files to png.
Arguments:
path Path to JSON configiruation file.
Options:
-V, --version output the vers
ion 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")
--puppeteer Use Puppeteer for rendering (requires internet) or default to '@resvg/resvg-js' for SVG rendering.
-n, --themeName <string> Specify the name of sub-directory inside output directory. (Deprecated: Use the '-o' option to specify the full output path instead.)
-bc, --baseColor [string] Specifies the CSS color for inner part of cursor. (optional)
-oc, --outlineColor [string] Specifies the CSS color for cursor's ouline. (optional)
-wc, --watchBackgroundColor [string] Specifies the CSS color for 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 command
Getting Started
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 out
For debugging and Inspect Puppeteer window, add the --debug
with --puppeteer
flag:
npx cbmp -d svg -o out --pupeeteer --debug
Config files
You 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:
"use"
: Specifies the library to render SVG files, either"puppeteer"
or"default"
(which uses @resvg/resvg-js)."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
"use": "puppeteer", <--- Specify the rendering library - use "puppeteer" or "default"
"dir": "svg", <--- Specify Directory containing SVG files
"out": "out", <--- Specify output directory
"fps": 60, <--- (Optional) Adjust FPS, applicable only when using "puppeteer"
"colors": [ <--- (Optional) List of Color Replacements
{ "match": "#00FF00", "replace": "#FFFFFF" },
{ "match": "#0000FF", "replace": "#000000" },
{ "match": "#FF0000", "replace": "#FFF000" }
]
}
}
npx cbmp sample.json
You can also control the frames per second (fps) using the -fps
or --fps
options:
npx cbmp sample.json -fps 30
sample.json
{
"Sample 1": {
"dir": "svg",
"out": "out/sample1"
},
"Sample 2": {
"use": "puppeteer",
"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": {
"use": "puppeteer",
"dir": "svg",
"out": "out/sample4",
"fps": 60,
"colors": [
{ "match": "#00FF00", "replace": "#FFFFFF" },
{ "match": "#0000FF", "replace": "#000000" },
{ "match": "#FF0000", "replace": "#FFF000" }
]
}
}
LICENSE
This project is released under the terms of the MIT
license.
See opensource.org for more information.