Svg Fill Color Not Working with Hex Colors

svg fill color not working with hex colors

# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character.

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

You can find it all well explained on following link: https://codepen.io/gunnarbittersmann/pen/BoovjR

SVG Fill Color Not Working

you can just add !important beside fill

.logo-wrapper svg {
  width: 300px;
}

.logo-wrapper svg path{
  fill: green !important;
}
.logo-wrapper svg text{
  fill: green !important;
}

This is the Fiddle

How to use a hex value for SVG in FireFox

The character # is reserved in URLs as the start of a fragment identifier. You must encode this as %23 for the URL to be valid. This is not a Firefox bug.

Alternatively you could encode the whole string using base64.

Why hexadecimal color don't work with utf8 data URL’s for SVG

You would want to use encodeURIComponent() so there is not a parse issue:

document.getElementById('imgBase64').src = 'data:image/svg+xml;utf8,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><defs><style>.roundShape{fill:#26a7fd;}</style></defs><circle cx="50" cy="50" r="40" class="roundShape" /></svg>');

<img id='imgBase64' />

Why do my SVG icons with viewBox and hex encoded colors fail to render when used as '.src' for javascript Image()

So it turns out that encoding the # in the hex color as %23 made things worse, and the b64 encoded icon no longer showed. And anyway, I am not using the data-url as a url() in .css where I understood it might be seen as a selector.

It was also suggested that using codepen would solve the issue. This also did not work, since codepen escapes the colors and even the angle brackets, something which should not be needed for .svg used in this way.

So the problem turned out to be the solo use of 'viewBox'. Which worked fine on another platform where these icons were taken from, but not in javascript when used as a Image().src property.

Anyway with the 'viewBox' replaced with 'width' and 'height' properties, the icons now display, including the using of the hex encoded colors, in the original base64 encoded format.

I hope that helps someone else, or maybe my future self when I trip over the same problem again :)

var img3 = new Image();
img3.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cmVjdCBmaWxsPSIjRkYyNjAwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz48cGF0aCBmaWxsPSIjRkFGQUZBIiBkPSJNMCw4IDgsOCA4LC0wIDEyLC0wIDEyLDEyIDAsMTIgWiIvPjxwYXRoIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZD0iTTEuNSwxLjUgMTcuNSwxNy41Ii8+PC9zdmc+";
ctx.drawImage(img3, 74, 10);

[update] I tested with latest firefox 78.3.0.esr and see similar behaviour. I also tested my icons in as CSS url() backgrounds, and they work fine with the original format of viewBox (no width & height) and hex colours when encoded as base64. So it seems like the processing via an Image().src is different.

[update2] as pointed out below, I should be using an onload callback even for b64 encoded images since not all browsers make the image available immediately.

safe way to access data url image

How to modify the fill color of an SVG image when being served as background image?

I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.

LESS mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

LESS usage:

.element-color(#fff);

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS usage:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.

SVG issue with Glide using Shorthand Hexadecimal Colors

You are probably using AndroidSVG for the SVG rendering. At least that's what the Glide example uses.
Make sure you are using AndroidSVG 1.3 or later. There was a bug in v1.2 with three-digit colour parsing.

http://bigbadaboom.github.io/androidsvg/release-1.3.html