diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index d922a56bd174c18..fcbefe997a2d775 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -191,8 +191,10 @@ class ImageOptimizerMiddleware implements PostProcessMiddleware {
 }
 
 function isImgEligible(imgElement: HTMLElement): boolean {
+  let imgSrc = imgElement.getAttribute('src')
   return (
-    imgElement.hasAttribute('src') &&
+    !!imgSrc &&
+    sourceIsSupportedType(imgSrc) &&
     imageIsNotTooSmall(imgElement) &&
     imageIsNotHidden(imgElement)
   )
@@ -243,6 +245,11 @@ function imageIsNotHidden(imgElement: HTMLElement): boolean {
   return true
 }
 
+// Currently only filters out svg images--could be made more specific in the future.
+function sourceIsSupportedType(imgSrc: string): boolean {
+  return !imgSrc.includes('.svg')
+}
+
 // Initialization
 registerPostProcessor(
   'Inline-Fonts',
diff --git a/test/integration/image-optimization/pages/index.js b/test/integration/image-optimization/pages/index.js
index 09dec13363566a1..abbbb7dbbad2b48 100644
--- a/test/integration/image-optimization/pages/index.js
+++ b/test/integration/image-optimization/pages/index.js
@@ -6,6 +6,7 @@ const Page = () => {
       <link rel="preload" href="already-preloaded.jpg" />
       <img src="already-preloaded.jpg" />
       <img src="tiny-image.jpg" width="20" height="20" />
+      <img src="vector-image.svg" />
       <img src="hidden-image-1.jpg" hidden />
       <div hidden>
         <img src="hidden-image-2.jpg" />
diff --git a/test/integration/image-optimization/pages/stars.js b/test/integration/image-optimization/pages/stars.js
index febd23b3d7851fd..7fad8f7a897e903 100644
--- a/test/integration/image-optimization/pages/stars.js
+++ b/test/integration/image-optimization/pages/stars.js
@@ -6,6 +6,7 @@ function Home({ stars }) {
           <link rel="preload" href="already-preloaded.jpg" />
           <img src="already-preloaded.jpg" />
           <img src="tiny-image.jpg" width="20" height="20" />
+          <img src="vector-image.svg" />
           <img src="hidden-image-1.jpg" hidden />
           <div hidden>
             <img src="hidden-image-2.jpg" />
diff --git a/test/integration/image-optimization/test/index.test.js b/test/integration/image-optimization/test/index.test.js
index efa9cacb45b8757..7ec7c9b20f875ab 100644
--- a/test/integration/image-optimization/test/index.test.js
+++ b/test/integration/image-optimization/test/index.test.js
@@ -53,6 +53,12 @@ function checkImagesOnPage(path) {
       '<link rel="preload" href="hidden-image-2.jpg" as="image"/>'
     )
   })
+  it('should not preload SVG images', async () => {
+    const html = await renderViaHTTP(appPort, path)
+    expect(html).not.toContain(
+      '<link rel="preload" href="vector-image.svg" as="image"/>'
+    )
+  })
   it('should preload exactly two eligible images', async () => {
     const html = await renderViaHTTP(appPort, path)
     expect(html).toContain(