svgToDataURL() — vite Function Reference

Architecture documentation for the svgToDataURL() function in asset.ts from the vite codebase.

Function typescript PluginSystem AssetManagement called by 1

Entity Profile

PluginSystem→ AssetManagement→ svgToDataURL() — vite Function Reference

Dependency Diagram

graph TD
  34490843_2d64_5c9c_97a9_18c388480f7b["svgToDataURL()"]
  e71b94ef_3010_e358_13d8_f3b3acb0a268["asset.ts"]
  34490843_2d64_5c9c_97a9_18c388480f7b -->|defined in| e71b94ef_3010_e358_13d8_f3b3acb0a268
  116d8e93_bf90_f56d_0ddc_02033886ac39["assetToDataURL()"]
  116d8e93_bf90_f56d_0ddc_02033886ac39 -->|calls| 34490843_2d64_5c9c_97a9_18c388480f7b
  style 34490843_2d64_5c9c_97a9_18c388480f7b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/asset.ts lines 590–617

function svgToDataURL(content: Buffer): string {
  const stringContent = content.toString()
  // If the SVG contains some text or HTML, any transformation is unsafe, and given that double quotes would then
  // need to be escaped, the gain to use a data URI would be ridiculous if not negative
  if (
    stringContent.includes('<text') ||
    stringContent.includes('<foreignObject') ||
    nestedQuotesRE.test(stringContent)
  ) {
    return `data:image/svg+xml;base64,${content.toString('base64')}`
  } else {
    return (
      'data:image/svg+xml,' +
      stringContent
        .trim()
        .replaceAll(/>\s+</g, '><')
        .replaceAll('"', "'")
        .replaceAll('%', '%25')
        .replaceAll('#', '%23')
        .replaceAll('<', '%3c')
        .replaceAll('>', '%3e')
        // Spaces are not valid in srcset it has some use cases
        // it can make the uncompressed URI slightly higher than base64, but will compress way better
        // https://github.com/vitejs/vite/pull/14643#issuecomment-1766288673
        .replaceAll(/\s+/g, '%20')
    )
  }
}