fix(build): use base64 for inline SVG if it contains both single and double quotes (#15271)

packages/vite/src/node/plugins/asset.ts

@@ -415,6 +415,8 @@ export async function urlToBuiltUrl(
   )
 }
 
+const nestedQuotesRE = /"[^"']*'[^"]*"|'[^'"]*"[^']*'/
+
 // Inspired by https://github.com/iconify/iconify/blob/main/packages/utils/src/svg/url.ts
 function svgToDataURL(content: Buffer): string {
   const stringContent = content.toString()
@@ -422,7 +424,8 @@ function svgToDataURL(content: Buffer): string {
   // need to be escaped, the gain to use a data URI would be ridiculous if not negative
   if (
     stringContent.includes('<text') ||
-    stringContent.includes('<foreignObject')
+    stringContent.includes('<foreignObject') ||
+    nestedQuotesRE.test(stringContent)
   ) {
     return `data:image/svg+xml;base64,${content.toString('base64')}`
   } else {

playground/data-uri/__tests__/data-uri.spec.ts

@@ -9,6 +9,18 @@ test('base64', async () => {
   expect(await page.textContent('.base64')).toBe('hi')
 })
 
+test('svg data uri minify', async () => {
+  const sqdqs = await page.getByTestId('sqdqs').boundingBox()
+  const sqsdqs = await page.getByTestId('sqsdqs').boundingBox()
+  const dqsqs = await page.getByTestId('dqsqs').boundingBox()
+  const dqssqs = await page.getByTestId('dqssqs').boundingBox()
+
+  expect(sqdqs.height).toBe(100)
+  expect(sqsdqs.height).toBe(100)
+  expect(dqsqs.height).toBe(100)
+  expect(dqssqs.height).toBe(100)
+})
+
 test.runIf(isBuild)('should compile away the import for build', async () => {
   const file = findAssetFile('index')
   expect(file).not.toMatch('import')

playground/data-uri/double-quote-in-single-quotes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test='and then I said "does this work?' fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>

playground/data-uri/double-quotes-in-single-quotes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test='and then I said "does this work?"' fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>

playground/data-uri/index.html

@@ -12,3 +12,10 @@
     document.querySelector(el).textContent = text
   }
 </script>
+
+<script type="module" src="./main.js"></script>
+
+<div id="sqdqs"></div>
+<div id="sqsdqs"></div>
+<div id="dqsqs"></div>
+<div id="dqssqs"></div>

playground/data-uri/main.js

@@ -0,0 +1,18 @@
+import sqdqs from './single-quote-in-double-quotes.svg'
+import sqsdqs from './single-quotes-in-double-quotes.svg'
+import dqsqs from './double-quote-in-single-quotes.svg'
+import dqssqs from './double-quotes-in-single-quotes.svg'
+
+document.querySelector('#sqdqs').innerHTML = `
+  <img data-testid="sqdqs" src="${sqdqs}" class="sqdqs" alt="load failed" />
+`
+document.querySelector('#sqsdqs').innerHTML = `
+  <img data-testid="sqsdqs" src="${sqsdqs}" class="sqsdqs" alt="load failed" />
+`
+
+document.querySelector('#dqsqs').innerHTML = `
+  <img data-testid="dqsqs" src="${dqsqs}" class="dqsqs" alt="load failed" />
+`
+document.querySelector('#dqssqs').innerHTML = `
+  <img data-testid="dqssqs" src="${dqssqs}" class="dqssqs" alt="load failed" />
+`

playground/data-uri/single-quote-in-double-quotes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test="vite's the world's best" fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>

playground/data-uri/single-quotes-in-double-quotes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="100" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path data-test="(\''/)"  fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path></svg>