Question

I’m using svg’s as background-images for a responsive layout that recreates a complex brochure in online format.

Everything works perfectly for vector objects however if I embed images on the svg they don’t appear on the background.

The strangest thing is if I check the svg on its own, the images are there, so this is kind of annoying!

Does anyone know if it has something to do with the svg configuration or something like that?

How can I solve this and still be able to use the svg as a background-image (background-size:cover rules!)?

Oh I should add that I’ve seen this “phenom” happen on chrome in my mac, if it’s browser specific please say so!

The svg in question is this: http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg

Unfortunately I’m not much of a jsfiddler so I couldn’t create something to show you all.

Thanks in advance!

Answer 1

The images will appear if you load the svg at the document level. You can remove this element later and the images won’t disappear. You can set it to load into a 1px x 1px element…

function loadSVG(svgpath){
     if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
       var obj = document.createElement("object");
       obj.setAttribute("type", "image/svg+xml");
       obj.setAttribute("data", svgpath);
       obj.setAttribute("width", "1");
       obj.setAttribute("height", "1");
       obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
       document.getElementsByTagName("html")[0].appendChild(obj);
     }
}

window.onload = function(){
  loadSVG("../img/mySVG.svg");
}

The author of this technique is Dirk Weber, here are more details: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/