gatsby image svg not found

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


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

Tags:

Svg

Gatsby