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.