Inline SVG in CSS

by

Yes, it is possible. Try this:

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><linearGradient id='gradient'><stop offset="10%" stop-color="%23F00"/><stop offset="90%" stop-color="%23fcc"/> </linearGradient><rect fill="url(%23gradient)" x='0' y='0' width="100%" height="100%"/></svg>");
      }

(Note that the SVG content needs to be url-escaped for this to work, e.g. # gets replaced with %23.)

This works in IE 9 (which supports SVG). Data-URLs work in older versions of IE too (with limitations), but they don’t natively support SVG.

More Related Contents:

  1. img src SVG changing the styles with CSS
  2. Transparent text cut out of background
  3. SVG data image not working as a background-image in a pseudo element
  4. Transparent hollow or cut out circle
  5. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  6. SVG animation is not working on IE11
  7. CSS transparent curved shape with two rounded sides
  8. Is there a way to use SVG as content in a pseudo element ::before or ::after
  9. SVG USE element and :hover style
  10. How to animate handwriting text on the web page using SVG?
  11. Wave (or shape?) with border on CSS3
  12. How to create a curve on the top of a background?
  13. Specify an SVG as a background image and ALSO style the SVG in CSS?
  14. Outlining and partially filling an SVG Shape
  15. Can I change the fill color of an svg path with CSS?
  16. SVG in img element proportions not respected in ie9
  17. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. How do I include a font awesome icon in my svg?
  20. How can I change the color of an ‘svg’ element?
  21. How to add animated gradient to an svg path?
  22. Filling water animation
  23. Transparent hollow or cut out shape in HTML
  24. CSS change d property of
  25. Fill only Half a star with SVG
  26. SVG Fill not being applied in FireFox
  27. Tint image using CSS without overlay
  28. Why don’t CSS filters work on SVG elements in Chrome?
  29. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  30. Double curved shape

Leave a Comment