Skip to main content

svg ()

Creates a data URL for the provided SVG, escaping the required characters.

Parameters

$data
The data containing the SVG which is to be delivered by the URL.
Type
ArgList

Return Value

String
A new string representing a data URL delivering an SVG.

Example

@use '@sass-fairy/url';

$svg: '<svg viewBox="0 0 100 100">'
'<circle fill="#f00" cx="50" cy="50" r="50" />'
'</svg>';

@debug url.svg($svg...);
// url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%23f00" cx="50" cy="50" r="50" /></svg>')
note

The xmlns attribute will be automatically added to the <svg /> element when missing.