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

Answer 2

Don't know if this helps, but If you are looking for a generic and dynamic Image component that takes a custom file name and acts accordingly I've put together this:

This approach considers that you have an images folder inside your src folder where you have all your images.

const Image = ({ filename, alt }) => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {

      // Handles SVG extension
      const extension = filename.match(/[^\\]*\.(\w+)$/)[1]
      if (extension === "svg") {
        return <img src={require(`../images/${filename}`)} alt={alt}/>
      }

      // Finds your image among all
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(filename)
      })

      if (!image) {
        return null
      }
      return (
        <Img alt={alt} fluid={image.node.childImageSharp.fluid}/>
      )
    }}
  />
)

Be careful that this is not optimized and queries for all of your images. If you are trying to optimize performance in every way possible this isn't the best way to go.

Answer 3

"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 4

I know this is an old question with accepted answer but I thought I might add another solution for others' benefit. I found this solution at: https://github.com/gatsbyjs/gatsby/issues/10297

import yourSVG from './logo_large.svg'

const Home = () => <><img src={yourSVG} /></>