SVG support in gatsby-plugin-image and gatsby-transformer-sharp

[ChristineTham]

Is it possible to treat SVG as a "first class citizen" image type? Ie. ability to be queried in GraphQL using childImageSharp and gatsbyImageData and processed by GatsbyImage or StaticImage like raster image types (with options to convert to raster image types like PNG, WEBP etc.).

Use case: to be able to mix and match SVG with other types of images, for use as featured image in blog posts, etc.

I understand it's possible to display SVGs using img or inline them today. I also understand there are some security concerns with SVGs.

What I think might be a nice idea is to use SVG as a "source" file, but they are rasterised as part of image optimisation using gatsby-plugin-image, and also be used for social media card images (eg. og:image) - I understand Open Graph does not support SVG.

[mwskwong]

You realize SVG is a vector graphic and works COMPLETELY different from bitmap graphics right (JPG, PNG, etc)? Supporting SVG essentially means writing a new module from scratch.

Also, what's the point of using SVG with Gatsby Plugin Image? We serve different sizes of bitmap images so that smaller screens don't need to display a 4k image and wasted network bandwidth. But for SVGs, there are no files size differences for different sizes (or resolution for bitmaps, yet vector doesn't have "resolution"). No matter it is 4096x4096 or 128x128, the file size of the SVG file stills stays the same.

[ChristineTham]

You realize SVG is a vector graphic and works COMPLETELY different from bitmap graphics right (JPG, PNG, etc)? Supporting SVG essentially means writing a new module from scratch.

Yes, I understand what SVG is.

What I am proposing, in case my post was not clear, is that SVG is accepted as an image type in the childImageSharp query and can be converted to a rasterised format which can be resized, optimised etc. as per other types of images.

This is what I said in my original post. Evidently I was not clear enough:

What I think might be a nice idea is to use SVG as a "source" file, but they are rasterised as part of image optimisation using gatsby-plugin-image, and also be used for social media card images

I understand the sharp library accepts SVG and can convert to PNG (or other image formats) so I am hoping this is not about "writing a new module from scratch".

For reference, this page suggests SVG is accepted as an input format:

format: Name of decoder used to decompress image data e.g. jpeg, png, webp, gif, svg

and by default, SVG will be converted to PNG:

If no explicit format is set, the output format will match the input image, except GIF and SVG input which become PNG output.

Why rasterise SVG? As I mentioned before, currently Open Graph (and possibly schema.org as well) do not accept SVG, so any SVG used as the feature image of a blog post for example will need to have a rasterised version in the og:image tag.

From the perspective of someone writing a blog post (in Markdown for example), it will be nice if they can specify an SVG as a feature image rather than JPG or PNG for example, and for that to "just work" without any changes in the code.

Anyway, I am sorry if I have somehow offended you with this suggestion. It would be very useful to me.

[panzacoder]

I am extremely for this request, but would actually be ok if there was no processing done on svgs when used with Gatsby Image. All I want is for content editors to be able to drop in an SVG instead of jpg/png/webp and not cause the developer to do backflips.

I am totally ok if the gatsbyImageData that is created just looks like:

 {
   "images": {
   "sources":[ ],
      "fallback":{ "src":"https://your-image.svg", 
      "srcSet": "",
         "sizes":"(min-width: 800px) 800px, 100vw"
      }
   },
   "layout":"constrained",
   "width":800,
   "height":418
}

Or something like that. I don't need sharp to be able to process svgs. I just need GatsbyImage to not pretend like they don't exist. This would be really useful and make it to where I don't have to wrap a bunch of code around GatsbyImage to make sure SVGs display on the page.