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

by

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 ".

More Related Contents:

  1. img src SVG changing the styles with CSS
  2. How do I make background-size work in IE?
  3. Transparent hollow or cut out circle
  4. Inline SVG in CSS
  5. SVG animation is not working on IE11
  6. CSS transparent curved shape with two rounded sides
  7. SVG USE element and :hover style
  8. How to animate handwriting text on the web page using SVG?
  9. CSS flexbox not working in IE10
  10. How to create a curve on the top of a background?
  11. Specify an SVG as a background image and ALSO style the SVG in CSS?
  12. Outlining and partially filling an SVG Shape
  13. Can I change the fill color of an svg path with CSS?
  14. Apply style ONLY on IE
  15. SVG in img element proportions not respected in ie9
  16. Bootstrap dropdowns menus appearing behind other elements – IE7
  17. What bug does zoom:1; fix in CSS?
  18. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  19. CSS Blur in IE 11
  20. Custom cursor image doesn’t work in all IEs?
  21. How do I include a font awesome icon in my svg?
  22. Internet Explorer @font-face is failing
  23. How can I change the color of an ‘svg’ element?
  24. How to make Google Fonts work in IE?
  25. How to add animated gradient to an svg path?
  26. Filling water animation
  27. Fill only Half a star with SVG
  28. SVG Fill not being applied in FireFox
  29. Using SVG as background image
  30. with an inner not triggering :active state in IE 8

Leave a Comment