SVG displaying colours strange on web

[toolman]

Hi,

I have inserted an image as an SVG, but some of the colours are appearing strange. The green background is a CSS background, but the other colours are not appearing correctly.

This is the original:

and this is how it looks on the web:

I am using the following HTML to insert the image:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/people.svg" class="img-fluid" />

Does anone have any ideas why this would be?

I’m also getting the same issue when adding the image as a background image via CSS.

Thanks

[coothead]

Hi there toolman,

as requested in other threads of yours,
please supply everything that would be
required to replicate your problem. In
this case it would appear to be HTML,
CSS and SVG code.

coothead

[toolman]

Hi,

I don’t have SVG code - I am just inserting it as an image saved as a .svg. Should I be inserting it a different way?

The CSS/HTML is just a div with the image:

<div class="text-center">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/people.svg" class="img-fluid" />
</div>

[coothead]

Hi there toolman,

we need to see the people.svg file or it’s
contents and the CSS that is applicable to …

class="text-center" and
class="img-fluid"

coothead

[John_Betong]

Try adding this to the SVG:

svg {
  fill: currentColor;
}

Cascading SVG Fill Color | CSS-Tricks