@cyberalien/svg-utils 0.0.14 → 0.0.15

package/lib/helpers/hash/types.d.ts

@@ -0,0 +1,8 @@
+interface UniqueHashOptions {
+  prefix?: string;
+  css: boolean;
+  length: number;
+  lengths?: Record<string, number>;
+  throwOnCollision?: boolean;
+}
+export { UniqueHashOptions };

package/lib/helpers/hash/unique.d.ts

@@ -1,9 +1,4 @@
-interface Options {
-  prefix?: string;
-  length: number;
-  css: boolean;
-  lengths?: Record<string, number>;
-}
+import { UniqueHashOptions } from "./types.js";
 /**
  * Hash an object, make sure hash is unique
  *
@@ -18,5 +13,5 @@ interface Options {
  * 7 chars = 2.9t unique hashes
  * 8 chars = 183t unique hashes
  */
-declare function getUniqueHash(data: unknown, options: Options): string;
+declare function getUniqueHash(data: unknown, options: UniqueHashOptions): string;
 export { getUniqueHash };

package/lib/helpers/hash/unique.js

@@ -1,6 +1,6 @@
 import { sortObject } from "../misc/sort-object.js";
-import { hashString } from "./hash.js";
 import { hashToString } from "./stringify.js";
+import { hashString } from "./hash.js";
 
 const uniqueHashes = Object.create(null);
 const uniqueWithPrefixHashes = Object.create(null);
@@ -19,20 +19,22 @@ const uniqueWithPrefixHashes = Object.create(null);
 * 8 chars = 183t unique hashes
 */
 function getUniqueHash(data, options) {
-	const { prefix, length, lengths, css } = options;
+	const { length, lengths, css } = options;
+	const prefix = options.prefix || "";
 	const str = typeof data === "string" ? data : JSON.stringify(sortObject(data));
 	const hasPrefix = !!prefix;
 	const values = hashString(str);
 	let hash = hashToString(values, css, hasPrefix, length);
 	if (lengths?.[hash]) hash = hashToString(values, css, hasPrefix, lengths[hash]);
 	const cache = hasPrefix ? uniqueWithPrefixHashes : uniqueHashes;
-	if (!cache[hash]) cache[hash] = str;
-	else if (cache[hash] !== str) {
-		console.warn("Data 1:", cache[hash]);
-		console.warn("Data 2:", str);
-		throw new Error(`Hash collision detected: ${hash}`);
+	const result = `${prefix}${hash}`;
+	if (!cache[result]) cache[result] = str;
+	else if (cache[result] !== str) {
+		const msg = `Hash collision detected: ${hash}`;
+		if (options.throwOnCollision) throw new Error(msg);
+		else console.warn(msg);
 	}
-	return `${prefix}${hash}`;
+	return result;
 }
 
 export { getUniqueHash };

package/lib/index.d.ts

@@ -1,14 +1,27 @@
 import { hashString } from "./helpers/hash/hash.js";
+import { hashToString } from "./helpers/hash/stringify.js";
+import { UniqueHashOptions } from "./helpers/hash/types.js";
+import { getUniqueHash } from "./helpers/hash/unique.js";
 import { cloneObject } from "./helpers/misc/clone.js";
 import { compareSets, compareValues } from "./helpers/misc/compare.js";
 import { sortObject } from "./helpers/misc/sort-object.js";
-import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement } from "./xml/types.js";
+import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions } from "./xml/types.js";
 import { iterateXMLContent } from "./xml/iterate.js";
 import { parseXMLContent } from "./xml/parse.js";
 import { stringifyXMLContent } from "./xml/stringify.js";
 import { ChangeIDResult } from "./svg/ids/types.js";
-import { changeIDInString } from "./svg/ids/change.js";
+import { changeIDInString } from "./svg/ids/string.js";
 import { removeDuplicateIDs } from "./svg/ids/duplicate.js";
 import { removeUnusedIDs } from "./svg/ids/unused.js";
