gatsby image svg not found - svg

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

Answer 3

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} /></>

Answer 4

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.