How to change the color of an svg element

Question

I want to use this technique and change the SVG color, but so far I haven't been able to do so. I put this in the CSS, but my image is always black, no matter what.

My code:

_x000D_

.change-my-color {
  fill: green;
}

_x000D_

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

_x000D_

User · Answer

Actually  there is a quite more flexible solution to this problem  writing a Web Component which will patch SVG as text in runtime  Also published in gist with a link to JSFiddle      filter  invert 42   sepia 93   saturate 1352   hue-rotate 87deg  brightness 119   contrast 119       lt html gt    lt head gt     lt title gt SVG with color lt  title gt   lt  head gt    lt body gt     lt script gt       function            const createSvg    color     ff9933     gt               lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  version  1 1  width  76px  height  22px  viewBox  -0 5 -0 5 76 22  gt               lt defs  gt                 lt g gt                   lt ellipse cx  5  cy  10  rx  5  ry  5  fill   ff9933  stroke  none  pointer-events  all   gt                   lt ellipse cx  70  cy  10  rx  5  ry  5  fill   ff9933  stroke  none  pointer-events  all   gt                   lt path d  M 9 47 12 24 L 17 24 16 12 Q 25 20 30 13 L 32 5 9 5 Q 35 6 40 9 L 42 5 10 5 Q 45 12 50 6 L 52 5 3 Q 55 0 60 73 3 23 L 66 46 6 46  fill  none  stroke   ff9933  stroke-miterlimit  10  pointer-events  stroke   gt                 lt  g gt             lt  svg gt   split   ff9933   join color          function SvgWithColor             const div   Reflect construct HTMLElement      SvgWithColor           const color   div hasAttribute  color     div getAttribute  color      cyan           div innerHTML   createSvg color           return div                 SvgWithColor prototype   Object create HTMLElement prototype         customElements define  svg-with-color   SvgWithColor          document body innerHTML      lt svg-with-color         color  magenta          gt  lt  svg-with-color gt                   lt  script gt   lt  body gt    lt  html gt

User · Answer

if you want to change the color dynamically   Open de svg in a code editor Add or rewrite the attribute of fill of every path to fill  quot currentColor quot  Now  that svg will take the color of your font color so you can do something like   svg       color    quot red quot

User · Answer

SVG mask on a box element with a background color will result   x000D   x000D  body  overflow hidden      icon     --size  70px    display  inline-block    width  var --size     height  var --size     transition   12s       -webkit-mask-size  cover    mask-size  cover      icon-bike     background  black    animation  4s frames infinite linear       -webkit-mask-image  url https   image flaticon com icons svg 89 89139 svg     mask-image  url https   image flaticon com icons svg 89 89139 svg       keyframes frames     0    transform translatex 100vw      25    background  red      75    background  lime      100    transform translatex -100       x000D   lt i class  icon icon-bike  style  --size 150px  gt  lt  i gt  x000D   x000D   x000D    Note - SVG masks are not supported in Internet Explorer browsers

User · Answer

shortest Bootstrap-compatible way  no JavaScript    cameraicon   height  1 6em    set your own icon size    mask  url  camera svg      path to your image    -webkit-mask  url  camera svg  no-repeat center      and use it like    lt td class  text-center  gt       lt div class  bg-secondary cameraicon   gt  lt  --  bg-secondary  sets actual color of your icon -- gt   lt  td gt

User · Answer

If you want to use css to change the colour  you could also use an online tool like this one  https   change-svg-color vercel app

User · Answer

Target the path within the svg    lt svg gt      lt path gt       lt  svg gt    You can do inline  like    lt path fill   ccc  gt    Or  svg     path          fill   ccc

User · Answer

