SVG data URI

Convert SVG bytes into a percent-encoded data URI that is safe inside either single- or double-quoted CSS. A second component wraps any lowercase data: URI as a CSS url("…") value.

printf %s '<svg fill="none"/>' \
  | qip run components/image/svg+xml/svg-to-data-uri.wasm
# data:image/svg+xml,%3Csvg%20fill=%22none%22/%3E

printf %s '<svg fill="none"/>' \
  | qip run components/image/svg+xml/svg-to-data-uri.wasm \
    components/text/uri-list/data-uri-to-css-url.wasm
# url("data:image/svg+xml,%3Csvg%20fill=%22none%22/%3E")

svg-to-data-uri.wasm preserves the input bytes rather than parsing, minifying, or sanitizing the SVG. It percent-encodes quotes, whitespace, #, %, backslashes, non-ASCII UTF-8 bytes, and other URI-sensitive bytes. The CSS wrapper additionally escapes raw quotes, backslashes, and control bytes before adding url(" and ").

Both components use one 64 KiB memory page. They expand the input backward in the same buffer, allowing up to 20 KiB of input and 60 KiB of output without a second allocation.

Use an external SVG file instead when the image is large, shared across many pages, or should be cached independently. These components encode SVG; they do not make untrusted markup safe.