Fix .svg image optimization with a loader prop

[styfle]

In a previous PR (#34431) we introduced a small workaround for .svg so that it never needs to run through the API and effectively acts like unoptimized=true.

This caused problems when the user had a custom loader prop since it would not run the loader function and thus could 404.

This PR fixes the behavior so that the .svg enhancement is only applied for the default loader.

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
buildDuration	22.5s	22.7s	⚠️ +232ms
buildDurationCached	9.1s	8.5s	-662ms
nodeModulesSize	359 MB	359 MB	⚠️ +220 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.57	4.954	⚠️ +0.38
/ avg req/sec	547.08	504.66	⚠️ -42.42
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.136	2.589	⚠️ +0.45
/error-in-render avg req/sec	1170.51	965.75	⚠️ -204.76

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.04 kB	5.05 kB	⚠️ +3 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	⚠️ +3 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
_buildManifest.js gzip	458 B	460 B	⚠️ +2 B
Overall change	458 B	460 B	⚠️ +2 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
index.html gzip	532 B	532 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-625405fe4694705b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-39f3ab40e378fe36.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -574,9 +574,6 @@
         if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
-        if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
-          unoptimized = true;
-        }
         if (false) {
           var url, urlStr, VALID_BLUR_EXT;
         }
@@ -906,6 +903,11 @@
         if (false) {
           var parsedSrc, missingValues;
         }
+        if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
+          // Special case to make svg serve as-is to avoid proxying
+          // through the built-in Image Optimization API.
+          return src;
+        }
         return ""
           .concat(config.path, "?url=")
           .concat(encodeURIComponent(src), "&w=")

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
buildDuration	27.3s	28s	⚠️ +667ms
buildDurationCached	8.6s	8.5s	-164ms
nodeModulesSize	359 MB	359 MB	⚠️ +220 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.616	4.806	⚠️ +0.19
/ avg req/sec	541.55	520.17	⚠️ -21.38
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.371	2.197	-0.17
/error-in-render avg req/sec	1054.51	1137.95	+83.44

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	28 kB	28 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.7 kB	71.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.08 kB	5.08 kB	⚠️ +2 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	⚠️ +2 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-image-customer-loader-svg	Change
index.html gzip	534 B	534 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-625405fe4694705b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-39f3ab40e378fe36.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-b932c7479a7c37ca.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -574,9 +574,6 @@
         if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
-        if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
-          unoptimized = true;
-        }
         if (false) {
           var url, urlStr, VALID_BLUR_EXT;
         }
@@ -906,6 +903,11 @@
         if (false) {
           var parsedSrc, missingValues;
         }
+        if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
+          // Special case to make svg serve as-is to avoid proxying
+          // through the built-in Image Optimization API.
+          return src;
+        }
         return ""
           .concat(config.path, "?url=")
           .concat(encodeURIComponent(src), "&w=")

Commit: a6de99d