-import { changeSVGIDs } from "./svg/ids.js";
-export { ChangeIDResult, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, changeIDInString, changeSVGIDs, cloneObject, compareSets, compareValues, hashString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, stringifyXMLContent };
+import { changeSVGIDs } from "./svg/ids/change.js";
+import { createUniqueIDs } from "./svg/ids/unique.js";
+import { CSSRules, ConvertedSVGContent, SVGConvertedToCSSProperties, SVGPropertyType } from "./svg/css/types.js";
+import { ClassProp, classProps, defaultClassProp } from "./svg/css/css/const.js";
+import { createCSSClassName } from "./svg/css/css/class.js";
+import { stringifyCSSRules, stringifyCSSSelector } from "./svg/css/css/stringify.js";
+import { splitClassName, toggleClassName } from "./svg/css/css/toggle.js";
+import { convertSVGPropertyToCSS } from "./svg/css/props/prop.js";
+import { extractSVGTagPropertiesForCSS } from "./svg/css/props/props.js";
+import { convertSVGRootToCSS } from "./svg/css/convert/root.js";
+import { convertSVGContentToCSS } from "./svg/css/convert/content.js";
+export { CSSRules, ChangeIDResult, ClassProp, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, SVGConvertedToCSSProperties, SVGPropertyType, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues, convertSVGContentToCSS, convertSVGPropertyToCSS, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, extractSVGTagPropertiesForCSS, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName };

package/lib/index.js

@@ -1,13 +1,24 @@
 import { cloneObject } from "./helpers/misc/clone.js";
 import { sortObject } from "./helpers/misc/sort-object.js";
 import { compareSets, compareValues } from "./helpers/misc/compare.js";
+import { hashToString } from "./helpers/hash/stringify.js";
 import { hashString } from "./helpers/hash/hash.js";
+import { getUniqueHash } from "./helpers/hash/unique.js";
 import { iterateXMLContent } from "./xml/iterate.js";
 import { parseXMLContent } from "./xml/parse.js";
 import { stringifyXMLContent } from "./xml/stringify.js";
-import { changeIDInString } from "./svg/ids/change.js";
+import { changeIDInString } from "./svg/ids/string.js";
 import { removeDuplicateIDs } from "./svg/ids/duplicate.js";
 import { removeUnusedIDs } from "./svg/ids/unused.js";
-import { changeSVGIDs } from "./svg/ids.js";
+import { changeSVGIDs } from "./svg/ids/change.js";
+import { createUniqueIDs } from "./svg/ids/unique.js";
+import { classProps, defaultClassProp } from "./svg/css/css/const.js";
+import { createCSSClassName } from "./svg/css/css/class.js";
+import { stringifyCSSRules, stringifyCSSSelector } from "./svg/css/css/stringify.js";
+import { splitClassName, toggleClassName } from "./svg/css/css/toggle.js";
+import { convertSVGPropertyToCSS } from "./svg/css/props/prop.js";
+import { extractSVGTagPropertiesForCSS } from "./svg/css/props/props.js";
+import { convertSVGRootToCSS } from "./svg/css/convert/root.js";
+import { convertSVGContentToCSS } from "./svg/css/convert/content.js";
 
-export { changeIDInString, changeSVGIDs, cloneObject, compareSets, compareValues, hashString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, stringifyXMLContent };
+export { changeIDInString, changeSVGIDs, classProps, cloneObject, compareSets, compareValues, convertSVGContentToCSS, convertSVGPropertyToCSS, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, extractSVGTagPropertiesForCSS, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName };

package/lib/svg/css/convert/content.d.ts

@@ -0,0 +1,10 @@
+import { StringifyXMLOptions } from "../../../xml/types.js";
+import { ConvertedSVGContent } from "../types.js";
+interface Options extends StringifyXMLOptions {
+  classNamePrefix?: string;
+}
+/**
+ *
+ */
+declare function convertSVGContentToCSS(content: string, options?: Options): ConvertedSVGContent;
+export { convertSVGContentToCSS };

package/lib/svg/css/convert/content.js

