Local OpenLayers3 - SVG icon

I am not sure whether this is a file location problem or if it is a problem of the svg you use. As long as it is within the root folder of your app I can not see why is not working. Dont you have any firebug errors? try to use the following snip to check if it is working. I have tried it works fine.

var style = new ol.style.Style({
    image: new ol.style.Icon({
        src: 'http://www.williambuck.com/portals/0/Skins/WilliamBuck2014/images/location-icon.svg'
    })
});

Also consider removing the size you provide within your code snip. So call it like that

var style = new ol.style.Style({
image: new ol.style.Icon({
    src: "styles/transport_aerodrome.svg"
})
});

UPDATE if you can get the xml out of your svg file. try the following:

var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+    
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';

var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + encodeURIComponent(svg);

//and then declare your style with img and imgSize
var style = new ol.style.Style({
image: new ol.style.Icon({
    img: mysvg,
    imgSize:[30,30]
})
});

It works if you just put in the svg in the src element ol.style.Icon, but if you scale it, the svg will become unsharp. In my case I use the same svg for multiple Zoom Levels and wanted a different size each zoom Level.

The way i got the scaling problem work is:

function getVectorImage(src, size) {
    var canvas = document.createElement('canvas');
    canvas.setAttribute("width", size);
    canvas.setAttribute("height", size);
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0, size, size);
    }
    img.src = src;
    return canvas;
}

//example: size = 25  and  imgSrc = "test.svg"
function getWfsStyle(size, imgSrc) {
    var img = getVectorImage(imgSrc, size);
    var style = new ol.style.Style({
        image : new ol.style.Icon({
            img : img,
            imgSize : [size, size]
        }),
        zIndex : 4
    });
    return style;
}

Tags:

Svg

Openlayers