here the fast amp furious way     x000D   x000D   body   background-color   deff05        svg     width  30       height  auto        svg path       color red      fill  currentcolor    x000D   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  id  Capa 1  x  0px  y  0px  viewBox  0 0 514 666 514 666  gt  lt path d  M514 666 210 489L257 333 99 353L0 210 489l45 933 19 837v123 939h30V243 282l33 052 14 274v107 678l4 807 4 453  c2 011 1 862 50 328 45 625 143 542 45 625c93 213 0 141 53-43 763 143 541-45 626l4 807-4 452V257 557L514 666 210 489z   M257 333 132 031L439 210 489l-181 667 78 458L75 666 210 489L257 333 132 031z M375 681 351 432  c-13 205 9 572-53 167 33 881-118 348 33 881c-65 23 0-105 203-24 345-118 348-33 875v-80 925l118 348 51 112l118 348-51 111  V351 432z  gt  lt  path gt  lt  svg gt  x000D   x000D   x000D

User · Answer

2020 answer  CSS Filter works on all current browsers  To change any SVGs color   Add the SVG image using an  lt img gt  tag     lt img src  dotted-arrow svg  class  filter-green   gt     To filter to a specific color  use the following Codepen Click Here to open codepen  to convert a hex color code to a CSS filter     For example  output for  00EE00 is   filter  invert 42   sepia 93   saturate 1352   hue-rotate 87deg  brightness 119   contrast 119       Add the CSS filter into this class         filter-green          filter  invert 48   sepia 79   saturate 2476   hue-rotate 86deg  brightness 118   contrast 119

User · Answer

A good approach is to use a mixin to control stroke colour and fill colour. My svgs are used as icons.

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

You can then do the following in your scss:

.container {
    @include icon(white, blue);
}

User · Answer

Method 1  The easy and effect way open your  svg file with any text editor  lt svg version  quot 1 1 quot  id  quot Capa 1 quot  xmlns  quot http   www w3 org 2000 svg quot      xmlns xlink  quot http   www w3 org 1999 xlink quot  x  quot 0px quot  y  quot 0px quot     viewBox  quot 0 0 477 526 477 526 quot  style  quot enable-background new 0 0 477 526 477 526      fill  rgb 109  248  248   quot  xml space  quot preserve quot  gt    lt svg   gt   give an style attribute and fill that with color  Another way  fill with color in your shape here i have rect shape fill  quot white  lt svg width  quot 800 quot  height  quot 600 quot  xmlns  quot http   www w3 org 2000 svg quot  gt         lt g gt             lt title gt background lt  title gt             lt rect fill  quot  fff quot  id  quot canvas background quot  height  quot 602 quot  width  quot 802 quot  y  quot -1 quot              x  quot -1 quot   gt              lt g display  quot none quot  overflow  quot visible quot  y  quot 0 quot  x  quot 0 quot  height  quot 100  quot  width  quot 100  quot              id  quot canvasGrid quot  gt                 lt rect fill  quot url  gridpattern  quot  stroke-width  quot 0 quot  y  quot 0 quot  x  quot 0 quot  height  quot 100  quot                 width  quot 100  quot   gt              lt  g gt          lt  g gt   lt  svg gt

User · Answer

If you want to do this to an inline svg that is, for example, a background image in your css:

_x000D_

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

_x000D_

of course, replace the ... with your inline image code

User · Answer

To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor. The code may look like the below code

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <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">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

You can observe that there are some XML tags like path, circle, polygon etc. There you can add your own color with help of style attribute. Look at the below example

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Add the style attribute to all the tags so that you can get your SVG of your required color

User · Answer

For Example  in your HTML    lt body gt     lt svg viewBox    width    height    gt       lt path id  struct1  fill   xxxxxx  d  M203 3 71 6c-            gt  lt  path gt     lt  svg gt   lt  body gt    Use jQuery       struct1   css  fill    lt desired colour gt

User · Answer

You can try with filter hack   colorize-pink     filter  brightness 0 5  sepia 1  hue-rotate -70deg  saturate 5       colorize-navy     filter  brightness 0 2  sepia 1  hue-rotate 180deg  saturate 5       colorize-blue     filter  brightness 0 5  sepia 1  hue-rotate 140deg  saturate 6

