Traced SVG for gatsby-remark-images

[vojtechruz]

I am using Traced SVG option from gatsby-image for my non-article images and I love it.

However for my markdown images, there is only available blur-up effect, which means image loading is inconsistent. It would be nice to have traced svg also for gatsby-remark-images.

[pieh]

Hey @vojtechruz , You can create PR adding support for more options to markdown images. Relevant code is here - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js

[humphreybc]

@pieh If you could explain the required changes at a high level, that would be quite helpful. Then I could take a stab at this. I looked at the source for gatsby-image to see how traced SVGs are done there, and it seems to call image.tracedSVG, which comes from the Sharp processing library via gatsby-transformer-sharp, I think. Hopefully it's as simple as that for gatsby-remark-images. Would love to get some more detail from you.

[pieh]

@humphreybc In addition to importing and using sizes function from gatsby-plugin-sharp You would need to import traceSVG function, call it and adjust returned rawHTML to make use of result of traceSVG function.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[hackhat]

Hi there, any news about this?