Css: Using Raw Svg in the Url Parameter of a Background-Image in Ie

CSS: Using raw svg in the URL parameter of a background-image in IE

IE does appear to support using utf8 in a data URI, it's simply being more fussy about it. See this Codepen Blog Post for more details but here are the highlights:

The author points to RFC2397 and highlights:

data:[<mediatype>][;base64],<data>

The <mediatype> is an Internet media type specification (with optional parameters.) The appearance of ";base64" means that the data is encoded as base64. Without ";base64", the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range. If <mediatype> is omitted, it defaults to text/plain;charset=US-ASCII. As a shorthand, "text/plain" can be omitted but the charset parameter supplied.

Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
From above, "Without ";base64", the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range." Which means you will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".

CSS: SVGs in data URL not working in IE11

This works for me:

background-position-x: 0;
background-position-y: center;
background-repeat: repeat-x;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%25' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3e%3cpolygon stroke='%23fb37f1' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3e%3c/svg%3e");
background-size: 12px 12px;

I used this encoder https://codepen.io/elliz/pen/ygvgay

SVG data URI in IMG tag isn't showing on IE11

Solved it,

The problem was that for using data URI in IE11 the URI must be in base64.
so i took the SVG data and used 'btoa' function on it and added 'svg+xml;base64' as his MIME type.

<img src={`data:image/svg+xml;base64,${window.btoa(data)}`} />

How to print background image and styles in WebBrowser control

There is a Print Background Colors and Images setting in Page Setup dialog which is shared between Web Browser Control and Internet Explorer.

Page setup settings for Microsoft Internet Explorer are stored in the following registry key:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup

Print Background Colors and Images value is stored in Print_Background key which can be yes or no. You can change the setting using code, but just keep in mind, these values are system-wide settings and will affect all instances of the WebBrowser control and Internet Explorer for the current user:

using (var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
    @"Software\Microsoft\Internet Explorer\PageSetup", true))
{
    key.SetValue("Print_Background", "yes", Microsoft.Win32.RegistryValueKind.String);
}

Here is the test html that I used:

<html>
  <head>
    <style>
     body { background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"); } 
    </style>
  </head>
  <body>
  </body>
</html>

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.

Specify an SVG as a background image and ALSO style the SVG in CSS?

No, this is not possible. The SVG has to be prepared in one document (which may be a data URI or an externally referenced file) and then used as a background in another file.

Css: Using Raw Svg in the Url Parameter of a Background-Image in Ie