img src SVG changing the styles with CSS

Question

html   lt img src  logo svg  alt  Logo  class  logo-img  gt    css   logo-img path     fill   000      The above svg loads and is natively fill   fff but when I use the above css to try change it to black it doesn t change  this is my first time playing with SVG and I am not sure why it s not working

User · Answer

Why not just using CSS s filter property to manipulate the color on  hover or whatever other state  I found it works over SVG images into img tags  At least  it s almost fully supported in 2020  It seams to me the simpliest solution  The only caveat is having to tweak the filter properties in order to find the target color  But you have also this very useful tool

User · Answer

If your goal is just to change the color of the logo  and you don t necessarily NEED to use CSS  then don t use javascript or jquery as was suggested by some previous answers     To precisely answer the original question  just    Open your logo svg in a text editor   look for fill   fff and replace it with fill   000    For example  your logo svg might look like this when opened in a text editor    lt svg fill   000000  height  24  viewBox  0 0 24 24  width  24  xmlns  http   www w3 org 2000 svg  gt     lt path d  M0 0h24v24H0z  fill  none   gt     lt path d  M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z  fill   fff   gt   lt  svg gt        just change the fill and save

User · Answer

I suggest to select your color   and go to this pen https   codepen io sosuke pen Pjoqqp it will convert HEX to css filter eg  64D7D6 equal filter  invert 88   sepia 21   saturate 935   hue-rotate 123deg  brightness 85   contrast 97     the final snippet  x000D   x000D   filterit  width 270px  filter  invert 88   sepia 21   saturate 935   hue-rotate 123deg  brightness 85   contrast 97      x000D   lt img src  https   www flaticon com svg static icons svg 1389 1389029 svg  class  filterit    gt  x000D   x000D   x000D

User · Answer

This might be helpful for people using PHP in combination with  svg images that they want to manipulate with CSS   You can t overwrite properties inside a img tag with CSS  But when the svg source code is embedded in the HTML you surely can  I like to resolve this issue with a require once function where I include a  svg php file  It s like importing an image but you can still overwrite styles with CSS   First include the svg file    lt  php require once    assets images my-icon svg php       gt    And it includes this icon for example     lt svg xmlns  http   www w3 org 2000 svg  width  20 666  height  59 084  viewBox  0 0 20 666 59 084  gt  lt g transform  translate -639 749 -3139   gt  lt path d  M648 536 3173 876c0-2 875-1 725-3 8-3 471-3 8-1 683 0-3 49 9-3 49 3 8 0 3 1 786 3 8 3 49 3 8C646 811 3177 676 648 536 3176 769 648 536 3173 876Zm-3 471 2 341c- 883 0-1 437- 513-1 437-2 341 0-1 971 615-2 381 1 437-2 381 862 0 1 438 349 1 438 2 381 0 1 907- 616 2 339-1 438 2 339Z  fill   142312   gt  lt path d  M653 471 3170 076a1 565 1 565 0 0 0-1 416 9l-6 558 13 888h1 2a1 565 1 565 0 0 0 1 416- 9l6 559-13 887Z  fill   142312   gt  lt path d  M655 107 3177 263c-1 684 0-3 471 9-3 471 3 8 0 3 1 766 3 8 3 471 3 8 1 745 0 3 49- 9 3 49-3 8C658 6 3178 186 656 851 3177 263 655 107 3177 263Zm0 6 139c- 884 0-1 438- 514-1 438-2 34 0-1 972 617-2 381 1 438-2 381 862 0 1 437 349 1 437 2 381 0 1 909- 616 2 34-1 437 2 34Z  fill   142312   gt  lt path d  M656 263 3159 023l-1 49-14 063a1 35 1 35 0 0 0  329- 293 1 319 1 319 0 0 0  268-1 123l- 753-3 49a1 328 1 328 0 0 0-1 306-1 054h-6 448a1 336 1 336 0 0 0-1 311 1 068l- 71 3 493a1 344 1 344 0 0 0  276 1 112 1 532 1 532 0 0 0  283 262l-1 489 14 087c-1 7 1 727-4 153 4 871-4 153 8 638v28 924a1 339 1 339 0 0 0 1 168 1 49 1 357 1 357 0 0 0  17 01h17 981a1 366 1 366 0 0 0 1 337-1 366v-29 059C660 414 3163 893 657 963 3160 749 656 263 3159 023Zm-8 307-17 349h4 274l 176 815H647 79Zm9 785 43 634v10 1H642 434v-17 253a4 728 4 728 0 0 1-2 028-4 284 4 661 4 661 0 0 1 2 028-4 215v-2c0-3 162 2 581-5 986 3 687-7 059a1 356 1 356 0 0 0  4- 819l1 542-14 614H652 1l1 545 14 618a1 362 1 362 0 0 0  4 819c1 109 1 072 3 688 3 9 3 688 7 059v9 153a5 457 5 457 0 0 1 0 8 5Z  fill   142312   gt  lt  g gt  lt  svg gt    Now we can easily change the fill color like this with CSS   svg path     fill  blue      I first tried to solve this problem with file get contents   but the solution above is much faster

