Generate Img Src Data Uri for Svg with '<Use>' Elements

Generate IMG src data URI for SVG with `use` elements

In modern browsers you don't have to escape < and > in SVG data URI any longer.

Neither is the outdated xlink notation required.

But # must be escaped with %23

And for string handling it is easier to use single quotes

That makes the correct string:

data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' 
     viewBox='0 0 96 96'>
<rect id='USED' width='50%' height='50%' stroke='red'/>
<use href='%23USED' x='24' y='24'/>
</svg>

<style>
 rect{
  fill:blue !important; /* would work for INline SVG, not for data URI SVG */
 }
 img {
   width:200px;
   filter: drop-shadow(5px 5px 5px gold);
 }
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><rect id='USED' width='50%' height='50%' stroke='red'/><use href='%23USED' x='24' y='24'/></svg>">

SVG Data URI doesn't render in img tag

Your data URL consists of a lot of references to external images such as

<image preserveAspectRatio="none" x="310.15625" y="281" width="256px" height="256px" xlink:href="http://ecn.t0.tiles.virtualearth.net/tiles/r311213001300102.jpeg?g=5171&mkt=en-US&shading=hill" clip-path="url(#kdef7)" />

When used as an image, in your case via an image tag the SVG must consist of a single file so you'll have to encode each of those images as data URLs and then once you've done that re-encode the whole SVG file as a data URL.

Do I use img, object, or embed for SVG files?

I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

If you use <object> then you get raster fallback for free*:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.

2014 update:

If you want a non-interactive svg, use <img> with script fallbacks
to png version (for older IE and android < 3). One clean and simple
way to do that:
<img src="your.svg" onerror="this.src='your.png'">.
This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
If you want an interactive svg, use either <iframe> or <object>.
If you need to provide older browsers the ability to use an svg plugin, then use <embed>.
For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:
```
div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}
```
Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

An additional good read is this blogpost on svg fallbacks.

Problems with getting canvas dataURI from svg with foreignObject

This has nothing to do with CORS. You are not doing any request to an external resource.

The issue is that drawing an svg (moreover when it contains html elements) is a really sensitive action for browsers.

That's why there are a lot of limitations on this technique (you can't load external resources, scripts are ignored, you can't style the content from external CSS, all default browser and OS styles are disabled to avoid fingerprinting etc.).

I don't work for safari nor chrome, so I can't tell for sure, but I think they aren't able to provide enough security on one of these points (safari realised it in v9, and it's a known issue in chrome too).

So what they do, is that they taint the canvas, locking any of its export methods. (Note that IE < Edge did also taint the canvas whenever any svg had been drawn to the canvas for similar security reasons).

If what you want is to rasterize DOM elements, then you should parse the DOM and all its applied styles, and reproduce it with canvas drawings methods.

Doing so, you can bypass most security issues, and no UA will taint the canvas. Some library out there do exactly this, the most famous being html2canvas.

If what you want is to draw this image, then you can rewrite it without using a foreignObject (svg text has more options than canvas one), then use a library like canvg to render it on your canvas _{(because otherwise IE will taint the canvas as said previously)}.

Note : chrome's issue can be workedaround, but I'm not sure it's a good idea, it will still not work in Safari, nor in IE < Edge, and chrome may just have forgotten to block it too and will in next releases, anyway, here is how :

var canvas = document.getElementById('c');var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +  '<foreignObject width="100%" height="100%">' +  '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +  '<em>I</em> like ' +  '<span style="color:white; text-shadow:0 0 2px blue;">' +  'beer</span>' +  '</div>' +  '</foreignObject>' +  '</svg>';

var img = new Image();// instead of a blobURL, if we use a dataURL, chrome seems happy...var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);
img.onload = function() {  c.width = this.width;  c.height = this.height;  ctx.drawImage(img, 0, 0);  var dataURL = canvas.toDataURL();  console.log(dataURL);};
img.src = url;

<canvas id="c"></canvas>

Use CSS variable in url('data:image/svg+xml')

Do it differently using mask:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-mask: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
  background:var(--c,red);
  border-radius: 16px;
}

<div class="box"></div>
<div class="box" style="--c:green"></div>
<div class="box" style="--c:blue"></div>

Using an Data URI SVG as a CSS background image

See how the working fiddle has double quotes just inside the url() and then all the SVG content uses single quotes? You need to do the same. Otherwise the parser doesn't know where the url content ends.

Alternatively you could make the url use single quotes and keep your SVG content the same.

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }

Base64 / SVG HTML image is not displayed

The base64 code that you have copied is broken. Close to the end there is == in the middle of the code. That is a filler that is placed at the end of a base64 code.

