Why does my SVG image fade in when the page loads?

user_19660145 0
Viewed 25

I added a GitHub icon in SVG format on my homepage. Link here.

And whenever the page loads, the SVG image would "fade-in".

I used the StaticImage component from gatsby-plugin-image, and the .svg file is stored locally. Also, note that I have used css filter to invert the color of the .svg file since I'm using a dark background.

<StaticImage alt="GitHub" src="../images/github-brands.svg" className={layoutStyles.icon}/>

How can I get rid of the "fade-in" effect? Or at least make it transparent?

gatsby-image gatsby svg
1 Answers

It's the placeholder property, which by default is set as blurred. You can change it easily by:

<StaticImage 
   alt="GitHub" 
   src="../images/github-brands.svg" 
   className={layoutStyles.icon}
   placeholder="none"
 />

It can take the following values:

  • dominantColor
  • tracedSVG
  • blurred
  • none
user_55853710
Related