[css-values] URL-encoding strings

[valtlai]

Spec: https://www.w3.org/TR/css-values/

When inlining SVG, some characters need to be URL-encoded. For example, the # (%23) in the following:

.lorem {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect fill="%23fd0" width="100%" height="100%"/></svg>');
}

We could avoid that manual escaping if there was a sufficient function in CSS:

.lorem {
  --svg: '<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fd0" width="100%" height="100%"/></svg>';
  background: src(concat('data:image/svg+xml,' url-encode(var(--svg)));
}

Here the function url-encode() (name TBD) takes a string and returns the URL-encoded version of it. The resulting string can be then safely concatenated to the data URL. For concat(), see #542.

So, should we define a new CSS function that URL-encodes a string? Are there any other use cases?