gatsby image svg not found

Question

When trying to load an SVG image this way:

export const query = graphql`
    query {
        fileName: file(relativePath: { eq: "logo_large.svg" }) {
            childImageSharp {
                fluid(maxWidth: 1060) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
            }
        }
    }
`

I get TypeError: Cannot read property 'childImageSharp' of null

If I try the exact same but with a .jpg or .png image, it works, so the relative path must be correct. Any thing I should have in special consideration with SVG's?

Answer 1

"SVG are not supported by this plugin for obvious reasons, they are vectorial and automatically adjust their size without the need of plugin like this one"

Correct. If you want to handle multiple types like png + jpg + svg you have to dynamically handle it with gatsby-image or not. You solve this by adding extension and publicURL in your GraphQL query:

  ...
  image {
    childImageSharp {
      fluid(maxWidth: 500, quality: 92) {
        ...GatsbyImageSharpFluid
      }
    }
    extension
    publicURL
  }
  ...

Add this to your image component:

  // svg support
  if (!childImageSharp && extension === 'svg') {
    return <img style={imageStyle} src={publicURL} alt={alt} />
  }

Credit goes to andresmrm on GitHub.

Answer 2

SVG are not supported by this plugin for obvious reasons, they are vectorial and automatically adjust their size without the need of plugin like this one