how to put svg image on one side 3d cube using css3?

Question

I've created a cube and the last step is to put a picture on the "back" side. I can link a regular image and its working using following code:

.cube .back {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url(pika.svg);    
}

But, when I try to link my svg file as an img the whole image is not showing. I have three separate layers in my svg but only two show. What am I doing wrong?

here's the svg code: http://pastebin.com/H6tnHk0p

Answer 1

SVGs that are included as an image (eg. via <img> or background-image) cannot reference other external objects. That includes images, CSS etc. Your SVG references an external PNG file.

What you can do is include the PNG by embedding it as a base64 data URL.

This restriction is a deliberate browser security measure.