Can I change the fill color of an svg path with CSS

Question

I have the following code      lt span gt        lt svg height  32  version  1 1  width  32  xmlns  http   www w3 org 2000 svg  style  overflow  hidden  position  relative  left  -0 0166626px  top  -0 983337px   gt           lt desc gt  lt  desc gt           lt defs  gt           lt path style    fill   333333  stroke  none  d  M15 985 5 972C8 422 5 972 2 289999999999999 10 049 2 289999999999999 15 078C2 289999999999999 17 955 4 302999999999999               1 27 68 22 274Z   gt         lt  svg gt  amp nbsp     lt  span gt    Is it possible to change the fill color of the SVG path with CSS or some other means without actually changing it inside the path tag

User · Answer

I came across an amazing resource on css-tricks: https://css-tricks.com/using-svg/

There are a handful of solutions explained there.

I preferred the one that required minimal edits to the source svg, and also didn't require it to be embedded into the html document. This option utilizes the <object> tag.

Add the svg file into your html using <object>; I also declared html attributes width and height. Using these width and heights the svg document does not get scaled, I worked around that using a css transform: scale(...) statement for the svg tag in my associated svg css file.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Create a css file to attach to your svn document. My source svg path was scaled to 16px, I upscaled it to 64 with a factor of four. It only had one path so I did not need to select it more specifically, however the path had a fill attribute so I had to use !IMPORTANT to force the css to take precedent.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Edit your target svg file, before the opening <svg tag, to include a stylesheet; Note that the href is relative to the svg file url.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

User · Answer

you put this css for svg circle      svg hover circle      fill   F6831D      stroke-dashoffset  0      stroke-dasharray  700      stroke-width  2

User · Answer

if you want to change color by hovering in the element  try this   path hover    fill red

User · Answer

If you go into the source code of an SVG file you can change the color fill by modifying the fill property    lt svg fill   3F6078  height  24  viewBox  0 0 24 24  width  24  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt   lt  svg gt     Use your favorite text editor  open the SVG file and play around with it

User · Answer

You can use this syntax but it will require some changes in the SVG file  And remove any fill stroke from the SVG itself   icon svg   lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  version  1 1  gt   lt  -- use symbol instead of defs and g     must add viewBox on symbol just copy yhe viewbox from the svg tag itself   must add id on symbol -- gt   lt symbol id  location  viewBox  0 0 430 114 430 114  gt     lt  -- add all the icon s paths and shapes here -- gt     lt path d  M356 208 107 051c-1 531-5 738-4 64-11 852-6 94-17 205C321 746 23 704 261 611 0 213 055 0   C148 054 0 76 463 43 586 66 905 133 427v18 355c0 0 766 0 264 7 647 0 639 11 089c5 358 42 816 39 143 88 32 64 375 131 136   c27 146 45 873 55 314 90 999 83 221 136 106c17 208-29 436 34 354-59 259 51 17-87 933c4 583-8 415 9 903-16 825 14 491-24 857   c3 058-5 348 8 9-10 696 11 569-15 672c27 145-49 699 70 838-99 782 70 838-149 104v-20 262   C363 209 126 938 356 581 108 204 356 208 107 051z M214 245 199 193c-19 107 0-40 021-9 554-50 344-35 939   c-1 538-4 2-1 414-12 617-1 414-13 388v-11 852c0-33 636 28 56-48 932 53 406-48 932c30 588 0 54 245 24 472 54 245 55 06   C270 138 174 729 244 833 199 193 214 245 199 193z   gt   lt  symbol gt    icon html   lt svg gt  lt use xlink href  file path location svg location  gt  lt  use gt  lt  svg gt

User · Answer

It s possible to change the path fill color of the svg  See below for the CSS snippet    To apply the color for all the path  svg  gt  path  fill  red   To apply for the first d path  svg  gt  path nth-of-type 1   fill  green   To apply for the second d path  svg  gt  path nth-of-type 2   fill  green  To apply for the different d path  change only the path number   svg  gt  path nth-of-type   path number    fill  green  To support the CSS in Angular 2 to 8  use the encapsulation concept     host  ng-deep svg path nth-of-type 1           fill red

User · Answer

Put in all your svg   fill  var --svgcolor       In Css    root     --svgcolor  tomato      To use pseudo-classes   span github hover     --svgcolor aquamarine        Explanation  root   html page   --svgcolor   a variable   span github   selecting a span element with a class github  a svg icon inside and assigning pseudo-class hover

User · Answer

Yes  you can apply CSS to SVG  but you need to match the element  just as when styling HTML   If you just want to apply it to all SVG paths  you could use  for example    path       fill  blue       External CSS appears to override the path s fill attribute  at least in WebKit and Gecko-based browsers I tested   Of course  if you write  say   lt path style  fill  green  gt  then that will override external CSS as well

[css] Can I change the fill color of an svg path with CSS?

Examples related to css

Examples related to svg