svger-cli 3.1.1 → 4.0.1

package/dist/optimizers/basic-cleaner.js

@@ -0,0 +1,240 @@
+/**
+ * Basic SVG Cleaner
+ * Extracts basic cleaning logic from svg-processor for use in optimizer pipeline
+ */
+/**
+ * Remove XML declarations from SVG content
+ */
+export function removeXMLDeclaration(svg, config) {
+    if (!config.removeXMLProcInst)
+        return svg;
+    return svg.replace(/<\?xml.*?\?>/g, '');
+}
+/**
+ * Remove px units from width and height attributes for React compatibility
+ */
+export function removePxUnits(svg) {
+    // Convert width="24px" to width={24} for React
+    return svg.replace(/\s(width|height)=["'](\d+)px["']/g, ' $1={$2}');
+}
+/**
+ * Remove DOCTYPE declarations from SVG content
+ */
+export function removeDoctype(svg, config) {
+    if (!config.removeDoctype)
+        return svg;
+    return svg.replace(/<!DOCTYPE.*?>/g, '');
+}
+/**
+ * Remove comments from SVG content
+ */
+export function removeComments(svg, config) {
+    if (!config.removeComments)
+        return svg;
+    return svg.replace(/<!--[\s\S]*?-->/g, '');
+}
+/**
+ * Normalize whitespace in SVG content
+ */
+export function normalizeWhitespace(svg, config) {
+    if (!config.normalizeWhitespace)
+        return svg;
+    return svg
+        .replace(/\r?\n|\r/g, '') // Remove line breaks
+        .replace(/\s{2,}/g, ' ') // Collapse multiple spaces
+        .trim();
+}
+/**
+ * Remove metadata elements from SVG content
+ */
+export function removeMetadata(svg, config) {
+    if (!config.removeMetadata)
+        return svg;
+    return svg
+        .replace(/<metadata[\s\S]*?<\/metadata>/gi, '')
+        .replace(/<title[\s\S]*?<\/title>/gi, '')
+        .replace(/<desc[\s\S]*?<\/desc>/gi, '');
+}
+/**
+ * Convert kebab-case attributes to camelCase for React compatibility
+ */
+export function convertToCamelCase(svg, config) {
+    if (!config.reactCompatibility)
+        return svg;
+    const attributeMap = {
+        'fill-rule': 'fillRule',
+        'clip-rule': 'clipRule',
+        'stroke-width': 'strokeWidth',
+        'stroke-linecap': 'strokeLinecap',
+        'stroke-linejoin': 'strokeLinejoin',
+        'stroke-miterlimit': 'strokeMiterlimit',
+        'stroke-dasharray': 'strokeDasharray',
+        'stroke-dashoffset': 'strokeDashoffset',
+        'font-family': 'fontFamily',
+        'font-size': 'fontSize',
+        'font-weight': 'fontWeight',
+        'text-anchor': 'textAnchor',
+        'stop-color': 'stopColor',
+        'stop-opacity': 'stopOpacity',
+        'fill-opacity': 'fillOpacity',
+        'stroke-opacity': 'strokeOpacity',
+    };
+    let result = svg;
+    for (const [kebab, camel] of Object.entries(attributeMap)) {
+        const regex = new RegExp(kebab, 'g');
+        result = result.replace(regex, camel);
+    }
+    return result;
+}
+/**
+ * Remove unnecessary XML namespace attributes
+ */
+export function removeXMLNamespaces(svg, config) {
+    if (!config.removeUnnecessaryAttrs)
+        return svg;
+    // Remove xmlns and xmlns:xlink (React handles these automatically)
+    return svg.replace(/\s+xmlns(:xlink)?="[^"]*"/g, '');
+}
+/**
+ * Remove inline style attributes
+ * Note: This can be aggressive - use with caution
+ */
+export function removeInlineStyles(svg, config) {
+    // When inlineStyles is true, remove them completely
+    // When false (default), convert to React style objects for React compatibility
+    if (config.inlineStyles) {
+        // Remove style attributes completely
+        return svg.replace(/\s+style="[^"]*"/g, '');
+    }
+    // Convert inline CSS styles to React style objects for React compatibility
+    return svg.replace(/\s+style="([^"]*)"/g, (_match, styleString) => {
+        // Handle empty style attributes
+        if (!styleString.trim()) {
+            return '';
+        }
+        const styles = {};
+        // Parse CSS declarations
+        const declarations = styleString
+            .split(';')
+            .map((s) => s.trim())
+            .filter((s) => s.length > 0);
+        declarations.forEach((declaration) => {
+            const [property, value] = declaration
+                .split(':')
+                .map((s) => s.trim());
+            if (property && value) {
+                // Convert CSS property names to camelCase (stroke-width → strokeWidth)
+                const camelProperty = property.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                styles[camelProperty] = value;
+            }
+        });
+        // If no valid styles, remove the attribute
+        if (Object.keys(styles).length === 0) {
+            return '';
+        }
+        // Generate React inline style object syntax
+        const styleEntries = Object.entries(styles)
+            .map(([key, value]) => `${key}: '${value}'`)
+            .join(', ');
+        return ` style={{${styleEntries}}}`;
+    });
+}
+/**
+ * Shorten hex colors (#ffffff → #fff)
+ */
+export function shortenColors(svg, config) {
+    if (!config.shortenColors)
+        return svg;
+    // Match 6-digit hex colors that can be shortened
+    return svg.replace(/#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3/gi, '#$1$2$3');
+}
+/**
+ * Remove empty containers (g, defs without children or with only whitespace)
+ */
+export function removeEmptyContainers(svg, config) {
+    if (!config.removeEmptyContainers)
+        return svg;
+    let result = svg;
+    let previousResult = '';
+    // Iteratively remove empty containers until no more are found
+    while (result !== previousResult) {
+        previousResult = result;
+        result = result
+            .replace(/<g\s*><\/g>/gi, '') // Empty g tags
+            .replace(/<g\s*>\s*<\/g>/gi, '') // g tags with only whitespace
+            .replace(/<defs\s*><\/defs>/gi, '') // Empty defs tags
+            .replace(/<defs\s*>\s*<\/defs>/gi, ''); // defs with only whitespace
+    }
+    return result;
+}
+/**
+ * Remove hidden elements (display:none, opacity:0, visibility:hidden)
+ */
+/**
+ * Remove hidden elements (display:none, opacity:0, visibility:hidden)
+ * NOTE: Disabled because it's too aggressive with regex and breaks complex SVGs.
+ * Use tree-based optimization (remove-hidden-empty.ts) instead for safe removal.
+ */
+export function removeHiddenElements(svg) {
+    // DISABLED: Regex-based removal is too aggressive
+    // Tree-based optimizer handles this correctly
+    return svg;
+}
+/**
+ * Round float numbers to specified precision
+ */
+export function roundFloats(svg, config) {
+    const precision = config.floatPrecision;
+    // Match floating point numbers
+    return svg.replace(/(\d+\.\d+)/g, match => {
+        const num = parseFloat(match);
+        return num.toFixed(precision).replace(/\.?0+$/, ''); // Remove trailing zeros
+    });
+}
+/**
+ * Sort attributes alphabetically
+ */
+export function sortAttributes(svg, config) {
+    if (!config.sortAttrs)
+        return svg;
+    // Match SVG tags with attributes (both self-closing and regular)
+    return svg.replace(/<([a-z][a-z0-9]*)\s+([^>]+?)(\/?)>/gi, (_match, tagName, attrs, selfClosing) => {
+        // Parse attributes
+        const attrPairs = [];
+        const attrRegex = /([a-zA-Z][a-zA-Z0-9-]*)="([^"]*)"/g;
+        let attrMatch;
+        while ((attrMatch = attrRegex.exec(attrs)) !== null) {
+            attrPairs.push([attrMatch[1], attrMatch[2]]);
+        }
+        // Sort alphabetically
+        attrPairs.sort((a, b) => a[0].localeCompare(b[0]));
+        // Reconstruct tag, preserving self-closing status
+        const sortedAttrs = attrPairs
+            .map(([key, val]) => `${key}="${val}"`)
+            .join(' ');
+        return `<${tagName} ${sortedAttrs}${selfClosing}>`;
+    });
+}
+/**
+ * Basic cleaning stage - combines all basic cleaners
+ * This is the main entry point for the optimizer pipeline
+ */
+export async function basicCleaningStage(svg, config) {
+    let result = svg;
+    // Apply cleaners in sequence
+    result = removeXMLDeclaration(result, config);
+    result = removeDoctype(result, config);
+    result = removeComments(result, config);
+    result = removeMetadata(result, config);
+    result = normalizeWhitespace(result, config);
+    result = removeXMLNamespaces(result, config);
+    result = removeInlineStyles(result, config);
+    result = convertToCamelCase(result, config);
+    result = removePxUnits(result); // Remove px units for React compatibility
+    result = shortenColors(result, config);
+    result = roundFloats(result, config);
+    result = removeEmptyContainers(result, config);
+    result = removeHiddenElements(result);
+    result = sortAttributes(result, config);
+    return result;
+}

