Modify SVG fill color when being served as Background-Image

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so   polygon mystar       fill  blue      circle mycircle       fill  green      This works great  however I m looking for a way to modify the  fill  attribute of an SVG when it s being served as a BACKGROUND-IMAGE     html             background-image  url    img bg svg       How can I change the colors now   Is it even possible   For reference  here are the contents of my external SVG file    lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px       width  320px  height  100px  viewBox  0 0 320 100  enable-background  new 0 0 320 100  xml space  preserve  gt   lt polygon class  mystar  fill   3CB54A  points  134 973 14 204 143 295 31 066 161 903 33 77 148 438 46 896 151 617 65 43 134 973 56 679      118 329 65 43 121 507 46 896 108 042 33 77 126 65 31 066    gt   lt circle class  mycircle  fill   ED1F24  cx  202 028  cy  58 342  r  12 26   gt   lt  svg gt

User · Answer

This is my favorite method  but your browser support must be very progressive  With the mask property you create a mask that is applied to an element  Everywhere the mask is opaque  or solid  the underlying image shows through  Where it   s transparent  the underlying image is masked out  or hidden  The syntax for a CSS mask-image is similar to background-image look at the codepenmask

User · Answer

Use the sepia filter along with hue-rotate  brightness  and saturation to create any color we want    colorize-pink     filter  brightness 0 5  sepia 1  hue-rotate -70deg  saturate 5       https   css-tricks com solved-with-css-colorizing-svg-backgrounds

User · Answer

You can create your own SCSS function for this  Adding the following to your config rb file   require  sass  require  cgi   module Sass  Script  Functions    def inline svg image path  fill      real path   File join Compass configuration images path  path value      svg   data real path      svg gsub    color    fill value     encoded svg   CGI  escape svg  gsub        20       data url    url  data image svg xml charset utf-8     encoded svg            Sass  Script  String new data url    end  private    def data real path      if File readable  real path        File open real path   rb     io  io read      else       raise Compass  Error   File not found or cannot be read    real path       end   end  end   Then you can use it in your CSS    icon     background-image  inline-svg-image  icons icon svg     555        You will need to edit your SVG files and replace any fill attributes in the markup with fill   color    The icon path is always relative to your images dir parameter in the same config rb file   Similar to some of the other solutions  but this is pretty clean and keeps your SCSS files tidy

User · Answer

for monochrome background you could use a svg with a mask  where the background color should be displayed   lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 20 20  preserveAspectRatio  xMidYMid meet  focusable  false  style  pointer-events  none  display  block  width  100   height  100     gt       lt defs gt           lt mask id  Mask  gt               lt rect width  100   height  100   fill   fff    gt               lt polyline stroke-width  2 5  stroke  black  stroke-linecap  square  fill  none  transform  translate 10 373882  8 762969  rotate -315 000000  translate -10 373882  -8 762969    points  7 99893906 13 9878427 12 7488243 13 9878427 12 7488243 3 53809523  gt  lt  polyline gt           lt  mask gt       lt  defs gt       lt rect x  0  y  0  width  20  height  20  fill  white  mask  url  Mask     gt   lt  svg gt    and than use this css   background-repeat  no-repeat  background-position  center center  background-size  contain  background-image  url your path to svg   background-color  var --color

User · Answer

Late to the show here  BUT  I was able to add a fill color to the SVG polygon  if you re able to directly edit the SVG code  so for example the following svg renders red  instead of default black   I have not tested outside of Chrome though    lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px   width  500px  height  500px  viewBox  0 0 500 500  enable-background  new 0 0 500 500  xml space  preserve  gt       lt polygon            fill  red            fill-rule  evenodd  clip-rule  evenodd  points  452 5 233 85 452 5 264 55 110 15 264 2 250 05 390 3 229 3 413 35  47 5 250 7 229 3 86 7 250 05 109 75 112 5 233 5    gt   lt  svg gt

User · Answer