@@ -0,0 +1,27 @@
+import { parseXMLContent } from "../../../xml/parse.js";
+import { stringifyXMLContent } from "../../../xml/stringify.js";
+import { stringifyCSSRules } from "../css/stringify.js";
+import { convertSVGRootToCSS } from "./root.js";
+
+/**
+*
+*/
+function convertSVGContentToCSS(content, options) {
+	const root = parseXMLContent(content);
+	if (!root) return { content };
+	const classNames = convertSVGRootToCSS(root, options?.classNamePrefix);
+	if (classNames) {
+		const newContent = stringifyXMLContent(root, options);
+		if (newContent) {
+			const rules = Object.create(null);
+			for (const className in classNames) rules[className] = stringifyCSSRules(classNames[className]);
+			return {
+				content: newContent,
+				rules
+			};
+		}
+	}
+	return { content };
+}
+
+export { convertSVGContentToCSS };

package/lib/svg/css/convert/root.d.ts

@@ -0,0 +1,9 @@
+import { ParsedXMLTagElement } from "../../../xml/types.js";
+import { CSSRules } from "../types.js";
+/**
+ * Convert SVG tags tree to SVG+CSS
+ *
+ * Returns used CSS class names with rules
+ */
+declare function convertSVGRootToCSS(root: ParsedXMLTagElement[], classNamePrefix?: string): Record<string, CSSRules>;
+export { convertSVGRootToCSS };

package/lib/svg/css/convert/root.js

@@ -0,0 +1,26 @@
+import { iterateXMLContent } from "../../../xml/iterate.js";
+import { createCSSClassName } from "../css/class.js";
+import { toggleClassName } from "../css/toggle.js";
+import { extractSVGTagPropertiesForCSS } from "../props/props.js";
+
+/**
+* Convert SVG tags tree to SVG+CSS
+*
+* Returns used CSS class names with rules
+*/
+function convertSVGRootToCSS(root, classNamePrefix = "") {
+	const rules = Object.create(null);
+	iterateXMLContent(root, (node) => {
+		if (node.type === "tag") {
+			const props = extractSVGTagPropertiesForCSS(node);
+			if (props) {
+				const className = createCSSClassName(props.rules, classNamePrefix);
+				toggleClassName(node.attribs, className, true);
+				rules[className] = props.rules;
+			}
+		}
+	});
+	return rules;
+}
+
+export { convertSVGRootToCSS };

package/lib/svg/css/css/class.d.ts

@@ -0,0 +1,6 @@
+import { CSSRules } from "../types.js";
+/**
+ * Get class name for CSS rules
+ */
+declare function createCSSClassName(rules: CSSRules, prefix?: string): string;
+export { createCSSClassName };

package/lib/svg/css/css/class.js

@@ -0,0 +1,17 @@
+import { sortObject } from "../../../helpers/misc/sort-object.js";
+import { getUniqueHash } from "../../../helpers/hash/unique.js";
+
+const length = 6;
+/**
+* Get class name for CSS rules
+*/
+function createCSSClassName(rules, prefix = "") {
+	const sorted = sortObject(rules);
+	return getUniqueHash(sorted, {
+		css: true,
+		length,
+		prefix
+	});
+}
+
+export { createCSSClassName };

package/lib/svg/css/css/const.d.ts

@@ -0,0 +1,4 @@
+declare const defaultClassProp = "class";
+declare const classProps: readonly ["class"];
+type ClassProp = (typeof classProps)[number];
+export { ClassProp, classProps, defaultClassProp };

package/lib/svg/css/css/const.js

@@ -0,0 +1,4 @@
+const defaultClassProp = "class";
+const classProps = [defaultClassProp];
+
+export { classProps, defaultClassProp };

package/lib/svg/css/css/stringify.d.ts

@@ -0,0 +1,10 @@
+import { CSSRules } from "../types.js";
+/**
+ * Stringify CSS rules
+ */
+declare function stringifyCSSRules(rules: CSSRules, depth?: number): string;
+/**
+ * Stringify CSS selector with rules
+ */
+declare function stringifyCSSSelector(selector: string, rules: string | CSSRules, depth?: number): string;
+export { stringifyCSSRules, stringifyCSSSelector };

