CODEWITHSUNDEEP
htmlcsssvgfill
SeaBass
SeaBass

Reputation: 1764

How can I change the color of the check mark in this svg?

1) Is there a way to change the color of the checkmark in this svg?

2) Why is fill:rgb(71,131,48); working but fill:#478530; not?

3) If I want to create other symbols inside of the cloud, are there any tools out there to do that?

.icon {
	background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}
<svg class="icon"></svg>

Upvotes: 1

Views: 2286

Answers (2)

Temani Afif
Temani Afif

Reputation: 273010

And idea is to use another background as a bottom layer:

.icon {
  background: 
   url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:rgb(71,131,48);" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat,
   linear-gradient(red,red)50% 60%/50% 40% no-repeat;
  display:inline-block;
  width:150px;
  height:150px;
}
<svg class="icon"></svg>
<svg class="icon" style="width:100px;height:100px;"></svg>

Upvotes: 3

sol
sol

Reputation: 22949

You need to url encode the # symbol

Use fill: %23478530

.icon {
  background: url('data:image/svg+xml;utf8,<svg id="icon-cloud-check" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23478530;" d="M27.883 16.078c0.076-0.347 0.117-0.708 0.117-1.078 0-2.761-2.239-5-5-5-0.445 0-0.875 0.058-1.285 0.167-0.775-2.417-3.040-4.167-5.715-4.167-2.73 0-5.033 1.823-5.76 4.318-0.711-0.207-1.462-0.318-2.24-0.318-4.418 0-8 3.582-8 8s3.582 8 8 8h19c2.761 0 5-2.239 5-5 0-2.46-1.777-4.505-4.117-4.922zM13 24l-5-5 2-2 3 3 7-7 2 2-9 9z"></path></svg>') no-repeat;
}
<svg class="icon"></svg>

Upvotes: 1

Related Questions