feat: improve multi-color SVG handling and accessibility

- Add detection for paths with different colors
- Display warning when merging multi-colored SVGs
- Apply fill-rule='evenodd' by default to preserve overlapping paths
- Improve toast contrast for WCAG AAA compliance (warnings with dark text)
- Update FAQ with multi-colored SVG behavior explanation
- Update Schema.org structured data with new FAQ entry

Author: firestar300

index.html

@@ -84,7 +84,15 @@
                 "name": "Will merging paths change my SVG appearance?",
                 "acceptedAnswer": {
                     "@type": "Answer",
-                    "text": "No, merging paths only combines the path data into a single element. The visual appearance remains exactly the same. However, if multiple paths have different fill or stroke colors, the merged path will inherit the fill or stroke color of the first path."
+                    "text": "In most cases, no. The visual appearance remains the same when paths use the same colors. However, if your SVG uses multiple fill or stroke colors, see the question about multi-colored SVGs."
+                }
+            },
+            {
+                "@type": "Question",
+                "name": "What happens with multi-colored SVGs?",
+                "acceptedAnswer": {
+                    "@type": "Answer",
+                    "text": "When merging paths with different colors, all paths will inherit the color of the first path. This means details with different colors may become less visible or disappear. The tool will warn you when this happens. For best results, use this tool with single-color SVGs or SVGs where overlapping paths create cutouts."
                 }
             },
             {
@@ -273,7 +281,11 @@ <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">What is an SVG
                         </div>
                         <div>
                             <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">Will merging paths change my SVG appearance?</h3>
-                            <p class="text-slate-600 dark:text-slate-400">No, merging paths only combines the path data into a single element. The visual appearance remains exactly the same. However, if multiple paths have different fill or stroke colors, the merged path will inherit the fill or stroke color of the first path.</p>
+                            <p class="text-slate-600 dark:text-slate-400">In most cases, no. The visual appearance remains the same when paths use the same colors. However, if your SVG uses multiple fill or stroke colors, see the question below about multi-colored SVGs.</p>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">What happens with multi-colored SVGs?</h3>
+                            <p class="text-slate-600 dark:text-slate-400">When merging paths with different colors, all paths will inherit the color of the first path. This means details with different colors may become less visible or disappear. The tool will warn you when this happens. For best results, use this tool with single-color SVGs or SVGs where overlapping paths create cutouts (which will be preserved using <code class="text-slate-800 dark:text-slate-300">fill-rule="evenodd"</code>).</p>
                         </div>
                         <div>
                             <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">Is this tool free to use?</h3>

src/main.js

@@ -214,7 +214,14 @@ function handleInput() {
         });
 
         // Merge paths
-        const mergedSvg = mergePaths(svgElement, paths);
+        const mergeResult = mergePaths(svgElement, paths);
+        const mergedSvg = mergeResult.svg;
+
+        // Show warnings if any colors are lost
+        if (mergeResult.warnings.length > 0) {
+            const warningMessage = '⚠️ Note: ' + mergeResult.warnings.join(' ');
+            showToast(warningMessage, 'warning');
+        }
 
         // Display output
         outputSvg.value = formatSvg(mergedSvg);
@@ -236,19 +243,26 @@ function handleInput() {
  * Merges all path elements into a single path
  * @param {SVGElement} svgElement - The SVG element
  * @param {NodeList} paths - Collection of path elements
- * @returns {string} - The merged SVG string
+ * @returns {Object} - Object containing merged SVG string and warnings
  */
 function mergePaths(svgElement, paths) {
     // Clone the SVG element
     const clonedSvg = svgElement.cloneNode(true);
 
-    // Collect all path data
+    // Collect all path data and check for different colors
     const pathDataArray = [];
-    const transforms = [];
+    const fills = new Set();
+    const strokes = new Set();
+    const warnings = [];
 
     paths.forEach(path => {
         const d = path.getAttribute('d');
         const transform = path.getAttribute('transform');
+        const fill = path.getAttribute('fill') || 'none';
+        const stroke = path.getAttribute('stroke') || 'none';
+
+        if (fill !== 'none') fills.add(fill);
+        if (stroke !== 'none') strokes.add(stroke);
 
         if (d) {
             // If path has a transform, we need to apply it
@@ -260,6 +274,14 @@ function mergePaths(svgElement, paths) {
         }
     });
 
+    // Check if there are multiple colors
+    if (fills.size > 1) {
+        warnings.push(`Multiple fill colors detected (${fills.size} different colors). All paths will use the first color found.`);
+    }
+    if (strokes.size > 1) {
+        warnings.push(`Multiple stroke colors detected (${strokes.size} different colors). All paths will use the first stroke found.`);
+    }
+
     // Combine all path data
     const mergedPathData = pathDataArray.join(' ');
 
@@ -275,16 +297,24 @@ function mergePaths(svgElement, paths) {
     const fill = firstPath.getAttribute('fill');
     const stroke = firstPath.getAttribute('stroke');
     const strokeWidth = firstPath.getAttribute('stroke-width');
+    const fillRule = firstPath.getAttribute('fill-rule');
 
     if (fill) newPath.setAttribute('fill', fill);
     if (stroke) newPath.setAttribute('stroke', stroke);
     if (strokeWidth) newPath.setAttribute('stroke-width', strokeWidth);
 
+    // Set fill-rule to evenodd to handle overlapping paths correctly
+    // This allows overlapping shapes to create visual cutouts
+    newPath.setAttribute('fill-rule', fillRule || 'evenodd');
+
     // Append the new path to the SVG
     clonedSvg.appendChild(newPath);
 
-    // Return the serialized SVG
-    return new XMLSerializer().serializeToString(clonedSvg);
+    // Return the serialized SVG and warnings
+    return {
+        svg: new XMLSerializer().serializeToString(clonedSvg),
+        warnings: warnings
+    };
 }
 
 /**
@@ -603,14 +633,17 @@ function clearInput() {
 function showToast(message, type = 'success') {
     toast.textContent = message;
 
-    let bgColor = 'bg-green-500 dark:bg-green-600'; // success
+    let bgColor = 'bg-green-700 dark:bg-green-900'; // success
+    let textColor = 'text-white'; // default white text
+
     if (type === 'error') {
-        bgColor = 'bg-red-500 dark:bg-red-600';
+        bgColor = 'bg-red-700 dark:bg-red-900';
     } else if (type === 'warning') {
-        bgColor = 'bg-yellow-500 dark:bg-yellow-600';
+        bgColor = 'bg-yellow-50 dark:bg-yellow-900';
+        textColor = 'text-slate-900 dark:text-slate-200'; // dark text for better contrast
     }
 
-    toast.className = `fixed bottom-8 right-8 px-6 py-4 rounded-lg shadow-custom-lg font-medium transition-all duration-300 ${bgColor} text-white opacity-0 translate-y-4 pointer-events-none`;
+    toast.className = `fixed bottom-8 right-8 px-6 py-4 rounded-lg shadow-custom-lg font-medium transition-all duration-300 ${bgColor} ${textColor} opacity-0 translate-y-4 pointer-events-none`;
 
     // Trigger reflow to restart animation
     void toast.offsetWidth;