fix: bypass IPX processing for SVG sources in NuxtImg

[daresTheDevil]

Summary

<NuxtImg> routes all images through IPX unconditionally, including SVGs. This causes HTTP 500 errors because IPX's svgo/css-tree dependency chain has a broken dynamic require() that Nitro's bundler can't resolve at build time.

<NuxtPicture> already handles this correctly. It detects SVG sources and returns the raw src without IPX processing. This PR brings NuxtImg in line with that behavior.

SVGs are vector images. They don't benefit from raster resize, srcset density variants, or placeholder blur. Sending them through IPX is both unnecessary and broken.

What changed

• Added isSvg computed that detects .svg extension (case-insensitive, handles query strings and hashes)
• Short-circuits sizes, placeholder, and mainSrc for SVG sources
• Explicit format conversion (e.g. <NuxtImg src="/logo.svg" format="png" />) still flows through to IPX

Fixes #2035
Fixes #1967
Fixes #2075
Closes #1891

Test plan

• 8 new unit tests covering passthrough, query strings, hashes, case-insensitive extension, sizes/dimensions ignored, format conversion allowed, non-SVG unaffected
• E2E snapshots updated: tacos.svg now served directly instead of through /_ipx/
• All 234 existing tests pass
• Lint clean
• Bundle size decreased (12.6k → 12.4k)

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@2181

commit: c6c5949

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request implements SVG passthrough logic in the NuxtImg component to bypass IPX raster-based image processing for SVG files. A new isSvg computed property detects when the source URL is an SVG file and disables downstream IPX transformations—including resizing, placeholder generation, and format conversion—unless explicitly overridden by a format prop. SVG sources are now rendered directly without modification. The changes include updated test snapshots reflecting removed IPX-processed SVG variants, new test cases validating SVG passthrough behavior, and a minor bundle size adjustment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: bypass IPX processing for SVG sources in NuxtImg' accurately summarizes the main change: preventing SVG files from being processed through IPX in the NuxtImg component.
Linked Issues check	✅ Passed	All coding requirements from linked issues are met: #2035/#1967/#2075 - SVG sources bypass IPX (preventing 500 errors and parsing failures), #1891 - SVGs are served as-is without transformation. Explicit format conversion still flows through IPX as expected.
Out of Scope Changes check	✅ Passed	All changes are in-scope: NuxtImg.vue implements SVG detection/passthrough, tests verify the feature, and snapshots/bundle size reflect the expected outcome. No unrelated modifications present.
Description check	✅ Passed	The pull request description clearly explains the problem (SVGs causing HTTP 500 errors through IPX), the solution (bypass IPX for SVGs like NuxtPicture does), implementation details (isSvg computed, short-circuits), and concrete test results (8 new tests, 234 existing tests pass, bundle size improvement).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

test/nuxt/image.test.ts (1)

633-645: Consider adding a test for placeholder behavior with SVGs.

The implementation disables placeholders for SVGs (returns false from the placeholder computed), but there's no explicit test verifying this behavior. Adding a test would strengthen coverage:

it('disables placeholder for SVGs', () => {
  const wrapper = mountImage({ src: '/logo.svg', placeholder: true })
  const img = wrapper.find('img')
  // Should render the SVG directly, not a blurred placeholder
  expect(img.element.getAttribute('src')).toBe('/logo.svg')
})

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/nuxt/image.test.ts` around lines 633 - 645, Add a unit test named
"disables placeholder for SVGs" that uses the existing mountImage helper to
mount an image with src '/logo.svg' and placeholder: true, then find the img
element and assert that img.element.getAttribute('src') === '/logo.svg' and that
no placeholder behavior is present (e.g., img.element.getAttribute('srcset') is
falsy); this verifies the placeholder computed is disabled for SVGs.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@test/nuxt/image.test.ts`:
- Around line 633-645: Add a unit test named "disables placeholder for SVGs"
that uses the existing mountImage helper to mount an image with src '/logo.svg'
and placeholder: true, then find the img element and assert that
img.element.getAttribute('src') === '/logo.svg' and that no placeholder behavior
is present (e.g., img.element.getAttribute('srcset') is falsy); this verifies
the placeholder computed is disabled for SVGs.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2d2ccba1-3b8d-4c9e-8843-435fe9be90b5

📥 Commits

Reviewing files that changed from the base of the PR and between 5be826f and c6c5949.

📒 Files selected for processing (5)

• src/runtime/components/NuxtImg.vue
• test/e2e/__snapshots__/ipx.json5
• test/e2e/generate.test.ts
• test/nuxt/image.test.ts
• test/unit/bundle.test.ts

💤 Files with no reviewable changes (1)

• test/e2e/generate.test.ts