User · Answer

This answer is based on answer https   stackoverflow com a 24933495 3890888 but with a plain JavaScript version of the script used there   You need to make the SVG to be an inline SVG  You can make use of this script  by adding a class svg to the image         Replace all SVG images with inline SVG     document querySelectorAll  img svg   forEach function img       var imgID   img id      var imgClass   img className      var imgURL   img src       fetch imgURL  then function response            return response text           then function text            var parser   new DOMParser            var xmlDoc   parser parseFromString text   text xml                Get the SVG tag  ignore the rest         var svg   xmlDoc getElementsByTagName  svg   0               Add replaced image s ID to the new SVG         if typeof imgID      undefined                 svg setAttribute  id   imgID                        Add replaced image s classes to the new SVG         if typeof imgClass      undefined                 svg setAttribute  class   imgClass   replaced-svg                          Remove any invalid XML tags as per http   validator w3 org         svg removeAttribute  xmlns a                Check if the viewport is set  if the viewport is not set the SVG wont t scale          if  svg getAttribute  viewBox    amp  amp  svg getAttribute  height    amp  amp  svg getAttribute  width                  svg setAttribute  viewBox    0 0     svg getAttribute  height           svg getAttribute  width                          Replace image with new SVG         img parentNode replaceChild svg  img                   And then  now if you do    logo-img path     fill   000      Or may be    logo-img path     background-color   000      JSFiddle  http   jsfiddle net erxu0dzz 1

User · Answer

The main problem in your case is that you are importing the svg from an  lt img gt  tag which will hide the SVG structure   You need to use the  lt svg gt  tag in conjunction with the  lt use gt  to get the desired effect  To make it work  you need to give an id to the path you want to use in the SVG file  lt path id  myName     gt  to then be able to retrieve them from the  lt use xlink href   myName   gt  tag  Try the snipped below    x000D   x000D   icon   x000D    display  inline-block  x000D    width  2em  x000D    height  2em  x000D    transition   5s  x000D    fill  currentColor  x000D    stroke-width  5  x000D      x000D     icon hover   x000D      fill  rgba 255 255 255 0   x000D      stroke  black  x000D      stroke-width  2  x000D        x000D   x000D   red   x000D    color  red  x000D      x000D   x000D   blue   x000D    color  blue  x000D      x000D   lt svg width  0  height  0  gt  x000D     lt defs gt  x000D       lt path id  home  d  M100 59 375l-18 75-18 75v-28 125h-12 5v15 625l-18 75-18 75-50 50v3 125h12 5v31 25h31 25v-18 75h12 5v18 75h31 25v-31 25h12 5z   gt  x000D   lt  svg gt  x000D   x000D     x000D     lt span class  icon red  gt  x000D             lt svg viewbox  0 0 100 100  gt  x000D               lt use xlink href   home   gt  x000D             lt  svg gt  x000D           lt  span gt  x000D     x000D       lt span class  icon blue  gt  x000D             lt svg viewbox  0 0 100 100  gt  x000D               lt use xlink href   home   gt  x000D             lt  svg gt  x000D           lt  span gt  x000D   x000D   x000D    Note that you can put any URL before the fragment   if you want to load the SVG from an external source  and not embed it into your HTML   Also  usually you do not specify the fill into the CSS  It s better to consider using fill  currentColor  within the SVG itself  The corresponding element s CSS color value will then be used in place

User · Answer

Know this is an old question but recently we came across the same issue  and we solved it from the server side  This is a php specific answer but I am positive that other envs have something similar  instead of using the img tag you render the svg as svg from the get-go   public static function print svg  file        iconfile   new  DOMDocument         iconfile- gt load  file        tag    iconfile- gt saveHTML  iconfile- gt getElementsByTagName  svg   0        return  tag      now when you render the file you will get complete inline svg

User · Answer

