Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Getting SVGs from Sanity and rendering them as React components

12 replies
Last updated: May 20, 2022
Hey! Is it possible to get SVGs the way we get images from Sanity natively? If yes, how can I do it?
Apr 14, 2022, 9:49 PM
two png images and an svg
Apr 14, 2022, 10:04 PM
and I was playing with formatting with next+tailwind+styled but think this may be readable:

import Head from 'next/head';
import Image from 'next/image';
import groq from 'groq';
import sanityClient from '@lib/sanityClient';
import tw from 'tailwind-styled-components';

export default function Home({ docs, imgs }) {
  return (
    <div className="max-w-2xl mx-auto">
      <Head>
        <title>Beep</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Riff Raff...</h1>
      <form>
        <Input type="text" placeholder="Title" />
        <Button>Submit</Button>
      </form>
      <hr />
      <h2>Images</h2>
      <div>
        {docs.length > 0 &&
          imgs.map(({ _id, url='', originalFilename  }) => <Image
              src={url}
              key={_id}
              alt={originalFilename}
              height={200}
              width={200}
            />
          )}
      </div>
      <h2>Doc Titlees</h2>
      <div>
        {docs.length > 0 &&
          docs.map(({ _id, title = '' }) => <div key={_id}>{title}</div>)}
      </div>
    </div>
  );
}

// ------------------------------------------------------------HOOKS
export async function getStaticProps() {
  const docs = await sanityClient.fetch(groq`
    *[_type == "project"]
  `);
  const imgs = await sanityClient.fetch(groq`
    *[_type == "sanity.imageAsset"]
  `);
  return { props: { docs, imgs } };
}


// ------------------------------------------------------------STYLES
const Input = tw.input`
  input
  input-bordered
  input-primary
  w-full
  max-w-xs
`;
const Button = tw.button`
  btn
  mx-4
`;
Apr 14, 2022, 10:05 PM
I actually want to get the SVG from sanity the way we get images, but not as an image, but as a pure SVG, so I can make it a ReactComponent SVG and then load in the page, as well as not losing the SVG's advantages
Apr 14, 2022, 10:07 PM
ooohhh I see I think - rad question, you will need to stringify or objectify that I think. SVG isn’t in the officially supported image types but it behaves like it is. Lemme see. I’m certain it is possible and have seen a good number of custom use cases like this.
Apr 14, 2022, 10:09 PM
Forgive me, I haven’t tried this before myself. But it could be possible to upload the raw svg as a file asset type when it may get recognized as an image. Otherwise you’d need to turn the blob into a string to render it as an element somewhere else. You could ‘objectify’ the attributes into a document as well. You can put the same react component code in your front end as the studio pretty much, with the formbuilder api to make something neat and interactive too. Or do something simple like add a color input to define the fill color value in your markup.
When SVGs are queried with the img url as an imageAsset, they do appear to return the actual svg markup - so rendering and modifying that appears quite possible and may depend on your app’s code to find and replace values like fill.
Apr 14, 2022, 10:38 PM
short story: even if it’s a 
sanity.imageAsset
, what you get in on query is still the raw markup blob.
Apr 14, 2022, 10:40 PM
Interesting, thanks for the help!
Apr 16, 2022, 9:47 PM
user S
Hey! Did you manage to build a working solution?
May 20, 2022, 8:06 AM
user R
Since I figured out there weren't really any tradeoffs using the SVGs in img tags (I thought it would pixelate in big screen but actually it doesn't), I decided to take the easy route, since I already had plenty of stuff to get used to with Sanity already 😅
May 20, 2022, 2:39 PM
Ok, great!BTW I found this plugin —
https://www.npmjs.com/package/sanity-plugin-inline-svg
May 20, 2022, 2:41 PM
That's awesome, I'll make sure to use it next time! Thanks for sharing 😁
May 20, 2022, 2:43 PM
That’s really awesome. I’m so sorry, there are so many plugins it’s hard to know what’s out there sometimes. 🥹
May 20, 2022, 4:05 PM

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?