Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
Get help on Slack

How to use the Sanity CDN to Transform SVG Images to Bitmap/PNG Images

4 replies
Last updated: Nov 12, 2021
is it possible to use the Sanity CDN to transform SVG images to bitmap/png images? My PDF generator hates SVG images
Nov 9, 2021, 11:10 AM
Very cool, how do I do this in my GROQ query? Any ways to to say “If svg, then convert to png/jpg” or do I have to find every place an SVG may come and convert all the images to png or jpg?
I can use the URL, but my current setup works using GROQ
Nov 9, 2021, 12:08 PM
Very sexy, how do I do this in my GROQ query? Any ways to to say “If svg, then convert to png/jpg” or do I have to find every place an SVG may come and convert all the images to png or jpg?
Nov 9, 2021, 12:08 PM
Depends on how your query is, but in theory yes. Something like this:

*[_type == 'blogPost'] [0...10] {
  images[] {
    asset->{
      url,
      extension == 'svg' => {
        'url': url + '?fm=png'
      }
    }
  }
}
Nov 12, 2021, 4:17 AM
The relevant part here is the 'select the url, and if the extension of the asset is svg, assign url to be the url + a query parameter'
Nov 12, 2021, 4:18 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?