Steve Steve - 1 year ago 38
HTML Question

SVG Data URI doesn't render in img tag

I have a Data URI Base64 encoded string I am obtaining from the Kendo.drawing.exportSVG method from a Kendo Map.

If I put the Base64 string into an SVG decoder, then save the resulting SVG to a file and open it in a browser the image displays fine, but if I put it into an

tag, nothing is displayed.

The Base64 string is quite large, so I've put it in a JsFiddle to demonstrate rather than pasting it here.

Can anyone advise why the image isn't loading?

Answer Source

Your data URL consists of a lot of references to external images such as

<image preserveAspectRatio="none" x="310.15625" y="281" width="256px" height="256px" xlink:href=";mkt=en-US&amp;shading=hill" clip-path="url(#kdef7)" />

When used as an image, in your case via an image tag the SVG must consist of a single file so you'll have to encode each of those images as data URLs and then once you've done that re-encode the whole SVG file as a data URL.