Remove the part after ==, and it will work fine.

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTI2cHgiIGhlaWdodD0iMTI2cHgiIHZpZXdCb3g9IjAgMCAxMjYgMTI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjYgMTI2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxyZWN0IHg9IjEuMDk1IiB5PSI5OC4yMjQiIHdpZHRoPSIxMjMuODEiIGhlaWdodD0iMTkuMjc1Ii8+DQoJPHJlY3QgeD0iMS4wOTUiIHk9Ijg1Ljc0IiB3aWR0aD0iMTIzLjgxIiBoZWlnaHQ9IjUuMjA1Ii8+DQoJPHBhdGggZD0iTTE4LjQwNCw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OEgzLjQ4MWMtMC43NjcsMC0xLjM4OCwwLjYyMS0xLjM4OCwxLjM4OA0KCQlzMC42MjIsMS4zOSwxLjM4OCwxLjM5SDE4LjQwNHoiLz4NCgk8cGF0aCBkPSJNNDQuNDMzLDk1LjcyMWMwLjc2NywwLDEuMzg4LTAuNjIzLDEuMzg4LTEuMzlzLTAuNjIyLTEuMzg4LTEuMzg4LTEuMzg4SDI5LjUxYy0wLjc2NywwLTEuMzg5LDAuNjIxLTEuMzg5LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg5LDEuMzlINDQuNDMzeiIvPg0KCTxwYXRoIGQ9Ik03MC40NjEsOTUuNzIxYzAuNzY3LDAsMS4zODgtMC42MjMsMS4zODgtMS4zOXMtMC42MjItMS4zODgtMS4zODgtMS4zODhINTUuNTM5Yy0wLjc2NywwLTEuMzg4LDAuNjIxLTEuMzg4LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg4LDEuMzlINzAuNDYxeiIvPg0KCTxwYXRoIGQ9Ik05Ni40OSw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OEg4MS41NjdjLTAuNzY3LDAtMS4zODgsMC42MjEtMS4zODgsMS4zODgNCgkJczAuNjIyLDEuMzksMS4zODgsMS4zOUg5Ni40OXoiLz4NCgk8cGF0aCBkPSJNMTIyLjUxOSw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OGgtMTQuOTIzYy0wLjc2NywwLTEuMzg4LDAuNjIxLTEuMzg4LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg4LDEuMzlIMTIyLjUxOXoiLz4NCgk8cGF0aCBkPSJNNy40MSw4MC45aDUzLjQ0MmMwLjg2MywwLDEuNTYyLTAuNjk5LDEuNTYyLTEuNTYyVjM5LjU0M2MwLTAuODYyLTAuNjk5LTEuNTYzLTEuNTYyLTEuNTYzSDQ1LjMxNHYtNi41MzkNCgkJYzAtMC44NjEtMC42OTgtMS41NjItMS41NjEtMS41NjJIMjMuNDI4Yy0wLjg2MywwLTEuNTYyLDAuNy0xLjU2MiwxLjU2MnY2LjU0SDcuNDFjLTAuODYyLDAtMS41NjIsMC43LTEuNTYyLDEuNTYzdjM5Ljc5NQ0KCQlDNS44NDgsODAuMjAxLDYuNTQ3LDgwLjksNy40MSw4MC45eiBNMzQuNDkyLDU3Ljg3NGgtMS43OTZ2LTYuNzY4aDEuNzk2VjU3Ljg3NHogTTI2LjU2MywzNC41NzRoMTQuMDU1djMuNDA2SDI2LjU2M1YzNC41NzR6DQoJCSBNMTAuNTQ0LDQyLjY3OGg0Ny4xNzN2MTEuOThIMzYuOTQydi00LjAwNmMwLTAuODYzLTAuNjk5LTEuNTYzLTEuNTYyLTEuNTYzaC0zLjU4MmMtMC44NjMsMC0xLjU2MiwwLjY5OS0xLjU2MiwxLjU2M3Y0LjAwNg0KCQlIMTAuNTQ0VjQyLjY3OHoiLz4NCgk8cGF0aCBkPSJNNjguNzM0LDgwLjloNDkuOTU4YzAuODA3LDAsMS40Ni0wLjY1MywxLjQ2LTEuNDZWMTcuNTM0YzAtMC44MDYtMC42NTMtMS40NTktMS40Ni0xLjQ1OWgtMTQuNTI0VjkuOTYxDQoJCWMwLTAuODA3LTAuNjUzLTEuNDYtMS40Ni0xLjQ2aC0xOWMtMC44MDcsMC0xLjQ2LDAuNjUzLTEuNDYsMS40NnY2LjExNUg2OC43MzRjLTAuODA3LDAtMS40NiwwLjY1My0xLjQ2LDEuNDU5Vjc5LjQ0DQoJCUM2Ny4yNzQsODAuMjQ3LDY3LjkyNyw4MC45LDY4LjczNCw4MC45eiBNODYuNjM4LDEyLjg5aDEzLjEzOXYzLjE4Nkg4Ni42MzhWMTIuODl6Ii8+DQo8L2c+DQo8L3N2Zz4NCg=="/>

Demo: http://jsfiddle.net/Lsr4s/2/

Edit:

Downloading the svg file from the site and base64 encoding it gives exactly the same result. If there is no signature that you can use to easily fix the code, that is what you would need to do.

I used C# code like this to base64 encode the image to a text file:

File.WriteAllText(@"d:\temp\baggage19.txt", Convert.ToBase64String(File.ReadAllBytes(@"d:\temp\baggage19.svg")));

How to modify the fill color of an SVG image when being served as background image?

I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.

LESS mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

LESS usage:

.element-color(#fff);

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS usage:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.

Using an svg image with inline data uri

There are two issues with the y version.

a) the svg element has no namespaces (it does in the x version) but in the y version it also needs the xlink namespace as the image href attribute is in the xlink namespace.

b) the image in the SVG is external.

A css background is an image itself so any SVG it references cannot load external resources. You therefore need to URI encode the inner image data and then uri encode the outer SVG (thereby doubly 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....

Which I've completed here for the Firefox/Chrome case

Content Security Policy - data:image/svg+xml is ignored in img-src

Your example CSP is invalid. According to MDN Documentation you should use only hosts, schemas or other constant values. After correction, you example should look like:

img-src 'self' https://stats.g.doubleclick.net/ https://www.facebook.com/ https://www.google-analytics.com/ data:;

Generate Img Src Data Uri for Svg with '<Use>' Elements