Search code examples
htmlimagesvgbase64data-uri

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 <img> 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.

https://jsfiddle.net/qmap5sg9/

Can anyone advise why the image isn't loading?


Solution

  • 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="http://ecn.t0.tiles.virtualearth.net/tiles/r311213001300102.jpeg?g=5171&amp;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.