Skip to main content

encode ()

Percent-encodes a URL component, replacing each instance of certain characters by escape sequences representing the UTF-8 encoding of the characters.


The URL component to be encoded.

Return Value

A new string representing the provided string encoded for use by the url() function.


The following example shows an SVG with some characters that been encoded and several that remain untouched.

@use '@sass-fairy/list';
@use '@sass-fairy/url';

$svg: list.join(
'<svg xmlns="" viewBox="0 0 300 100">'
'<rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="2%" fill="#fff" />'
'<foreignObject width="100%" height="100%">'
'<div xmlns="">'
':root { font: 1.15em sans-serif; }'
'div {'
'height: 100px;'
'display: grid;'
'grid-template-columns: min-content auto;'
'grid-auto-rows: auto;'
'align-content: space-evenly;'
'gap: 0 0.5em;'
'padding: 0 0.75em'
'p { margin: 0; }'
'<p>% #</p>'
'<p>! $ &amp; ( ) \' " * + , / : ; = ? @ [ ] ◐</p>'

#encode-example-v2::before {
content: url('data:image/svg+xml,' + url.encode($svg));
// The following produces the same output
// content: url.svg($svg);
display: block;
max-width: 500px;

Currently, encoding is only preformed on % and #. If you find a breaking case, please open an issue to add new characters.