How to set a fill colour of an background/inline SVG?

Question

.icon {
  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
}

<div class='icon'></div>

How do I set the fill colour (using CSS) of an inline/background SVG?

https://css-tricks.com/using-svg/ You can't. It has to be in — Kristine, Oct 30 '15 at 11:51

score 0 · Answer 1 · answered Oct 30 '15 at 11:57

0

.icon {
  width: 20px; height: 20px;
  background-color: red;
 -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
   mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
}

answered Oct 30 '15 at 11:57

Fazil Abdulkhadar

1,091
5
11

See http://stackoverflow.com/a/33435726/368691 for a similar~ solution. – Gajus Oct 30 '15 at 12:18

How to set a fill colour of an background/inline SVG?

1 Answers1