How to automate monochrome svg conversion for icon libraries and print assets
- Step 1Call the batch conversion API — POST all SVG files to /api/svg/swap-colors with mode: monochrome and target_color: #000000 (for single color) or mode: grayscale (for luminosity conversion). The API returns a ZIP of converted files.
- Step 2Integrate into asset packaging — Add a monochrome step to your asset packaging script: after generating the color icon set, run the batch API to generate the monochrome variant. Include both in your design system's asset download.
- Step 3Verify luminosity preservation — For grayscale output, visually check that icons with distinct colors remain visually distinguishable as different shades. A light blue and a light yellow should produce noticeably different greys.
Frequently asked questions
Can I batch convert to monochrome with a non-black target color?+
Yes. For single color mode, specify any target hex as target_color in the API request. This is useful for creating off-white (e.g., #f9fafb) icon sets for dark UI themes.
Does the API preserve SVG structure during conversion?+
Yes. Only fill, stroke, stop-color, and related color attributes are modified. All paths, shapes, group structure, IDs, and ARIA attributes are preserved.
How do I generate both color and monochrome icon sets in one pipeline?+
Run two parallel API calls: one with original colors (no conversion), one with monochrome mode. Store outputs in icons/color/ and icons/monochrome/. Your design system users pick the appropriate set.
Can I convert SVG animations to monochrome?+
Yes. The converter handles animated SVGs — fill and stroke values in SMIL animate elements and CSS keyframes inside the SVG are also converted to monochrome.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.