0

Sorry if it seems confusing. I have an IMG element with src that holds an SVG data URL. That SVG itself contains an image with href of an image file hosted on some URL. Something like the following (I broke it into lines for clarity, but originally the src attribute contains a single string with no line breaks) :

<img src="data:image/svg+xml,%3Csvg 
 xmlns='http://www.w3.org/2000/svg' 
 xmlns:xlink='http://www.w3.org/1999/xlink'
 version='1.1'%3E%3Cdefs/%3E%3Cg 
 %3Cimage xlink:href='http://someserver/image.png'%3C/svg%3E"/>

and the embedded image is not displayed (browser shows it as broken URL). If I use the original unescaped SVG as an element in the HTML, it works fine.

Unfortunately I may not be able to use SVG tags, so I am forced to use IMG with data URL. I though about transforming the embedded images to data URLs too, but that would drastically increase the overall size.

Is there any way to make this thing work? Help would be appreciated.

Gabriel
  • 862
  • 6
  • 18

0 Answers0