Fill entire SVGs with a single color or replace specific colors within them.

1. Install the package with command

npm install svg-colorizer

2. Import functions in JavaScript/TypeScript file and use them

import { fill } from "svg-colorizer/client";

fill(document.querySelector("svg"), "red");

import { fill } from "svg-colorizer/client";

fill(document.querySelector("svg"), "red");

import { fill } from "svg-colorizer/node";

const svgWithNewColor = fill(svgString, "red");

import { randomColor } from "svg-colorizer/common"

const newColor = randomColor();

There are three main categories from where functions can be imported client, node and common. Functions in node category use string manipulation for reaching their purpose, while functions in client category work with DOM API to get elements from HTML page,so this functions can be used only if the DOM API is available in the environment. Functions in common are for general purposes.

• client
  • fill
  • getColors
  • replace
• node
  • fill
  • getColors
  • replace
• common
  • randomColor

This function fills the specified SVG element with a given color.

Arguments:

• svg: A DOM element representing the SVG element you want to modify (client-side JavaScript).
• color: A string representing the desired fill color.
• ignoreColors (optional): An array of color strings to exclude from replacement.
• callback (optional): A function that executes after the fill operation is complete.

This function replaces specific colors within the SVG element based on a configuration.

Arguments:

• svg: A DOM element representing the SVG element you want to modify (client-side JavaScript).
• detailsArray: An array of objects with the following properties:
  • target: A string representing the color you want to replace within the SVG.
  • replace: A string representing the new color to use as a replacement.
• callback (optional): A function that executes after the replace operation is complete.

This function extracts the colors used in the SVG element and returns them as an object.

Arguments:

• svg: A DOM element representing the SVG element from which to extract colors (client-side JavaScript).
• onlyParent (optional): A boolean flag indicating whether to extract colors only from the parent element (true) or include its children (false, default).

Returns:

An object with keys:

• fill: An array containing all fill color strings used in the SVG.
• stroke: An array containing all stroke color strings used in the SVG (if applicable).
• stop: An array containing all stop color strings used in the SVG for gradients (if applicable).

Functions of node get thes same parameters as in client but instead of SVG HTML element they take a string of an SVG HTML element.Note that all functions of node return something and you should keep that value returned from them to use furthermore.

This function generates a random color and returns it in either hexadecimal notation or RGB format.

Arguments:

• format (optional): A string specifying the desired format, either "hex" (default) or "rgb".

Returns:

A string representing the randomly generated color in the specified format (hexadecimal or RGB).