package/lib/svg/css/css/stringify.js

@@ -0,0 +1,26 @@
+function indent(depth) {
+	return "  ".repeat(depth);
+}
+/**
+* Stringify CSS rules
+*/
+function stringifyCSSRules(rules, depth = 1) {
+	const tab = indent(depth);
+	const lines = [];
+	for (const key in rules) {
+		const value = rules[key];
+		lines.push(`${tab}${key}: ${value};\n`);
+	}
+	return lines.join("");
+}
+/**
+* Stringify CSS selector with rules
+*/
+function stringifyCSSSelector(selector, rules, depth = 0) {
+	const content = typeof rules === "string" ? rules : stringifyCSSRules(rules, depth + 1);
+	if (!content.length) return "";
+	const tab = indent(depth);
+	return `${tab}${selector} {\n${content}${tab}}\n`;
+}
+
+export { stringifyCSSRules, stringifyCSSSelector };

package/lib/svg/css/css/toggle.d.ts

@@ -0,0 +1,10 @@
+import { ClassProp } from "./const.js";
+/**
+ * Split class name by spaces
+ */
+declare function splitClassName(className: string): string[];
+/**
+ * Add/remove class name
+ */
+declare function toggleClassName(attribs: Record<string, unknown>, className: string, add: boolean, prop?: ClassProp): void;
+export { splitClassName, toggleClassName };

package/lib/svg/css/css/toggle.js

@@ -0,0 +1,29 @@
+import { defaultClassProp } from "./const.js";
+
+/**
+* Split class name by spaces
+*/
+function splitClassName(className) {
+	return className.trim().split(/\s+/);
+}
+/**
+* Add/remove class name
+*/
+function toggleClassName(attribs, className, add, prop = defaultClassProp) {
+	const oldValue = attribs[prop];
+	if (typeof oldValue !== "string") {
+		attribs[prop] = className;
+		return;
+	}
+	const list = new Set(oldValue.split(/\s+/g));
+	if (!add) {
+		if (!list.has(className)) return;
+		list.delete(className);
+	} else {
+		if (list.has(className)) return;
+		list.add(className);
+	}
+	attribs[prop] = Array.from(list).sort().join(" ");
+}
+
+export { splitClassName, toggleClassName };

package/lib/svg/css/props/prop.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Convert property to CSS
+ */
+declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number): [string, string] | undefined;
+export { convertSVGPropertyToCSS };

package/lib/svg/css/props/prop.js

@@ -0,0 +1,65 @@
+const propTypes = [
+	"path",
+	"px",
+	"raw"
+];
+const commonShapes = { px: [
+	"width",
+	"height",
+	"x",
+	"y",
+	"cx",
+	"cy",
+	"r",
+	"rx",
+	"ry"
+] };
+const props = {
+	"*": {
+		px: ["stroke-width"],
+		raw: [
+			"fill",
+			"stroke",
+			"color",
+			"opacity"
+		]
+	},
+	"path": { path: ["d"] },
+	"ellipse": commonShapes,
+	"circle": commonShapes,
+	"rect": commonShapes,
+	"stop": { raw: ["stop-color", "stop-opacity"] }
+};
+const skipTags = [
+	"animate",
+	"animateMotion",
+	"animateTransform",
+	"set",
+	"discard"
+];
+/**
+* Get property type
+*/
+function getSVGPropertyType(tag, prop) {
+	if (skipTags.includes(tag)) return;
+	for (const type of propTypes) if (props[tag]?.[type]?.includes(prop) || props["*"]?.[type]?.includes(prop)) return type;
+	if (prop.startsWith("stroke") || prop.startsWith("fill")) return "raw";
+}
+/**
+* Convert property to CSS
+*/
+function convertSVGPropertyToCSS(tag, prop, value) {
+	switch (getSVGPropertyType(tag, prop)) {
+		case "path":
+			if (typeof value !== "string") return;
+			return [prop, `path("${value.replace(/\s+/g, " ")}")`];
+		case "px":
+			if (typeof value === "string" && !value.match(/^[0-9.-]+$/)) return [prop, value];
+			return [prop, `${value}px`];
+		case "raw":
+			if (typeof value === "string" && value.startsWith("url(")) return;
+			return [prop, `${value}`];
+	}
+}
+
+export { convertSVGPropertyToCSS };