You can store the SVG in a variable  Then manipulate the SVG string depending on your needs  i e   set width  height  color  etc   Then use the result to set the background  e g    circle-icon-svg    lt svg xmlns  http   www w3 org 2000 svg  gt  lt circle cx  10  cy  10  r  10    gt  lt  svg gt      icon-color   f00   icon-color-hover   00f    function str-replace  string   search   replace             index  str-index  string   search         if  index            return str-slice  string  1   index - 1     replace   str-replace str-slice  string   index   str-length  search     search   replace               return  string      function svg-fill   svg   color       return str-replace  svg    lt svg     lt svg fill     color          function svg-size   svg   width   height       svg  str-replace  svg    lt svg     lt svg width     width         svg  str-replace  svg    lt svg     lt svg height     height          return  svg      icon      icon-svg  svg-size  circle-icon-svg  20  20      width  20px  height  20px  background  url  data image svg xml utf8   svg-fill  icon-svg   icon-color          amp  hover       background  url  data image svg xml utf8   svg-fill  icon-svg   icon-color-hover              I have made a demo too  http   sassmeister com gist 4cf0265c5d0143a9e734   This code makes a few assumptions about the SVG  e g  that  lt svg   gt  element does not have an existing fill colour and that neither width or height properties are set  Since the input is hardcoded in the SCSS document  it is quite easy to enforce these constraints   Do not worry about the code duplication  gzip compression makes the difference negligible

User · Answer

Yet another approach is to use mask  You then change the background color of the masked element  This has the same effect as changing the fill attribute of the svg    HTML    lt glyph class  star   gt   lt glyph class  heart    gt   lt glyph class  heart  style  background-color  green   gt   lt glyph class  heart  style  background-color  blue   gt    CSS   glyph       display  inline-block      width   24px      height  24px     glyph star     -webkit-mask  url star svg  no-repeat 100  100     mask  url star svg  no-repeat 100  100     -webkit-mask-size  cover    mask-size  cover    background-color  yellow     glyph heart     -webkit-mask  url heart svg  no-repeat 100  100     mask  url heart svg  no-repeat 100  100     -webkit-mask-size  cover    mask-size  cover    background-color  red      You will find a full tutorial here  http   codepen io noahblon blog coloring-svgs-in-css-background-images  not my own   It proposes a variety of approaches  not limited to mask

User · Answer

Download your svg as text   Modify your svg text using javascript to change the paint stroke fill color s    Then embed the modified svg string inline into your css as described here

User · Answer

One way to do this is to serve your svg from some server side mechanism  Simply create a resource server side that outputs your svg according to GET parameters  and you serve it on a certain url   Then you just use that url in your css   Because as a background img  it isn t part of the DOM and you can t manipulate it  Another possibility would be to use it regularly  embed it in a page in a normal way  but position it absolutely  make it full width  amp  height of a page and then use z-index css property to put it behind all the other DOM elements on a page

User · Answer

A lot of IFs  but if your pre base64 encoded SVG starts    lt svg fill   000000   Then the base64 encoded string will start   PHN2ZyBmaWxsPSIjMDAwMDAw   if the pre-encoded string starts    lt svg fill   bfa76e   then this encodes to   PHN2ZyBmaWxsPSIjYmZhNzZl   Both encoded strings start the same   PHN2ZyBmaWxsPSIj   The quirk of base64 encoding is every 3 input characters become 4 output characters  With the SVG starting like this then the 6-character hex fill color starts exactly on an encoding block  boundary   Therefore you can easily do a cross-browser JS replace   output   input replace  MDAwMDAw    YmZhNzZl      But tnt-rox answer above is the way to go moving forward

User · Answer

Now you can achieve this on the client side like this   var green    3CB54A   var red    ED1F24   var svg     lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px   width  320px  height  100px  viewBox  0 0 320 100  enable-background  new 0 0 320 100  xml space  preserve  gt   lt polygon class  mystar  fill     green    points  134 973 14 204 143 295 31 066 161 903 33 77 148 438 46 896 151 617 65 43 134 973 56 679 118 329 65 43 121 507 46 896 108 042 33 77 126 65 31 066    gt  lt circle class  mycircle  fill     red    cx  202 028  cy  58 342  r  12 26   gt  lt  svg gt          var encoded   window btoa svg   document body style background    url data image svg xml base64   encoded        Fiddle here

