Zmiana SVG inline na zewnętrzny PNG w pinezce na mapie

Mam pewien problem, a mianowicie mam skrypt, w którym chcę ten kawałek kodu:

for(var i = 0; i <= pinz.length; i++){
   var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%3E%3Cpath%20fill%3D%22%23808080%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%22.5%22%20d%3D%22M34.305%2016.234c0%208.83-15.148%2019.158-15.148%2019.158S3.507%2025.065%203.507%2016.1c0-8.505%206.894-14.304%2015.4-14.304%208.504%200%2015.398%205.933%2015.398%2014.438z%22%2F%3E%3Ctext%20transform%3D%22translate%2819%2018.5%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3E' + pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E'; 

zamienić na zwykły obiekt:
var image = 'http://library.mcmaster.ca/maps/airphotos/GreenMapPin.png';

Ale wstawienie zwykłego linku do pliczku z grafiką powoduje, że skrypt nie działa, nie rozumiem czemu może ktoś z Was wie.

Ten powyższy kod jest zakodowany, ale po zdekodowaniu nic mi to nie mówi i wyrzucenie zakodowanego, a dodanie wstawki do grafiki sprawia, że nic to nie daje.

'data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"><path fill="#808080" stroke="#ccc" stroke-width=".5" d="M34.305 16.234c0 8.83-15.148 19.158-15.148 19.158S3.507 25.065 3.507 16.1c0-8.505 6.894-14.304 15.4-14.304 8.504 0 15.398 5.933 15.398 14.438z"/><text transform="translate(19 18.5)" fill="#fff" style="font-family: Arial, sans-serif;font-weight:bold;text-align:center;" font-size="12" text-anchor="middle">'

Może skrypt oczekuje SVG i nie przyjmie PNG?

Ciężko powiedzieć po takim fragmencie kodu.

Aha, zapoznaj się: Jak dobrze zatytułować wątek? - bo następne takie "tytuły" będą lądować w koszu.

Nie wydaje się w skrypcie nie ma nic szczególnego i odwołania do svg, wersja ze zwykłym plikiem działa w innym przykładzie, ale jak chcę oprzeć testy na tym co tutaj wstawiam to nie działa i nie wiem czemu.

Oto skrypt:
http://codepen.io/moistpaint/pen/ywFDe/

http://codepen.io/anon/pen/oLrdLx

Po podmianie TYLKO adresu linku, działa. Wiadomo, że nie obsłuży ilości punktów, bo to .png. Musiałbyś to jakoś inaczej rozwiązać :)

Wiadomo, że nie obsłuży ilości punktów, bo to .png.
Mógłbyś to wyjaśnić bo nie rozumiem.

A druga sprawa działa faktycznie, ale musi wyświetlać jeszcze etykiety w tym przypadku liczby, jakie zostały wpisane w skrypcie:
'lable' : 999 itd.

Ważna jest ta część bo kiedy to usunąłeś już nie wyświetla tych etykiet, ale nie mogę rozkminić o co chodzi z tymi zadekodowanymi częściami.
+ pinz[i].lable + '%3C%2Ftext%3E%3C%2Fsvg%3E';

Na pewnym forum widziałem, że ktoś odnośnie teko zakodowanego kawałka pisał tak:

You just need to uri-encode your SVG html and replace the one in the image variable after "data:image/svg+xml" in the for loop.

For uri encoding you can use uri-encoder-decoder

You can decode the existing svg code first to get a better understanding of what is written.

No ale nie wiem co i jak dokować, żeby wstawić swój plik z obrazem i aby to działało.