For me  my svgs looked different when having them as img and svg  So my solution converts the img to csv  changes styles internally and back to img  although it requires a bit more work   I believe  quot blob quot  also has better compatibility than the upvoted answer using  quot mask quot     let img   yourimgs 0     if  img src includes  quot  svg quot          var ajax   new XMLHttpRequest        ajax open  quot GET quot   img src  true       ajax send        ajax onload   function  e                svg   e target responseText               svgText    quot  quot           change your svg-string as youd like  for example          replacing the hex color between  quot  fill  quot  and  quot   quot        idx   svg indexOf  quot  fill  quot          substr   svg substr idx   6         str1   svg substr 0  idx   6         str2   substr substr substr indexOf  quot   quot           svgText   str1    quot  ff0000 quot    str2                let blob   new Blob  svgText     type   quot image svg xml quot            let url   URL createObjectURL blob         let image   document createElement  quot img quot          image src   url        image addEventListener  quot load quot        gt  URL revokeObjectURL url             once  true                  img replaceWith image

User · Answer

To expand on  gringo answer  the Javascript method described in other answers works  but requires the user to download unnecessary image files  and IMO  it bloats your code    I think a better approach would be to to migrate all 1-color vector graphics to a webfont file  I ve used Fort Awesome in the past  and it works great to combine your custom icons images in SVG format  along with any 3rd party icons you may be using  Font Awesome  Bootstrap icons  etc   into a single webfont file the user has to download  You can also customize it  so you only include the 3rd party icons you re using  This reduces the number of requests the page has to make  and you re overall page weight  especially if you re already including any 3rd party icons libraries    If you prefer a more dev oriented option  you could Google  npm svg webfont   and use one of the node modules that s most appropriate for your environment   Once  you ve done either of those two options  then you could easily change the color via CSS  and most likely  you ve sped up your site in the process

User · Answer

You will first have to inject the SVG into the HTML DOM    There is an open source library called SVGInject that does this for you  It uses the onload attribute to trigger the injection   Here is a minimal example using SVGInject    lt html gt     lt head gt       lt script src  svg-inject min js  gt  lt  script gt     lt  head gt     lt body gt       lt img src  image svg  onload  SVGInject this     gt     lt  body gt   lt  html gt    After the image is loaded the onload  SVGInject this  will trigger the injection and the  lt img gt  element will be replaced by the contents of the SVG file provided in the src attribute   It solves several issues with SVG injection    SVGs can be hidden until injection has finished  This is important if a style is already applied during load time  which would otherwise cause a brief  unstyled content flash   The  lt img gt  elements inject themselves automatically  If you add SVGs dynamically  you don t have to worry about calling the injection function again  A random string is added to each ID in the SVG to avoid having the same ID multiple times in the document if an SVG is injected more than once     SVGInject is plain Javascript and works with all browsers that support SVG   Disclaimer  I am the co-author of SVGInject

User · Answer

Since SVG is basically code  you need just contents  I used PHP to obtain content  but you can use whatever you want    lt  php  content      file get contents  pathToSVG     gt    Then  I ve printed content  as is  inside a div container   lt div class  fill-class  gt  lt  php echo  content   gt  lt  div gt    To finnaly set rule to container s SVG childs on CSS   fill-class  gt  svg        fill  orange      I got this results with a material icon SVG   Mozilla Firefox 59 0 2  64-bit  Linux    Google Chrome66 0 3359 181  Build oficial   64 bits  Linux    Opera 53 0 2907 37 Linux

User · Answer

You could set your SVG as a mask  That way setting a background-color would act as your fill color  HTML  lt div class  quot logo quot  gt  lt  div gt   CSS  logo     background-color  red    -webkit-mask  url logo svg  no-repeat center    mask  url logo svg  no-repeat center     JSFiddle  https   jsfiddle net KuhlTime 2j8exgcb  MDN  https   developer mozilla org en-US docs Web CSS mask Please check whether your browser supports this feature  https   caniuse com  search mask

User · Answer

Try pure CSS    logo-img        to black   filter  invert 1        or to blue      filter  invert 1  sepia 1  saturate 5  hue-rotate 175deg       more info in this article https   blog union io code 2017 08 10 img-svg-fill

User · Answer

If you are just switching the image between the real color and the black-and-white  you can set one selector as     filter none    and another as    filter grayscale 100

User · Answer

