0

I have successfully filled my SVG path with an image using this little trick:

Fill SVG path element with a background-image

However, when I load the svg file in my html page using background: url(), it doesn't show up.

Here is my svg image opened in browser: enter image description here

And here is the same svg image on my html page: enter image description here

Does anyone know what might be going on here? Thanks.

Community
  • 1
  • 1
user1743703
  • 133
  • 2
  • 10
  • Try encoding it and use the code as the background value – cameronjonesweb Aug 16 '15 at 23:08
  • What browser are you using? Also it is not clear what the SVG is actually supposed to look like. Is it supposed to look like the second image you posed or the first? It also would seem that its a solid color so why you would not just fill with that color is confusing. Also can you post the XML of the SVG? – prodigitalson Aug 16 '15 at 23:19
  • cameronjonesweb, could you elaborate on that please? – user1743703 Aug 16 '15 at 23:25
  • prodigitalson, the image I am filling the path with doesn't show up in the browser (second picture), but shows up in the svg file itself (first picture) – user1743703 Aug 16 '15 at 23:28
  • cameronjonesweb, I have tries this http://b64.io/ but my file is too big – user1743703 Aug 16 '15 at 23:31

1 Answers1

1

SVG files loaded into <img> or as a background-image have to be completely self-contained. They cannot refer to external files (as in the image you are loading into your pattern).

What you can do to work around it is to embed your pattern image as a Data URI".

<image xlink:href="data:image/jpeg;base64,..." .../>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181