provisioning-outreach/presentations/pres-prvng/SVG_IMPORT_FIX.md

SVG Import Path Fix - Final Resolution\n\n## Problem\n\nVite/Slidev was attempting to import SVG files as ES modules, causing build errors:\n\nplaintext\nPlugin: vite:import-analysis\nFile: /Users/Akasha/project-provisioning/pres-prvng/versions/sections/07-conclusion.md__slidev_34.md:21:24\nimport _imports_0 from '/provisioning-logo.svg'\n ^\n\n\n## Root Cause\n\nWhen Slidev processes Markdown and converts it to Vue components, image references like <img src="/provisioning-logo.svg"> get processed as module imports by Vite. This causes Vite to try to load the SVG as an ES module, which fails because it's a static asset in the public/ directory.\n\n## Solution\n\nAdded the ?url query parameter to all SVG image sources. This tells Vite to:\n\n1. Treat the path as a static asset URL, not a module import\n2. Resolve it at build time and inject the URL string directly\n3. Not attempt to parse or transform the SVG file\n\n### Before\n\nhtml\n<img src="/provisioning-logo.svg" class="w-32 mx-auto mt-8" />\n\n\n### After\n\nhtml\n<img src="/provisioning-logo.svg?url" class="w-32 mx-auto mt-8" />\n\n\n## Files Updated\n\n### Presentation Files (5 files, 6 instances)\n\n- ✅ versions/pitch.md (1 instance)\n- ✅ versions/demo-intro.md (1 instance)\n- ✅ versions/talk.md (1 instance)\n- ✅ versions/full.md (1 instance)\n- ✅ versions/workshop.md (2 instances)\n\n### Section Files (2 files, 2 instances)\n\n- ✅ versions/sections/01-intro.md (1 instance)\n- ✅ versions/sections/07-conclusion.md (1 instance)\n\nTotal: 8 instances fixed across 7 files\n\n## Verification\n\nbash\n# All paths now include ?url parameter\n$ grep -r 'provisioning-logo.svg?url' versions/\n✅ 8 matches found\n\n\n## How It Works\n\nThe ?url query parameter is a Vite feature that:\n\n1. Forces the asset to be resolved as a URL string\n2. Bypasses ES module import processing\n3. Works with all static asset types (SVG, PNG, etc.)\n4. Is handled automatically by Vite at build time\n\n## Testing\n\nThe presentations should now build without errors:\n\nbash\nnu run-ultra-simple.nu\n# Select any presentation to verify:\n# 1. ✅ No "import-analysis" errors\n# 2. ✅ Logo images display correctly on slides\n# 3. ✅ All presentations render properly\n\n\n## Best Practices\n\nWhen referencing static assets in Slidev presentations:\n\n- For assets in public/ folder: use /path/to/asset?url\n- For imports: let Vue/Vite handle module paths\n- For CSS backgrounds: url(/path/to/asset?url) in CSS\n- Always test with pnpm run dev before deployment\n\n---\nFix Applied: 2025-11-14\nStatus: ✅ Complete - Ready for Production