Use plain text in dataurl when possible

[mixtur]

When applying dataurl to a file that only contains valid utf-8 string it make sense, not to use base64.

For example

//main.js
import svg from "./1.svg";
console.log(svg);

//1.svg
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><path d="M10 10h100v100H10z"/></svg>

//CLI
npx esbuild main.js --bundle --minify --loader:.svg=dataurl

Now this produces these 197 bytes

(()=>{var g="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgMTBoMTAwdjEwMEgxMHoiLz48L3N2Zz4=";console.log(g);})();

But it could be 155:

(()=>{var g='data:image/svg+xml,<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"><path d="M10 10h100v100H10z"/></svg>';console.log(g);})();

[evanw]

This is likely a breaking change since there may be libraries that parse these URLs and only support base64 encoding.

[hyrious]

To be added, better read this: https://css-tricks.com/probably-dont-base64-svg

Possible code to generate a safe dataurl string for svg (from antfu's blog, which is also from that css tricks post):

// https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
function encodeSvg(svg: string) {
  return svg.replace('<svg', (~svg.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"'))
    .replace(/"/g, '\'')
    .replace(/%/g, '%25')
    .replace(/#/g, '%23')
    .replace(/{/g, '%7B')
    .replace(/}/g, '%7D')
    .replace(/</g, '%3C')
    .replace(/>/g, '%3E')
}

const dataUri = `data:image/svg+xml;utf8,${encodeSvg(svg)}`

[mixtur]

This is likely a breaking change since there may be libraries that parse these URLs and only support base64 encoding.

There could be a separate loader for this then. Or a separate loader for current behaviour (still breaking, but with ability to fix easily).

[evanw]

This has now been released! It would be helpful if someone with a real app could try this out and report back if it works or not. With the new behavior, esbuild is very aggressive with not percent-escaping things in order to reduce code size. I have tried to test this in browsers to see what the real requirements for escapes are and it doesn’t seem like many things actually need to be escaped (only \t\n\r# and trailing control/space characters). But it would still be good to get confirmation from someone else that this is working as intended.

[johnnybenson]

The only issue that I have encountered with this change is with areas of my app using CSS-in-JS with SVG background images.

import SomeBg from 'common/assets/images/SomeBg.svg';
import { css } from 'styled-components';

// Parse Error
css`
  background: url(${SomeBg});
`;

// Works 
css`
  background: url('${SomeBg}');
`;

I don't think it's mandatory per CSS spec to include quotes around the text inside the url() function. Needing it here makes sense. A little tricky to find (mostly because CSS-in-JS is funky) and after adding quotes, it resolved my issues.

Thanks for making the change!