package/lib/svg/css/props/props.d.ts

@@ -0,0 +1,9 @@
+import { ParsedXMLTagElement } from "../../../xml/types.js";
+import { SVGConvertedToCSSProperties } from "../types.js";
+/**
+ * Extract SVG tag properties that can be converted to CSS
+ *
+ * Returns CSS rules, does not add a class to tag, but does remove properties from tag
+ */
+declare function extractSVGTagPropertiesForCSS(tag: ParsedXMLTagElement): SVGConvertedToCSSProperties | undefined;
+export { extractSVGTagPropertiesForCSS };

package/lib/svg/css/props/props.js

@@ -0,0 +1,42 @@
+import { iterateXMLContent } from "../../../xml/iterate.js";
+import { convertSVGPropertyToCSS } from "./prop.js";
+
+const animationTags = [
+	"animate",
+	"set",
+	"discard"
+];
+/**
+* Extract SVG tag properties that can be converted to CSS
+*
+* Returns CSS rules, does not add a class to tag, but does remove properties from tag
+*/
+function extractSVGTagPropertiesForCSS(tag) {
+	const result = {
+		props: [],
+		rules: Object.create(null)
+	};
+	const animatedProps = /* @__PURE__ */ new Set();
+	iterateXMLContent(tag.children, (node) => {
+		if (node.type === "tag") {
+			if (animationTags.includes(node.tag)) {
+				const prop = node.attribs.attributeName;
+				if (typeof prop === "string") animatedProps.add(prop);
+			}
+			if (node.tag === "animateTransform") animatedProps.add("transform");
+		}
+	});
+	for (const prop in tag.attribs) if (!animatedProps.has(prop)) {
+		const value = tag.attribs[prop];
+		const converted = convertSVGPropertyToCSS(tag.tag, prop, value);
+		if (converted) {
+			const [propName, propValue] = converted;
+			result.props.push(propName);
+			result.rules[propName] = propValue;
+			delete tag.attribs[prop];
+		}
+	}
+	return result.props.length > 0 ? result : void 0;
+}
+
+export { extractSVGTagPropertiesForCSS };

package/lib/svg/css/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SVG property types
+ */
+type SVGPropertyType = 'path' | 'px' | 'raw';
+/**
+ * CSS rules
+ */
+type CSSRules = Record<string, string>;
+/**
+ * Result of converting SVG properties to CSS
+ */
+interface SVGConvertedToCSSProperties {
+  props: string[];
+  rules: CSSRules;
+}
+/**
+ * Result of converting SVG content to SVG+CSS
+ */
+interface ConvertedSVGContent {
+  content: string;
+  rules?: Record<string, string>;
+}
+export { CSSRules, ConvertedSVGContent, SVGConvertedToCSSProperties, SVGPropertyType };

package/lib/svg/ids/change.d.ts

@@ -1,5 +1,8 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+import { ChangeIDResult } from "./types.js";
+type HashCallback = (id: string, content: string, tagName: string) => string;
 /**
- * Change ID in a string
+ * Change IDs in SVG using a callback function
  */
-declare function changeIDInString(value: string, oldID: string, newID: string): string;
-export { changeIDInString };
+declare function changeSVGIDs(root: ParsedXMLTagElement[], callback: HashCallback): ChangeIDResult;
+export { changeSVGIDs };

package/lib/svg/ids/change.js

@@ -1,9 +1,118 @@
+import { iterateXMLContent } from "../../xml/iterate.js";
+import { stringifyXMLContent } from "../../xml/stringify.js";
+import { changeIDInString } from "./string.js";
+
 /**
-* Change ID in a string
+* Change IDs in SVG using a callback function
 */
