How to display a svg image (hosted on cloudinary) with Next.js Image tag?

Question

I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.

My problem is that the SVG image doesn't display using Image tag from Next.js.

I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.

Answer 1

My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.

Answer 2

I know this is a bit old but stumbled across this post

I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely

Next Cloudinary: https://next-cloudinary.spacejelly.dev/

Given an asset cloudinary-logo-blue that's uploaded as an SVG:

<CldImage
  width="500"
  height="96"
  src="cloudinary-logo-blue"
  format="svg"
/>

Hope this helps!