User · Answer

Open your image using a browser   right-click on the image click on view page source and you will see the svg tag of the image  Cope and paste into your html  then change the fill to the colour of your choice

User · Answer

the easiest way would be to create a font out of the SVG using a service like https://icomoon.io/app/#/select or such. upload your SVG, click "generate font", include font files and css into your side and just use and style it like any other text. I always use it like this because it makes styling much easier.

EDIT: As mentioned in the article commented by @CodeMouse92 icon fonts mess up screen readers (and are possibly bad for SEO). So rather stick to the SVGs.

User · Answer

Added a test page - to color SVG via Filter settings:

E.G filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Color your SVG - Jsfiddle

Took the idea from: https://blog.union.io/code/2017/08/10/img-svg-fill/

User · Answer

You can t change the color of an image that way  If you load SVG as an image  you can t change how it is displayed using CSS or Javascript in the browser   If you want to change your SVG image  you have to load it using  lt object gt    lt iframe gt  or using  lt svg gt  inline   If you want to use the techniques in the page  you need the Modernizr library  where you can check for SVG support and conditionally display or not a fallback image  You can then inline your SVG and apply the styles you need   See     x000D   x000D   time-3-icon   x000D     fill  green  x000D    x000D   x000D   my-svg-alternate   x000D    display  none  x000D    x000D   no-svg  my-svg-alternate   x000D    display  block  x000D    width  100px  x000D    height  100px  x000D    background-image  url image png   x000D    x000D   lt svg width  96px  height  96px  viewBox  0 0 512 512  enable-background  new 0 0 512 512  xml space  preserve  gt  x000D   lt path id  time-3-icon  d  M256 50C142 229 50 50 142 229 50 256c0 113 77 92 229 206 206 206c113 77 0 206-92 23 206-206 x000D   C462 142 229 369 77 50 256 50z M256 417c-88 977 0-161-72 008-161-161c0-88 979 72 008-161 161-161c88 977 0 161 72 007 161 161 x000D   C417 344 977 344 992 417 256 417z M382 816 265 785c1 711 0 297 2 961 1 781 2 961 3 518v0 093c0 1 72-1 223 3 188-2 914 3 505 x000D   c-37 093 6 938-124 97 21 35-134 613 21 35c-13 808 0-25-11 192-25-25c0-9 832 14 79-104 675 21 618-143 081 x000D   c0 274-1 542 1 615-2 669 3 181-2 669h0 008c1 709 0 3 164 1 243 3 431 2 932l18 933 119 904L382 816 265 785z   gt  x000D   lt  svg gt  x000D   x000D   lt image class  my-svg-alternate  width  96  height  96  src  ppngfallback png    gt  x000D   x000D   x000D    You can inline your SVG  tag your fallback image with a class name  my-svg-alternate     lt svg width  96px  height  96px  viewBox  0 0 512 512  enable-background  new 0 0 512 512  xml space  preserve  gt   lt path id  time-3-icon       gt   lt  svg gt    lt image class  my-svg-alternate  width  96  height  96  src  ppngfallback png    gt    And in CSS use the no-svg class from Modernizr  CDN  http   ajax aspnetcdn com ajax modernizr modernizr-2 7 2 js   to check for SVG support  If there is no SVG support the SVG block will be ignored and the image will be displayed  otherwise the image will be removed from the DOM tree  display  none     my-svg-alternate     display  none     no-svg  my-svg-alternate     display  block    width  100px    height  100px    background-image  url image png       Then you can change the color of your inlined element    time-3-icon      fill  green

User · Answer

Simply add fill  desiredColor  in the svg tag of the image  example    lt svg xmlns  http   www w3 org 2000 svg  width  24  height  24  viewBox  0 0 24 24  fill   bbb9c6  gt   lt path d  M20 2H4c-1 1 0-1 99 9-1 99 2L2 22l4-4h14c1 1 0 2- 9 2-2V4c0-1 1- 9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z   gt  lt path d  M0 0h24v24H0z  fill  none   gt  lt  svg gt

