Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gatsby image plugin SVG #10297

Closed
Orlandohub opened this issue Dec 5, 2018 · 5 comments
Closed

gatsby image plugin SVG #10297

Orlandohub opened this issue Dec 5, 2018 · 5 comments

Comments

@Orlandohub
Copy link

@Orlandohub Orlandohub commented Dec 5, 2018

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

This comment has been minimized.

Copy link
Contributor

@LekoArts LekoArts commented Dec 5, 2018

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.

@LekoArts LekoArts closed this Dec 5, 2018
@Orlandohub

This comment has been minimized.

Copy link
Author

@Orlandohub Orlandohub commented Dec 5, 2018

@LekoArts Thank you so much for your quick response!

@zslabs

This comment has been minimized.

Copy link
Member

@zslabs zslabs commented Feb 5, 2019

@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

This comment has been minimized.

Copy link

@andresmrm andresmrm commented Feb 18, 2019

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

This comment has been minimized.

Copy link
Member

@zslabs zslabs commented Feb 19, 2019

@andresmrm Great idea, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.