gatsby image plugin SVG

[Orlandohub]

Summary

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?

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    Yarn: 1.12.3 - ~/.yarn/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.11.1/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 62.0.2
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.29 => 2.0.61 
    gatsby-image: ^2.0.20 => 2.0.22 
    gatsby-link: ^2.0.4 => 2.0.7 
    gatsby-plugin-emotion: ^2.0.5 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.11 
    gatsby-plugin-netlify: ^2.0.5 => 2.0.6 
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-sharp: ^2.0.12 => 2.0.14 
    gatsby-source-filesystem: ^2.0.8 => 2.0.10 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
    gatsby-v2-plugin-page-transitions: 1.0.0 => 1.0.0 
  npmGlobalPackages:
    gatsby-cli: 2.4.3

[LekoArts]

Hi Orlando 👋 gatsby-plugin-sharp / gatsby-image doesn't handle SVGs or GIFs. The fluid query (in your case) creates multiple images from 0px to 1060px (+ bigger sizes for retina). That wouldn't make sense with SVGs as they're vector files and don't need different sizes - they can scale indefinitely without loss of quality.

If you want to use your svg you, e.g. could import / use it like:

import yourSVG from './logo_large.svg'

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

I'm closing this issue as answered. If you have further questions, please reply.

[Orlandohub]

@LekoArts Thank you so much for your quick response!

[zslabs]

@LekoArts For fields that may have a combination of JPGs/PNGs and SVGs; it'd be super helpful if what was passed down to something like the original { src } attribute could be that same image; even if no transformations happened on SVGs. Has that ever been discussed?

[andresmrm]

Had the same problem with a field that can be PNG, JPG and SVG. Solved it adding extension and publicURL in my query:

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

And then, in the PreviewCompatibleImage, adding something like:

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

[zslabs]

@andresmrm Great idea, thanks!