User · Answer

To change color of SVG element I have found out a way while inspecting Google search box search icon below:

_x000D_

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}

_x000D_

<span class="search_icon">
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>

_x000D_

I have used span element with "display:inline-block", height, width and setting a particular style "color: red; fill: currentColor;" to that span tag which is inherited by the child svg element.

User · Answer

Only SVG with path information  you can t do that to the image   as the path you can change stroke and fill information and you are done  like Illustrator  so  via CSS you can overwrite path fill value  path   fill  orange      but if you want more flexible way as you want to change it with a text when having some hovering effect going on   use   path   fill  currentcolor       x000D   x000D  body   x000D    background   ddd  x000D    text-align  center  x000D    padding-top  2em  x000D    x000D   x000D   parent   x000D    width  320px  x000D    height  50px  x000D    display  block  x000D    transition  all 0 3s  x000D    cursor  pointer  x000D    padding  12px  x000D    box-sizing  border-box  x000D    x000D   x000D        desired colors for children       x000D   parent  x000D    color   000  x000D    background   def  x000D    x000D   parent hover  x000D    color   fff  x000D    background   85c1fc  x000D    x000D   x000D   parent span  x000D    font-size  18px  x000D    margin-right  8px  x000D    font-weight  bold  x000D    font-family   Helvetica   x000D    line-height  26px  x000D    vertical-align  top  x000D    x000D   parent svg  x000D    max-height  26px  x000D    width  auto  x000D    display  inline  x000D    x000D   x000D         magic trick         x000D   parent svg path  x000D    fill  currentcolor  x000D    x000D   lt div class  parent  gt  x000D     lt span gt TEXT WITH SVG lt  span gt  x000D     lt svg version  1 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  width  128  height  128  viewBox  0 0 32 32  gt  x000D   lt path d  M30 148 5 588c-2 934-3 42-7 288-5 588-12 148-5 588-8 837 0-16 7 163-16 16s7 163 16 16 16c4 86 0 9 213-2 167 12 148-5 588l-10 148-10 412 10 148-10 412zM22 3 769c1 232 0 2 231 0 999 2 231 2 231s-0 999 2 231-2 231 2 231-2 231-0 999-2 231-2 231c0-1 232 0 999-2 231 2 231-2 231z  gt  lt  path gt  x000D   lt  svg gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To simply change the color of the svg    Go to the svg file and under styles  mention the color in fill    lt style gt  cls-1 fill  FFFFFF   lt  style gt

User · Answer

Use an svg  lt mask gt  element  This works in IE too  Bonus  color is inherited from font-color  so easy to use alongside text   x000D   x000D   lt svg style  color  green  width  96px  height  96px  viewBox  0 0 100 100  preserveAspectRatio  none  gt     lt defs gt       lt mask id  fillMask  x  0  y  0  width  100  height  100  gt         lt image xlink href  https   svgur com i AFM svg  x  0  y  0  width  100  height  100  src  ppngfallback png    gt       lt  mask gt     lt  defs gt     lt rect x  0  y  0  width  100  height  100  style  stroke  none  fill  currentColor  mask  url  amp quot  fillMask amp quot      gt   lt  svg gt  x000D   x000D   x000D   https   jsfiddle net jamiegl 5jaL0s1t 19

User · Answer

You can change SVG coloring with css if you use some tricks. I wrote a small script for that.

go through a list of elements which do have an svg image
load the svg file as xml
fetch only svg part
change color of path
replace src with the modified svg as inline image

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

the code above might not be working correctly, I've implemented this for elements with an svg background image which works nearly similar to this. But anyway you have to modify this script to fit your case. hope it helped.

[css] How to change the color of an svg element?

The answer is

SVG mask on a box element with a background color will result:

To change any SVGs color

Examples related to css

Examples related to svg

Tags