SVG is displayed with wrong colors

Question

I have an SVG file that I import in my React web page. The problem is the SVG displayed has some of its colors wrong.

As you can see on the web page, there are 3 SVG. 2 of them are displayed with wrong colors. But the first one has original colors. Although the 3 SVG are imported and used exactly the same way.

In MyPage.jsx, I import them

import Hanshake from '../images/handshake.svg';
import Logistics from '../images/logistics.svg';
import Designer from '../images/designer.svg';

Then simply use it like this:

    <Col xs={24} md={8} className='about_illustration_text'>
      <Hanshake />
      Some text
    </Col>
    <Col xs={24} md={8} className='about_illustration_text'>
      <Logistics />
      Some text
    </Col>
    <Col xs={24} md={8} className='about_illustration_text'>
      <Designer />
      Some text
    </Col>

I didn't find any CSS conflicting.

What's wrong with those SVG ?

• First SVG codepen
• 2nd SVG codepen
• 3rd SVG codepen

Answer 1

There are conflicting CSS rules. Each SVG uses <linearGradient> definitions (look inside the <defs> sections), and they use the same Ids.

These Gradients get referenced by style attributes like this:

style="fill:url(#_Linear11);"

After inserting all SVG content into one page, there are multiple <linearGradient> elements with the same id as part of the same DOM. Ids must be unique throughout a page, or references will overwrite each other.

Answer 2

You are overwriting your fill styles with the fill:url(#_Linear1) rule (the #_Linear1 part). If you put 2 of that SVG in the same CodePen, you will see how they change its fill since they are conflicting. Things gets odd with 3 in the same file.

Change your url(#_Linear1) to a rgb plain color/background or use a unique identifier for each background element.