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

Styling the SVG via a separate CSS class didn't work for me, but inline styling did:

&::after {
      content: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg' width='12px' height='18px'><path fill='rgb(13, 132, 254)' d='M2.1.1L0 2.2l8.3 8.3L9.8 12l-1.5 1.5L0 21.8l2.1 2.1L14 12z' /></svg>");
    }

Note: specifying the fill prop as a hexcode colour didn't work, even though it did if in a 'normal' SVG, that's why I converted it to RGB and styled it that way.


It's actually possible for those who can use preprocessors in production, by "inlining" background SVG, and bit of SASS mixins, which "slice" whole svg gibberish, to get access to parts you want to manipulate via SASS variables.

In your original scenario you have an element
<div class="element1"></div>,

so you need a mixin/function which will inline SVG for you. Let's say you want to control of the fill, so: 

@mixin inline-svg($color, $svg-content) {
  $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
  $end:   '</svg>';

  background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}

where $svg-content variable is your <svg> stuff excluding <style> element (which you want to access from inside of the mixin) and wrapping svg tag,, ie: $svg-content = "<path .... />"

This just need to be included with values passed inside:
@include inline-svg(salmon, $svg-content);

To sum whole thing up, this is an example SASS code: 

$svg-content = "<path .... />"

@mixin inline-svg($color, $svg-content) {
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
    $end:   '</svg>';

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}  

.element1 {
    @include inline-svg(rgba(0,0,0,0.6), $svg-content);
}

I think possibilities here are quite big (there are also limitations here to that approach). I actually pass a SASS map to my mixin with css styles defined as key, value pair, to inject whole bunch of css styles to the <style> part of svg.

So it's technically possible, but require more compexity, but once you get this done, you'll get benefits of reusing this mixin throughout your project(s), which is cool .


You can use SVG and CSS masks to recreate this effect, then use normal CSS to style the inside of the SVG, even background-image

-webkit-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -o-mask:    url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -ms-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;

background-color: red;
background-image: url(animated.gif);

/* Filename, Position / Size, Repeat */
/* Modernizr.cssmask is the test needed to pass - snippet below */

You can use this to create drop shadows by appending an element to the DOM and styling that, with a lower z-index and setting an opacity.

Hope that helps!

Edit: Links

  • Modernizr Test - http://pastebin.com/w4eVbEKr
  • Some more information - https://www.webkit.org/blog/181/css-masks/

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.

Tags:

Css

Svg

Recent Posts