Leaflet custom icon from svg data

var svg = "<svg height=\"512pt\" viewBox=\"0 0 512 512\" width=\"512pt\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0\" fill=\"#f44336\"/><path d=\"m341.332031 256c0 47.128906-38.203125 85.332031-85.332031 85.332031s-85.332031-38.203125-85.332031-85.332031 38.203125-85.332031 85.332031-85.332031 85.332031 38.203125 85.332031 85.332031zm0 0\" fill=\"#fafafa\"/><path d=\"m256 512c-141.164062 0-256-114.835938-256-256s114.835938-256 256-256 256 114.835938 256 256-114.835938 256-256 256zm0-480c-123.519531 0-224 100.480469-224 224s100.480469 224 224 224 224-100.480469 224-224-100.480469-224-224-224zm0 0\"/><path d=\"m256 362.667969c-58.816406 0-106.667969-47.851563-106.667969-106.667969s47.851563-106.667969 106.667969-106.667969 106.667969 47.851563 106.667969 106.667969-47.851563 106.667969-106.667969 106.667969zm0-181.335938c-41.171875 0-74.667969 33.496094-74.667969 74.667969s33.496094 74.667969 74.667969 74.667969 74.667969-33.496094 74.667969-74.667969-33.496094-74.667969-74.667969-74.667969zm0 0\"/></svg>";

var svgUrl = "data:image/svg+xml," + encodeURIComponent(svg);
var markerIcon = L.icon({
    iconUrl: svgUrl,
    iconSize:     [22, 22],
    iconAnchor:   [11, 11],
    popupAnchor:  [0, -11],
    shadowSize:   false,
    shadowAnchor: false,
});

new L.marker(new L.LatLng(52, 21), {icon: markerIcon})
    .bindPopup(`popup`)
    .addTo(map)
;