v156 · canvas tainting
What the blob URL saves
The data-URI workaround was not free: percent-encoding inflates the markup by roughly 60%, and that inflated string is held in memory alongside the source. Whether it is also slower is an empirical question, so this measures rather than asserts — and on modest content the answer may surprise you.
Measure both paths
Each run builds the same SVG, then times two things separately: turning it into a URL, and loading it into an Image. Timings are noisy and machine-dependent — raise the run count to steady them, and treat a difference under a millisecond as no difference. The size column is the one that does not move.
| path | URL size | vs source | make URL | load image | total |
|---|---|---|---|---|---|
| Not run yet. | |||||
Bytes handed to the image loader
code path
// data: — the markup is percent-encoded into the URL itself, on the
// main thread, before anything can start loading.
const dataUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
// blob: — the bytes stay where they are and the URL is a handle.
const blobUrl = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
// ...and must be released, or the blob is retained for the page's life.
URL.revokeObjectURL(blobUrl);