Use gatsby-image's tracedSVG as the actual picture

Question

TL;DR: Is it possible to use Gatsby's rendered tracedSVG from childImageSharp as the actual picture on your website?

Long version:

So, I was working on a small website for my recital with Gatsby earlier today and while I was hosting it on my machine the pictures load just fine, but when I deployed the project to Github Pages, the image files failed to load, only the tracedSVG placeholders loaded.

Now I am sure there is a solution for this; I haven't yet looked into that. The thing is, I kinda like how those artsy tracedSVGs look on my website, and I want to keep them. I can of course, just leave it as is, but if there is a proper and more elegant way of doing this, I'd love to know.

I tried

fluid 
{            
    tracedSVG  
}

instead of

fluid
{
   ...GatsbyImageSharpFluid_tracedSVG
}

in the js file and the images and the placeholders failed to load.

Answer 1

Is it possible to use Gatsby's rendered tracedSVG from childImageSharp as the actual picture on your website?

Short answer: yes, you can. Your query should look like this:

export const query = graphql`
  query {
    file(relativePath: { eq: "/path/to/your/traced/svg/traced.svg" }) {
      childImageSharp {
        fluid(width: 125, height: 125) {
          ...GatsbyImageSharpFluid_tracedSVG        
        }
      }
    }
  }
`

Then, use your gatsby-image:

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.file.childImageSharp.fluid} />
  </div>
)