title: SVGs are showing inverted colors in Safari and Chrome
body: <p>I am building out a knowledge base at work using Docusaurus. I've uploaded some SVGs to the main page, but Safari will view the Office Logo SVG incorrectly but the Ministry Platform logo correctly.</p>
  <p>Chrome switches the two. It displays Office correctly, but the Ministry Platform logo is incorrect.</p>
  <p><a href="https://i.stack.imgur.com/VFnE8.png" rel="nofollow noreferrer">Safari Screenshot</a></p>
  <p>It's very strange. I'm not sure why Chrome and Safari show them differently. I don't know a lot about SVGs though.</p>
  <p>Here is the code for the React component:</p>
  <pre><code>    ```import React from 'react';
  import clsx from 'clsx';
  import styles from './HomepageFeatures.module.css';
  
  
  const FeatureList = [
    {
      title: 'About Perimeter',
      Svg: require('../../static/img/perlogonew.svg').default,
      description: (
        &lt;&gt;
          Get refreshed on our Values, Vision, and Mission.
        &lt;/&gt;
      ),
    },
    {
      title: 'Microsoft Office',
      Svg: require('../../static/img/officeicon.svg').default,
      description: (
        &lt;&gt;
          Learn more about Teams, Outlook, Planner, and ToDo.
        &lt;/&gt;
      ),
    },
    {
      title: 'Ministry Platform',
      Svg: require('../../static/img/mplogo.svg').default,
      description: (
        &lt;&gt;
          Learn more about how to use templates, groups, events, and more in Ministry Platform.
        &lt;/&gt;
      ),
    },
  ];
  
     function Feature({Svg, title, description}) {
    return (
      &lt;div className={clsx('col col--4')}&gt;
        &lt;div className=&quot;text--center&quot;&gt;
          &lt;Svg className={styles.featureSvg} alt={title} /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;text--center padding-horiz--md&quot;&gt;
          &lt;h3&gt;{title}&lt;/h3&gt;
          &lt;p&gt;{description}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default function HomepageFeatures() {
    return (
      &lt;section className={styles.features}&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            {FeatureList.map((props, idx) =&gt; (
              &lt;Feature key={idx} {...props} /&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
       );
      }
  </code></pre>