-function changeIDInString(value, oldID, newID) {
-	const escapedID = oldID.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-	return value.replace(new RegExp("([#;\"])(" + escapedID + ")([\")]|\\.[a-z])", "g"), "$1" + newID + "$3");
+function changeSVGIDs(root, callback) {
+	const idMap = /* @__PURE__ */ new Map();
+	const idNodes = /* @__PURE__ */ new Map();
+	const nestedIDs = /* @__PURE__ */ new Map();
+	const results = {
+		map: Object.create(null),
+		usage: Object.create(null)
+	};
+	const usage = [];
+	const parse = (replacement) => {
+		iterateXMLContent(root, (node, stack) => {
+			if (node.type !== "tag") return;
+			const attribs = node.attribs;
+			const nodeID = attribs.id;
+			if (typeof nodeID === "string") {
+				if (!replacement) {
+					if (idNodes.has(nodeID)) throw new Error(`Duplicate ID found: ${nodeID}`);
+					idNodes.set(nodeID, node);
+					idMap.set(node, nodeID);
+				} else if (nodeID === replacement[0]) {
+					const newID = replacement[1];
+					attribs.id = newID;
+					if (!results.map[newID]) results.map[newID] = [node];
+					else results.map[newID].push(node);
+				}
+			}
+			for (const attrib in attribs) {
+				const value = attribs[attrib];
+				if (typeof value !== "string") continue;
+				const add = (id) => {
+					usage.push({
+						node,
+						attrib,
+						id
+					});
+					[node, ...stack].forEach((node$1) => {
+						const parentID = idMap.get(node$1);
+						if (parentID) {
+							const nested = nestedIDs.get(parentID) || [];
+							if (!nested.includes(id)) {
+								nested.push(id);
+								nestedIDs.set(parentID, nested);
+							}
+						}
+					});
+				};
+				switch (attrib) {
+					case "id": break;
+					case "begin":
+					case "end": {
+						const newValue = value.split(";").map((part) => {
+							const chunks = part.trim().split(".");
+							if (chunks.length < 2) return part;
+							const time = chunks[1];
+							if (time?.startsWith("begin") || time?.startsWith("end")) {
+								const id = chunks.shift();
+								if (!replacement) add(id);
+								else if (id === replacement[0]) return `${replacement[1]}.${chunks.join(".")}`;
+							}
+							return part;
+						}).join(";");
+						if (replacement) attribs[attrib] = newValue;
+						break;
+					}
+					case "href":
+					case "xlink:href":
+						if (value.startsWith("#")) {
+							const id = value.slice(1);
+							if (!replacement) add(id);
+							else if (id === replacement[0]) attribs[attrib] = `#${replacement[1]}`;
+						}
+						break;
+					default: if (value.startsWith("url(#")) {
+						const id = value.slice(5, -1);
+						if (!replacement) add(id);
+						else if (id === replacement[0]) attribs[attrib] = `url(#${replacement[1]})`;
+					}
+				}
+			}
+		});
+	};
+	parse();
+	if (!idMap.size) return results;
+	const allIDs = new Set(idMap.values());
+	const parseIDs = (parseAll = false) => {
+		const oldSize = allIDs.size;
+		for (const id of allIDs) {
+			const nested = nestedIDs.get(id)?.filter((nestedID) => nestedID !== id && allIDs.has(nestedID)) ?? [];
+			if (parseAll || !nested.length) {
+				const node = idNodes.get(id);
+				const content = stringifyXMLContent([node]);
+				if (!content) throw new Error(`Failed to stringify node with ID: ${id}`);
+				const cleanedContent = changeIDInString(content, id, "{id}");
+				const newID = callback(id, cleanedContent, node.tag);
+				if (newID !== id) parse([id, newID]);
+				allIDs.delete(id);
+				const idUsage = [];
+				for (const item of usage) if (item.id === id) idUsage.push(item.node);
+				results.usage[newID] = idUsage;
+			}
+		}
+		return allIDs.size !== oldSize;
+	};
+	while (allIDs.size) if (!parseIDs()) {
+		parseIDs(true);
+		return results;
+	}
+	return results;
 }
 
-export { changeIDInString };
+export { changeSVGIDs };

package/lib/svg/ids/string.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Change ID in a string
+ */
+declare function changeIDInString(value: string, oldID: string, newID: string): string;
+export { changeIDInString };

package/lib/svg/ids/string.js

@@ -0,0 +1,9 @@
+/**
+* Change ID in a string
+*/
+function changeIDInString(value, oldID, newID) {
+	const escapedID = oldID.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return value.replace(new RegExp("([#;\"])(" + escapedID + ")([\")]|\\.[a-z])", "g"), "$1" + newID + "$3");
+}
+
+export { changeIDInString };

package/lib/svg/ids/unique.d.ts

@@ -0,0 +1,6 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+/**
+ * Create unique IDs for SVG elements
+ */
+declare function createUniqueIDs(root: ParsedXMLTagElement[], prefix?: string): void;
+export { createUniqueIDs };

package/lib/svg/ids/unique.js

@@ -0,0 +1,18 @@
+import { getUniqueHash } from "../../helpers/hash/unique.js";
+import { changeSVGIDs } from "./change.js";
+
+const length = 8;
+const lengths = {};
+/**
+* Create unique IDs for SVG elements
+*/
+function createUniqueIDs(root, prefix = "SVG") {
+	changeSVGIDs(root, (id, content) => getUniqueHash(content, {
+		css: false,
+		prefix,
+		length,
+		lengths
+	}));
+}
+
+export { createUniqueIDs };

package/lib/xml/iterate.d.ts

@@ -8,5 +8,5 @@ import { ParsedXMLNode, ParsedXMLTagElement } from "./types.js";
  * - 'abort': stop iteration
  */
 type CallbackResult = void | 'remove' | 'skip' | 'abort';
-declare function iterateXMLContent(root: ParsedXMLTagElement[], callback: (node: ParsedXMLNode, stack: ParsedXMLTagElement[]) => CallbackResult): ParsedXMLTagElement[];
+declare function iterateXMLContent<T extends ParsedXMLTagElement | ParsedXMLNode>(root: T[], callback: (node: ParsedXMLNode, stack: ParsedXMLTagElement[]) => CallbackResult): T[];
 export { iterateXMLContent };

package/lib/xml/stringify.d.ts

@@ -1,11 +1,6 @@
-import { ParsedXMLTagElement } from "./types.js";
-interface ParseSVGOptions {
-  useSelfClosing?: boolean;
-  numberTemplate?: string;
-  prettyPrint?: boolean | string;
-}
+import { ParsedXMLTagElement, StringifyXMLOptions } from "./types.js";
 /**
  * Convert parsed XML content to string
  */
-declare function stringifyXMLContent(root: ParsedXMLTagElement[], options?: ParseSVGOptions): string | null;
+declare function stringifyXMLContent(root: ParsedXMLTagElement[], options?: StringifyXMLOptions): string | null;
 export { stringifyXMLContent };

package/lib/xml/types.d.ts

@@ -18,4 +18,12 @@ interface ParsedXMLTextElement {
  * Element in tree
  */
 type ParsedXMLNode = ParsedXMLTagElement | ParsedXMLTextElement;
-export { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement };
+/**
+ * Options for stringifying XML
+ */
+interface StringifyXMLOptions {
+  useSelfClosing?: boolean;
+  numberTemplate?: string;
+  prettyPrint?: boolean | string;
+}
+export { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",

package/lib/svg/ids.d.ts

@@ -1,8 +0,0 @@
-import { ParsedXMLTagElement } from "../xml/types.js";
-import { ChangeIDResult } from "./ids/types.js";
-type HashCallback = (id: string, content: string, tagName: string) => string;
-/**
- * Change IDs in SVG using a callback function
- */
-declare function changeSVGIDs(root: ParsedXMLTagElement[], callback: HashCallback): ChangeIDResult;
-export { changeSVGIDs };

package/lib/svg/ids.js

@@ -1,118 +0,0 @@
-import { iterateXMLContent } from "../xml/iterate.js";
-import { stringifyXMLContent } from "../xml/stringify.js";
-import { changeIDInString } from "./ids/change.js";
-
-/**
-* Change IDs in SVG using a callback function
-*/
-function changeSVGIDs(root, callback) {
-	const idMap = /* @__PURE__ */ new Map();
-	const idNodes = /* @__PURE__ */ new Map();
-	const nestedIDs = /* @__PURE__ */ new Map();
-	const results = {
-		map: Object.create(null),
-		usage: Object.create(null)
-	};
-	const usage = [];
-	const parse = (replacement) => {
-		iterateXMLContent(root, (node, stack) => {
-			if (node.type !== "tag") return;
-			const attribs = node.attribs;
-			const nodeID = attribs.id;
-			if (typeof nodeID === "string") {
-				if (!replacement) {
-					if (idNodes.has(nodeID)) throw new Error(`Duplicate ID found: ${nodeID}`);
-					idNodes.set(nodeID, node);
-					idMap.set(node, nodeID);
-				} else if (nodeID === replacement[0]) {
-					const newID = replacement[1];
-					attribs.id = newID;
-					if (!results.map[newID]) results.map[newID] = [node];
-					else results.map[newID].push(node);
-				}
-			}
-			for (const attrib in attribs) {
-				const value = attribs[attrib];
-				if (typeof value !== "string") continue;
-				const add = (id) => {
-					usage.push({
-						node,
-						attrib,
-						id
-					});
-					[node, ...stack].forEach((node$1) => {
-						const parentID = idMap.get(node$1);
-						if (parentID) {
-							const nested = nestedIDs.get(parentID) || [];
-							if (!nested.includes(id)) {
-								nested.push(id);
-								nestedIDs.set(parentID, nested);
-							}
-						}
-					});
-				};
-				switch (attrib) {
-					case "id": break;
-					case "begin":
-					case "end": {
-						const newValue = value.split(";").map((part) => {
-							const chunks = part.trim().split(".");
-							if (chunks.length < 2) return part;
-							const time = chunks[1];
-							if (time?.startsWith("begin") || time?.startsWith("end")) {
-								const id = chunks.shift();
-								if (!replacement) add(id);
-								else if (id === replacement[0]) return `${replacement[1]}.${chunks.join(".")}`;
-							}
-							return part;
-						}).join(";");
-						if (replacement) attribs[attrib] = newValue;
-						break;
-					}
-					case "href":
-					case "xlink:href":
-						if (value.startsWith("#")) {
-							const id = value.slice(1);
-							if (!replacement) add(id);
-							else if (id === replacement[0]) attribs[attrib] = `#${replacement[1]}`;
-						}
-						break;
-					default: if (value.startsWith("url(#")) {
-						const id = value.slice(5, -1);
-						if (!replacement) add(id);
-						else if (id === replacement[0]) attribs[attrib] = `url(#${replacement[1]})`;
-					}
-				}
-			}
-		});
-	};
-	parse();
-	if (!idMap.size) return results;
-	const allIDs = new Set(idMap.values());
-	const parseIDs = (parseAll = false) => {
-		const oldSize = allIDs.size;
-		for (const id of allIDs) {
-			const nested = nestedIDs.get(id)?.filter((nestedID) => nestedID !== id && allIDs.has(nestedID)) ?? [];
-			if (parseAll || !nested.length) {
-				const node = idNodes.get(id);
-				const content = stringifyXMLContent([node]);
-				if (!content) throw new Error(`Failed to stringify node with ID: ${id}`);
-				const cleanedContent = changeIDInString(content, id, "{id}");
-				const newID = callback(id, cleanedContent, node.tag);
-				if (newID !== id) parse([id, newID]);
-				allIDs.delete(id);
-				const idUsage = [];
-				for (const item of usage) if (item.id === id) idUsage.push(item.node);
-				results.usage[newID] = idUsage;
-			}
-		}
-		return allIDs.size !== oldSize;
-	};
-	while (allIDs.size) if (!parseIDs()) {
-		parseIDs(true);
-		return results;
-	}
-	return results;
-}
-
-export { changeSVGIDs };