SVG data URLs with unencoded # characters break in IE11 / Firefox

[fdaunis]

Up-down arrows on custom select control no visible on Firefox and IE11. On Chrome works fine.

on Bootstrap 4 alpha 4 works ok, on alpha 5 you have a error on css.

OK alpha4:
data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E

bootstrap_4.0.0-alpha4.css line 3456

ERROR alpha5:
data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E

bootstrap_4.0.0-alpha5.css line 3521

[ghost]

Same goes for form validation and custom checkboxes/radios.

SVG icons display fine in Chrome 54, but not in Firefox 49.

http://v4-alpha.getbootstrap.com/components/forms/#validation
http://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios-1

[Johann-S]

Me too for form validation I cannot see SVG Icon on Firefox 48 and 49 but it's fine on Chrome but you should open a new issue IMO @xcartmods

[patrickhlauke]

Confirmed that there is an issue with data URLs which in the latest alpha have a clear # rather than an encoded %23, which results in IE11/Firefox crapping out on them.

[ghost]

I use a base href="" tag in my site, so inline SVG's don't tend to work for me anyway.
So I use the images instead. Here they are if anyone needs them also...
bs_svg_icons.zip