User · Answer

It s possible with Sass   The only thing you have to do is to url-encode your svg code  And this is possible with a helper function in Sass  I ve made a codepen for this  Look at this   http   codepen io philippkuehn pen zGEjxB     choose a color   icon-color   F84830       functions to urlencode the svg string   function str-replace  string   search   replace           index  str-index  string   search      if  index        return str-slice  string  1   index - 1     replace   str-replace str-slice  string   index   str-length  search     search   replace          return  string      function url-encode  string       map               25         lt      3C         gt      3E              20              21              2A              27              22              28              29              3B              3A              40         amp      26              3D              2B              24              2C              2F              3F              23              5B              5D          new   string     each  search   replace in  map        new  str-replace  new   search   replace          return  new      function inline-svg  string       return url  data image svg xml utf8   url-encode  string             icon styles    note the fill       icon-color        icon     display  inline-block    width  50px    height  50px    background  inline-svg   lt svg version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px     viewBox  0 0 30 30  enable-background  new 0 0 30 30  xml space  preserve  gt   lt path fill       icon-color      d  M18 7 10 1c-0 6 0 7-1 1 6-0 9 2 6c0 0 7-0 6 0 8-0 9 0 3c-1 1-2 1-0 4-5 1 0 7-7 2c0 2-0 4 0-0 8-0 5-0 7   c-5 8 0 8-9 6 4-6 4 12c0 1 0 3-0 2 0 6-0 5 0 5c-0 6-0 3-1 1-0 7-1 6-1 3c-0 2-0 3-0 4-0 5-0 6-0 8c-0 2-0 4-0 7-0 3-0 8 0 3   c-0 5 2 5 0 3 5 3 2 1 7 1c4 4 4 5 13 9 1 7 13 4-5 1c-0 2-2 9-3 2-4 2-3 3-7 1C19 6 10 19 1 9 6 18 7 10 1z   gt   lt  svg gt

User · Answer

icon      width  48px    height  48px    display  inline-block    background  url https   s3-us-west-2 amazonaws com s cdpn io 18515 heart svg  no-repeat 50  50      background-size  cover      icon-orange      -webkit-filter  hue-rotate 40deg  saturate 0 5  brightness 390   saturate 4      filter  hue-rotate 40deg  saturate 0 5  brightness 390   saturate 4        icon-yellow     -webkit-filter  hue-rotate 70deg  saturate 100     filter  hue-rotate 70deg  saturate 100       codeben article and demo

User · Answer

I needed something similar and wanted to stick with CSS  Here are LESS and SCSS mixins as well as plain CSS that can help you with this  Unfortunately  it s browser support is a bit lax  See below for details on browser support   LESS mixin    element-color  color      background-image  url  data image svg xml utf8  lt svg     gt  lt g stroke    color         gt  lt  g gt  lt  svg gt           LESS usage    element-color  fff         SCSS mixin    mixin element-color  color      background-image  url  data image svg xml utf8  lt svg     gt  lt g stroke     color         gt  lt  g gt  lt  svg gt           SCSS usage    include element-color  fff         CSS      color  red background-image  url  data image svg xml utf8  lt svg     gt  lt g stroke  red        gt  lt  g gt  lt  svg gt           Here is more info on embedding the full SVG code into your CSS file  It also mentioned browser compatibility which is a bit too small for this to be a viable option

User · Answer

You can use CSS masks  With the  mask  property  you create a mask that is applied to an element    icon       background-color  red      -webkit-mask-image  url icon svg       mask-image  url icon svg       For more see this great article  https   codepen io noahblon post coloring-svgs-in-css-background-images

User · Answer

In some  very specific  situations this might be achieved by using a filter  For example  you can change a blue SVG image to purple by rotating the hue 45 degrees using filter  hue-rotate 45deg    Browser support is minimal but it s still an interesting technique   Demo

[html] Modify SVG fill color when being served as Background-Image

Examples related to html

Examples related to css

Examples related to svg