SVG inline CSS not displaying in internet explorer

Question

First question on stackoverflow, hope it's not too boneheaded. I've been trying to figure out a way to display a calendar with split event days. What I came up with was using an SVG graphic placed with inline css as a background for the specific calendar table cell in order to split days that have a split. It works wonderfully in Firefox and Chrome but the graphics do not display in Internet explorer (I've tried 9 and 10 but not 11).

The calendar is first generated with javascript and events are placed by adding css classes to targeted cells from JSON data.

Here is a small snip of the a CSS classes being used to apply the background, full example with the HTML in the fiddle:

    .calendar td {
      position:relative;
    }

    .calendar .split {
        background-repeat:no-repeat;
        background-position: top left;
        background-size: 100% 100%;
    }
    .calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'  preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}

Here is the fiddle containing the HTML and CSS that illustrates the issue:

• http://jsfiddle.net/0mspvexg/2/

Running the fiddle in Firefox and chrome shows the split days properly but Internet explorer 9, 10, (11?) does not display the split days.

I have looked at similar questions such as the following but have not yet found any clear solutions:

1. SVG background image in IE9
2. Inline SVG not working as background-image in IE

Anyone have any experience with getting Internet explorer to display inline SVG as a background or see something obvious I'm overlooking or maybe I'm approaching this the wrong way. Thanks!

Answer 1

IE works if you base64 encode the data e.g.

    .calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}

Answer 2

Unfortunately you need use URI encoding (or base64) for Internet Explorer.

With URI encoding you keep the posibility to change the SVG values, but it's hard to read.

.calendar .split.am_vaca { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%20%20preserveAspectRatio%3D'none'%3E%3Cpolygon%20points%3D'0%2C0%201%2C0%200%2C1'%20style%3D'stroke-width%3A0%3B%20fill%3Alightgreen%3B'%20%2F%3E%3C%2Fsvg%3E"); }

You can encode your SVG here: http://pressbin.com/tools/urlencode_urldecode/ And choose the encodeURIComponent() option.

If you are using Compass you can automate base64 encoding: http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/