Edit your SVG file  add fill  quot currentColor quot  to svg tag and make sure to remove any other fill property from the file  For example   lt svg xmlns  quot http   www w3 org 2000 svg quot  viewBox  quot 0 0 200 139 435269383854 quot  id  quot img quot  fill  quot currentColor quot  gt      lt  svg gt   Note that currentColor is a keyword  not a fixed color in use   After that  you can change the color using CSS  by setting the color property of the element or from it s parent  Example   div-with-svg-inside       color  red     I forgot to say  you must insert the SVG this way         lt svg gt           lt use xlink href   assets file svg img  gt  lt  use gt         lt  svg gt    Note that  img is the id of the svg tag inside svg file  Another way of doing it  https   css-tricks com cascading-svg-fill-color

User · Answer

Use filters to transform to any color   I recently found this solution  and hope somebody might be able to use it  Since the solution uses filters  it can be used with any type of image  Not just svg    If you have a single-color image that you just want to change the color of  you can do this with the help of some filters  It works on multicolor images as well of course  but you can t target a specific color  Only the whole image    The filters came from the script proposed in How to transform black into any given color using only CSS filters If you want to change white to any color  you can adjust the invert value in each filter    x000D   x000D   startAsBlack  x000D    display  inline-block  x000D    width  50px  x000D    height  50px  x000D    background  black  x000D    x000D   x000D   black-green  x000D    filter  invert 43   sepia 96   saturate 1237   hue-rotate 88deg  brightness 128   contrast 119    x000D    x000D   x000D   black-red  x000D    filter  invert 37   sepia 93   saturate 7471   hue-rotate 356deg  brightness 91   contrast 135    x000D    x000D   x000D   black-blue  x000D    filter  invert 12   sepia 83   saturate 5841   hue-rotate 244deg  brightness 87   contrast 153    x000D    x000D   x000D   black-purple  x000D    filter  invert 18   sepia 98   saturate 2657   hue-rotate 289deg  brightness 121   contrast 140    x000D    x000D  Black to any color   lt br  gt  x000D   lt div class  startAsBlack black-green  gt  lt  div gt  x000D   lt div class  startAsBlack black-red  gt  lt  div gt  x000D   lt div class  startAsBlack black-blue  gt  lt  div gt  x000D   lt div class  startAsBlack black-purple  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Directly to svg fill css will not work you can use as below  lt style gt  svg path       fill  red     lt  style gt   lt svg xmlns  quot http   www w3 org 2000 svg quot  width  quot 20 666 quot  height  quot 59 084 quot  viewBox  quot 0 0 20 666 59 084 quot  gt  lt g transform  quot translate -639 749 -3139  quot  gt  lt path d  quot M648 536 3173 876c0-2 875-1 725-3 8-3 471-3 8-1 683 0-3 49 9-3 49 3 8 0 3 1 786 3 8 3 49 3 8C646 811 3177 676 648 536 3176 769 648 536 3173 876Zm-3 471 2 341c- 883 0-1 437- 513-1 437-2 341 0-1 971 615-2 381 1 437-2 381 862 0 1 438 349 1 438 2 381 0 1 907- 616 2 339-1 438 2 339Z quot  fill  quot  142312 quot   gt  lt path d  quot M653 471 3170 076a1 565 1 565 0 0 0-1 416 9l-6 558 13 888h1 2a1 565 1 565 0 0 0 1 416- 9l6 559-13 887Z quot  fill  quot  142312 quot   gt  lt path d  quot M655 107 3177 263c-1 684 0-3 471 9-3 471 3 8 0 3 1 766 3 8 3 471 3 8 1 745 0 3 49- 9 3 49-3 8C658 6 3178 186 656 851 3177 263 655 107 3177 263Zm0 6 139c- 884 0-1 438- 514-1 438-2 34 0-1 972 617-2 381 1 438-2 381 862 0 1 437 349 1 437 2 381 0 1 909- 616 2 34-1 437 2 34Z quot  fill  quot  142312 quot   gt  lt path d  quot M656 263 3159 023l-1 49-14 063a1 35 1 35 0 0 0  329- 293 1 319 1 319 0 0 0  268-1 123l- 753-3 49a1 328 1 328 0 0 0-1 306-1 054h-6 448a1 336 1 336 0 0 0-1 311 1 068l- 71 3 493a1 344 1 344 0 0 0  276 1 112 1 532 1 532 0 0 0  283 262l-1 489 14 087c-1 7 1 727-4 153 4 871-4 153 8 638v28 924a1 339 1 339 0 0 0 1 168 1 49 1 357 1 357 0 0 0  17 01h17 981a1 366 1 366 0 0 0 1 337-1 366v-29 059C660 414 3163 893 657 963 3160 749 656 263 3159 023Zm-8 307-17 349h4 274l 176 815H647 79Zm9 785 43 634v10 1H642 434v-17 253a4 728 4 728 0 0 1-2 028-4 284 4 661 4 661 0 0 1 2 028-4 215v-2c0-3 162 2 581-5 986 3 687-7 059a1 356 1 356 0 0 0  4- 819l1 542-14 614H652 1l1 545 14 618a1 362 1 362 0 0 0  4 819c1 109 1 072 3 688 3 9 3 688 7 059v9 153a5 457 5 457 0 0 1 0 8 5Z quot  fill  quot  142312 quot   gt  lt  g gt  lt  svg gt   This worked for me

