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\" }) {
                  


        

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 
  }

Credit goes to andresmrm on GitHub.