Why Is My Image Not Rendering With This Data Url?

Can anybody help me to understand why is this icon not rendering? I have tried extracting the svg out of the data url and decoded it to find it working fine. Why is it not renderin

Solution 1:

Looks like an encoding issue, check this. I used this url to encode the svg

<imgsrc="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cpath d='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z' fill='%231B60D8'%3E%3C/path%3E%3C/svg%3E"alt="icon"><br />
Actual svg
  
  <svgwidth='26'height='26'fill='none'><pathd='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z'fill='#1B60D8'></path></svg>

See the diff between working and non-working version. Looks like you encode the spaces also.

Solution 2:

In modern browsers the only character to escape is the # with %23

But you must set the xmlns namespace

You should also run the SVG through SVGO : https://jakearchibald.github.io/svgomg/ with 0.nnnnnn precision you are stuffing 1.000.000 'pixel-precision' into 1 pixel.

<imgsrc="data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' fill='none'>
<path d='M15.9586 0.55555C18.7362 0.55555 20.0818 0.815388 21.4801 1.56324C22.7512 2.24301 23.757 3.2488 24.4367 4.51985C25.1846 5.91821 25.4444 7.26377 25.4444 10.0414V15.9586C25.4444 18.7362 25.1846 20.0818 24.4367 21.4801C23.757 22.7512 22.7512 23.757 21.4801 24.4367C20.0818 25.1846 18.7362 25.4444 15.9586 25.4444H10.0414C7.26376 25.4444 5.9182 25.1846 4.51984 24.4367C3.24879 23.757 2.243 22.7512 1.56323 21.4801C0.815381 20.0818 0.555542 18.7362 0.555542 15.9586V10.0414C0.555542 7.26377 0.815381 5.91821 1.56323 4.51985C2.243 3.2488 3.24879 2.24301 4.51984 1.56324C5.9182 0.815388 7.26376 0.55555 10.0414 0.55555H15.9586ZM18.5947 7.84114L10.7876 15.8922L7.40523 12.4041C6.84704 11.8285 5.92789 11.8143 5.35225 12.3725C4.77661 12.9307 4.76247 13.8499 5.32067 14.4255L9.74536 18.9885C10.3157 19.5767 11.2595 19.5767 11.8299 18.9885L20.6793 9.86255C21.2375 9.28691 21.2234 8.36775 20.6477 7.80956C20.0721 7.25137 19.1529 7.26551 18.5947 7.84114Z' fill='%231B60D8'></path></svg>"alt="icon">