package/dist/optimizers/collapse-useless-groups.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Collapse Useless Groups
+ * Remove <g> with no attrs and single child
+ * Merge attrs upward if safe (no conflicts)
+ */
+import type { SVGNode } from './svg-tree-parser.js';
+/**
+ * Collapse useless groups in the tree
+ * A group is useless if:
+ * 1. It has no attributes and exactly one child
+ * 2. It has attributes that don't conflict with its single child
+ */
+export declare function collapseUselessGroups(root: SVGNode): {
+    collapsedCount: number;
+    collapsedNodes: string[];
+};
+/**
+ * Collapse useless groups stage
+ */
+export declare function collapseUselessGroupsStage(root: SVGNode): {
+    modified: boolean;
+    stats: {
+        collapsedCount: number;
+        collapsedNodes: string[];
+    };
+};

package/dist/optimizers/collapse-useless-groups.js

@@ -0,0 +1,104 @@
+/**
+ * Collapse Useless Groups
+ * Remove <g> with no attrs and single child
+ * Merge attrs upward if safe (no conflicts)
+ */
+import { traverseTree, replaceNode } from './svg-tree-parser.js';
+/**
+ * Check if a group is useless (no attributes and single child)
+ */
+function isUselessGroup(node) {
+    return (node.tag === 'g' &&
+        node.attrs.size === 0 &&
+        node.children.length === 1 &&
+        !node.content);
+}
+/**
+ * Check if attributes can be safely merged from child to parent
+ * Returns true if no conflicts exist
+ */
+function canMergeAttributes(parent, child) {
+    // Check for attribute conflicts
+    for (const [key] of child.attrs.entries()) {
+        if (parent.attrs.has(key)) {
+            // Conflict: both have the same attribute
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Merge child attributes to parent
+ */
+function mergeAttributesToParent(parent, child) {
+    for (const [key, value] of child.attrs.entries()) {
+        if (!parent.attrs.has(key)) {
+            parent.attrs.set(key, value);
+        }
+    }
+}
+/**
+ * Collapse useless groups in the tree
+ * A group is useless if:
+ * 1. It has no attributes and exactly one child
+ * 2. It has attributes that don't conflict with its single child
+ */
+export function collapseUselessGroups(root) {
+    let collapsedCount = 0;
+    const collapsedNodes = [];
+    // We need to collect nodes to collapse first
+    // to avoid modifying tree during traversal
+    const nodesToCollapse = [];
+    traverseTree(root, node => {
+        if (node.tag === 'g') {
+            // Case 1: Group with no attributes and single child
+            if (isUselessGroup(node)) {
+                nodesToCollapse.push(node);
+            }
+            // Case 2: Group with single child and no attribute conflicts
+            else if (node.children.length === 1 && !node.content) {
+                const child = node.children[0];
+                if (canMergeAttributes(child, node)) {
+                    nodesToCollapse.push(node);
+                }
+            }
+        }
+    });
+    // Collapse collected nodes
+    for (const node of nodesToCollapse) {
+        if (!node.parent)
+            continue;
+        const child = node.children[0];
+        // For groups with no attrs, just replace group with child
+        if (node.attrs.size === 0) {
+            if (replaceNode(node, child)) {
+                const id = node.attrs.get('id') || 'anonymous';
+                collapsedNodes.push(id);
+                collapsedCount++;
+            }
+        }
+        // For groups with attrs, merge them to child first
+        else if (canMergeAttributes(child, node)) {
+            mergeAttributesToParent(child, node);
+            if (replaceNode(node, child)) {
+                const id = node.attrs.get('id') || 'anonymous';
+                collapsedNodes.push(id);
+                collapsedCount++;
+            }
+        }
+    }
+    return {
+        collapsedCount,
+        collapsedNodes,
+    };
+}
+/**
+ * Collapse useless groups stage
+ */
+export function collapseUselessGroupsStage(root) {
+    const result = collapseUselessGroups(root);
+    return {
+        modified: result.collapsedCount > 0,
+        stats: result,
+    };
+}

package/dist/optimizers/command-optimizer.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Path Command Optimizer (Phase 4.3)
+ *
+ * Goal: Achieve 50-70% reduction on complex paths with smart curve transformation
+ *
+ * Main features:
+ * 1. Curve shortening (C→S, C→Q, Q→T)
+ * 2. Smart command substitution (C/Q→L when straight)
+ * 3. Relative/Absolute re-evaluation after changes
+ * 4. Configurable tolerance based on optimization level
+ *
+ * Expected improvement: 10-25% additional reduction on complex icons
+ */
+import type { PathCommand } from './path-parser.js';
+/**
+ * Optimize path commands by transforming curves to simpler forms
+ *
+ * Priority:
+ * 1. C → S (smooth cubic)
+ * 2. C → Q (cubic to quadratic)
+ * 3. Q → T (smooth quadratic)
+ * 4. C/Q → L (curve to line when straight)
+ * 5. Re-evaluate absolute/relative after changes
+ */
+export declare function optimizeCommands(commands: PathCommand[], tolerance?: number, precision?: number): {
+    commands: PathCommand[];
+    stats: {
+        convertedCtoS: number;
+        convertedCtoQ: number;
+        convertedQtoT: number;
+        convertedCurveToLine: number;
+        reoptimizedAbsRel: number;
+    };
+};
+/**
+ * Command optimization stage for pipeline integration
+ * Applies curve shortening, smart substitution, and re-optimization
+ */
+export declare function commandOptimizationStage(commands: PathCommand[], tolerance?: number, precision?: number): {
+    commands: PathCommand[];
+    stats: {
+        convertedCtoS: number;
+        convertedCtoQ: number;
+        convertedQtoT: number;
+        convertedCurveToLine: number;
+        reoptimizedAbsRel: number;
+    };
+};