javascript - SVG Image xlink:href is not working with knockout -

i trying render svg image knockout, not showing image after bound viewmodel.

here svg

<svg width="500" height="500" style="border: solid 1px black">  <image id="img1" width="500" height="500"         data-bind="attr:{'xlink:href': image}"></image> </svg> 

here knockout bindings,

<script>     var viewmodel = function(data){         var self = this;         self.image = ko.observable(data.image)     };      var data = {image: "http://2.bp.blogspot.com/-cgevte2xewu/vueiqidijki/aaaaaaaacwu/uyzcrcnmmak/s1600/comic.png"};      var vm = new viewmodel(data);     ko.applybindings(vm); </script> 

anyway checked page source after executing code. svg image element in page source is

<image id="img1" width="500" height="500" data-bind="attr:{'xlink:href': image}" xlink:href="http://2.bp.blogspot.com/-cgevte2xewu/vueiqidijki/aaaaaaaacwu/uyzcrcnmmak/s1600/comic.png"></image> 

as can see here, setting xlink:href correctly, not showing on svg.

do need refresh dom somehow? how can render svg image using knockout?

any appreciated

svg elements not added dom when use img element display image, therefore knockout.js unable bind elements. answers question contain solutions might you: how access contents of svg file in <img> element?

note: solution stackoverflow.