OpenLayers 3 - How to draw SVG inline as a icon in feature point

Question

I want to draw feature on map as a SVG icon, which is defined for each feature explicitly inline. But I don't know how to do it. I cannot use overlay because I need clustering. I tried to set as a source of image in style, but it is not working and on the map I see only basic circles. See code below, in icon parametr is SVG:

historyPositionsSource = new ol.source.Vector({});
historyPositionsClusterSource = new ol.source.Cluster({
    distance: 40,
    source: historyPositionsSource
});
historyPositionsClusters = new ol.layer.Vector({
    source: historyPositionsClusterSource,
});

 map.addToHistoryCluster = function (icon, lon, lat, id, wSize) {
    var DOMURL = window.URL || window.webkitURL || window;
    var pos = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
            size: [24, 24],
            src: DOMURL.createObjectURL(new Blob([icon], {type: 'image/svg+xml;charset=utf-8'}))
        }))
    });
    var feature = new ol.Feature({
        geometry: new ol.geom.Point(pos),
        style: iconStyle,
        device: id,
        type: 'history'
    });        

    historyPositionsSource.addFeature(feature);
};

UPDATE svg:

<svg xmlns="http://www.w3.org/2000/svg" class="iconBase" width="22" height="22"><rect style="fill: rgba(51, 153, 102, 1);" x="1.5" y="1.5" width="19" height="19" /><rect style="fill: rgba(0, 0, 0, 1);" x="5" y="5" width="12" height="12" /></svg>