🐛 Problem

SVG <path> elements with multiple subpaths (compound paths with holes) were only rendering correctly when fill-rule="evenodd" was explicitly specified. Paths without a fill-rule attribute (which defaults to nonzero per SVG spec) were rendering as solid shapes instead of showing holes.

Example:
Before:

After:

🔍 Root Cause

File: src/scene/graphics/shared/svg/SVGParser.ts:150

// BEFORE (buggy)
const hasExplicitEvenodd = fillRule === 'evenodd';
const shouldProcessHoles = hasExplicitEvenodd && hasMultipleSubpaths;

Only processed holes when fill-rule="evenodd" was explicitly set, ignoring the SVG default behavior.

✅ Solution

Changed hole processing logic to handle multi-subpath SVGs regardless of explicit fill-rule attribute:

// AFTER (fixed)
const shouldProcessHoles = hasMultipleSubpaths && fillRule !== 'nonzero';

Logic:

const shouldProcessHoles = hasMultipleSubpaths && fillRule !== 'nonzero';

Since PixiJS uses containment-based hole detection, NOT true nonzero winding direction or evenodd crossing count. This works correctly for most real-world SVGs but isn't fully spec-compliant.

🧪 Tests

Added visual regression tests with social media icon SVGs:

• ✅ svg-icon-google.scene.ts - Single path validation
• ✅ svg-icon-twitter-x.scene.ts - Single path validation
• ✅ svg-icon-discord.scene.ts - Single path validation
• ✅ svg-icon-instagram.scene.ts - Multi-path with holes (validates fix)
• ✅ svg-icons-comparison.scene.ts - Grid comparison

All existing svg-fill-rule-* tests still pass ✅

📊 Impact

No breaking changes - all existing functionality preserved.

✨ Result

Icon SVGs (Instagram, social media icons, etc.) now render correctly without requiring manual fill-rule attributes.

• Tests and/or benchmarks are included
• Documentation is changed or added
• Lint process passed (npm run lint)
• Tests passed (npm run test)