Using svg image with inline uri data
I'm sure it's not possible, but before giving up, I wanted to throw it in there.
Here's a fiddle http://jsfiddle.net/sqszuzep/6/
<svg version="1.1" viewBox="0 0 2 1" width="100%">
<image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/>
</svg>
<div id="bg" class="bg"></div>
<div id="bg2" class="bg"></div>
<h2>IE10/11</h2>
<div id="bg3" class="bg"></div>
<div id="bg4" class="bg"></div>
JS:
// Chrome/Firefox/Safari
var x = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');
var y = encodeURIComponent('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');
$(function () {
$('#bg').css('background-image', 'url("data:image/svg+xml;utf8,'+ x +'")');
$('#bg2').css('background-image', 'url("data:image/svg+xml;utf8,'+ y +'")');
});
// IE 10/11
// Chrome/Firefox/Safari
var x = btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle fill="#000000" stroke="#000000" stroke-width="20" cx="105" cy="105" r="90"></circle> <circle fill="none" stroke="#0000FF" stroke-width="10" cx="300" cy="105" r="90"></circle></svg>');
var y = btoa('<svg version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="http://fillmurray.com/600/300" x="0" y="0" height="100%" width="100%"/></svg>');
$(function () {
$('#bg3').css('background-image', 'url("data:image/svg+xml;base64,'+ x +'")');
$('#bg4').css('background-image', 'url("data:image/svg+xml;base64,'+ y +'")');
});
Basically I was trying to use an svg image, encoded the svg element and used it in css for the element. This works for vectors, but not for images loaded via svg.
I believe this refers to https://bugs.webkit.org/show_bug.cgi?id=63548 which says "images are not allowed to download additional resources."
I see that no browser supports this feature, or I am doing something wrong.
It is possible to base64 encode the image data and use that as shown in this fiddle, I wrote: http://jsfiddle.net/N2n27/3/ . In browsers that support svg filters (not IE), this is a handy way to do blur and other filter effects.
Did I miss something?
source to share
There are two problems with version y.
a) the svg element has no namespaces (it matters in the x version), but in the y version it also needs the xlink namespace because the href attribute of the image is in the xlink namespace.
b) the image in SVG is external.
The css background is an image, so any SVG that it links to cannot load external resources. So you need to URI encode the inner image data and then uri encode the outer SVG (thus double encoding the inner image data)
So, you need something like this ...
var y = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 2 1" width="100%"><image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAA....
source to share