Knockout SVG Image Binding not Working. Solution Found!

This post is about an issue I faced in Knockout to bind svg <image> and it was not showing the image inside the svg, even with correct binding with xlink:href

My first attempt was,


If you notice that, Image is not showing in the svg box.
Reason: Because xlink:href attribute needs to be there even with empty value to initialize the HTML svg image.

So, your image tag should be like this

<image height="500" id="img1" width="500" xlink:href=""
        data-bind="attr:{'xlink:href': image}"></image>

Solution, with empty xlink:href attribute

Hope this may help to somebody with the same problem!