svg-toolbox
v1.1.11
Published
This library provides some SVG-related tools
Downloads
1,129
Readme
SVG Utility Functions
This module provides utility functions for working with SVG elements and files, including creating, cloning, merging, converting SVG to Base64, comparing SVG images, normalizing path data, and converting SVG to PNG format.
Installation
npm install svg-toolboxTable of Contents
Usage
createSVGElement
Creates an SVG element from a given SVG content string.
const svgElement = createSVGElement(`<svg><path d="M10 20L30 40Z" /></svg>`);
console.log(svgElement);cloneSVGElement
Clones an SVG element deeply.
import { cloneSVGElement } from 'svg-toolbox';
import { JSDOM } from 'jsdom';
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
const { document } = dom.window;
const originalElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
originalElement.setAttribute('cx', '50');
originalElement.setAttribute('cy', '50');
originalElement.setAttribute('r', '40');
originalElement.setAttribute('stroke', 'black');
originalElement.setAttribute('stroke-width', '3');
originalElement.setAttribute('fill', 'red');
const clonedElement = cloneSVGElement(originalElement);
console.log(clonedElement);mergeSVGElements
Merges multiple SVG elements into a single SVG element.
import { mergeSVGElements } from 'svg-toolbox';
import { JSDOM } from 'jsdom';
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
const { document } = dom.window;
const svgElement1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
svgElement1.setAttribute('cx', '50');
svgElement1.setAttribute('cy', '50');
svgElement1.setAttribute('r', '40');
svgElement1.setAttribute('stroke', 'black');
svgElement1.setAttribute('stroke-width', '3');
svgElement1.setAttribute('fill', 'red');
const svgElement2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
svgElement2.setAttribute('x', '10');
svgElement2.setAttribute('y', '10');
svgElement2.setAttribute('width', '100');
svgElement2.setAttribute('height', '100');
svgElement2.setAttribute('fill', 'blue');
const mergedElement = mergeSVGElements([svgElement1, svgElement2]);
console.log(mergedElement);convertSVGToBase64
Converts an SVG element or SVG string to a Base64-encoded string.
import { createSVGElement, convertSVGToBase64, convertBase64ToSVG } from 'svg-toolbox';
const svgElement = createSVGElement(`<svg><path d="M10 20L30 40Z" /></svg>`);
const base64String = convertSVGToBase64(svgElement);
console.log('convertSVGToBase64 param element', base64String);
const svgString = convertBase64ToSVG(base64String);
console.log('convertBase64ToSVG', svgString);
const svgBase64 = convertSVGToBase64(svgString);
console.log('convertSVGToBase64 param string', svgBase64);convertBase64ToSVG
Converts a Base64-encoded string back to an SVG string.
import { convertBase64ToSVG } from 'svg-toolbox';
const base64String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9InJlZCIgLz48L3N2Zz4=';
const svgString = convertBase64ToSVG(base64String);
console.log(svgString);diffSvg
Compares two PNG images and generates a diff image.
import { diffSvg } from 'svg-toolbox';
const pathA = 'path/to/first/image.png';
const pathB = 'path/to/second/image.png';
const diffFilePath = 'path/to/save/diff/image.png';
// diffPngBuffer is a Buffer object containing the diff image in PNG format.
// numDiffPixels is the number of different pixels between the two images.
const { diffPngBuffer, numDiffPixels } = await diffSvg(pathA, pathB, diffFilePath)
const diffPngBase64 = `data:image/png;base64,${diffPngBuffer.toString('base64')}`;
console.log(`Number of different pixels: ${numDiffPixels}`);svg2png
Converts an SVG file to PNG format.
// Callback/Promise
import { svg2Png } from 'svg-toolbox';
const svgPath = 'path/to/input/image.svg';
const pngPath = 'path/to/output/image.png';
const scale = 2; // Scaling factor
svg2Png(svgPath, pngPath, scale);
// Async/await
const pngBuffer = await svg2Png(svgPath, scale);
const pngBase64 = `data:image/png;base64,${pngBuffer.toString('base64')}`;
console.log(pngBase64);removeNanCoordinates
Parses and normalizes the d attribute of all path elements in an SVG content.
import { removeNanCoordinates } from 'svg-toolbox';
const svgContent = `<svg><path d="M 10,20 nan L 30,40 -nan Z" /></svg>`;
const normalizedSvgContent = removeNanCoordinates(svgContent);
console.log(normalizedSvgContent);
License
MIT License