User · Answer

Simple    You can use this code    lt svg class  logo  gt     lt use xlink href        static icons logo svg Capa 1  gt  lt  use gt   lt  svg gt    First specify the path of svg and then write it s ID  In this case  Capa 1   You can get the ID of svg by opening it in any editor   In css     logo     fill  red

User · Answer

Why not create a webfont with your svg image or images  import the webfont in the css and then just change the color of the glyph using the css color attribute  No javascript needed

User · Answer

2018  If you want a dynamic color  do not want to use javascript and do not want an inline SVG  use a CSS variable  Works in Chrome  Firefox and Safari  edit  and Edge   lt svg gt       lt use xlink href  logo svg  style  --color fill   000   gt  lt  use gt   lt  svg gt    In your SVG  replace any instances of style  fill   000  with style  fill  var --color fill

User · Answer

for that matters you have to use your SVG as an inline HTML  say here s your logo svg code  when you open it on textEditor   Logo SVG  lt svg width  quot 139 quot  height  quot 100 quot  xmlns  quot http   www w3 org 2000 svg quot  gt       lt  -- Note that I ve Added Class Attribute  logo-img  Here -- gt       lt g transform  quot translate -22 -45  quot  fill  quot none quot  fill-rule  quot evenodd quot  gt           lt path             d  quot M158 023 48 118a7 625 7 625 0 01- 266 10 78l-88 11 83 875a7 625 7 625 0 01-10 995- 5l-33 89-38 712a7 625 7 625 0 0111 475-10 045l28 653 32 73 82 353-78 394a7 625 7 625 0 0110 78 266z quot              fill  quot  00000 quot    gt       lt  g gt   lt  svg gt   add your desired Class ID to it  i ve added  logo-img    Edited Svg  lt svg class  quot logo-img quot  width  quot 139 quot  height  quot 100 quot  xmlns  quot http   www w3 org 2000 svg quot  gt       lt  -- Note that I ve Added Class Attribute  logo-img  Here -- gt           lt  svg gt   Now apply Your Css Rules  CSS  logo-img path      fill   000     Pro  With this way you can animate on user s actions  hover  selected       Con  Your HTML File would be a mess   Heres a Stack Snippet  x000D   x000D   lt style gt          body               display  flex              justify-content  center                     logo-img path               transition   5s all linear                     logo-img path               fill  coral                     logo-img hover path              fill  darkblue                          lt  style gt  x000D   lt  DOCTYPE html gt   lt html lang  en  gt    lt head gt       lt meta charset  UTF-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt title gt Document lt  title gt        lt  head gt    lt body gt       lt svg class  logo-img  width  139  height  100  xmlns  http   www w3 org 2000 svg  gt           lt  -- Note that I ve Added Class Attribute  logo-img  Here -- gt           lt g transform  translate -22 -45   fill  none  fill-rule  evenodd  gt               lt path                 d  M158 023 48 118a7 625 7 625 0 01- 266 10 78l-88 11 83 875a7 625 7 625 0 01-10 995- 5l-33 89-38 712a7 625 7 625 0 0111 475-10 045l28 653 32 73 82 353-78 394a7 625 7 625 0 0110 78 266z                  fill   00000    gt           lt  g gt       lt  svg gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

open the svg icon in your code editor and add a class after the path tag    lt path class colorToChange        You can add class to svg and change the color like this   codepen

User · Answer

The answer from  Praveen is solid   I couldn t get it to respond in my work  so I made a jquery hover function for it    CSS   svg path      transition 0 3s all  important      JS   JQuery     code from above wrapped into a function replaceSVG        hover function    hover over an element  and find the SVG that you want to change     element   hover function         var el     this       var svg   el find  svg path        svg attr  fill     CCC       function         var el     this       var svg   el find  svg path        svg attr  fill     3A3A3A

[css] img src SVG changing the styles with CSS

Examples related to css

Examples related to image

Examples related to svg