✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

SVG-Loading - CORS-Error

12 replies
Last updated: Nov 23, 2021
Hi everyone 👋I’m a designer trying my hands on a simple
Sanity solution for a next.js one-pager. I’m trying to use svg-assets uploaded through sanity studio in combination with external-svg-loader . The goal is to load the SVGs inline and control the colors with CSS. However, this only results in a CORS-error which is a bit too technical for me:

Access to fetch at '<https://cdn.sanity.io/images/xxxxxxxx/production/xxxxxxx-800x600.svg>' from origin '<http://localhost:3000>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Can anyone point me in the right direction for solving this
🙂 Or is my thinking and approach for loading svgs hosted at a CDN inline wrong?
---
Edit:
user H
has provided me with a few alternative solutions that will work by editing the SVGs or pasting the SVG code in text fields. Is there no way to solve the CORS-error so the editors only need to upload an svg?
Nov 23, 2021, 9:07 AM
I had the exact use case, didn't knew this plugin. I manually changed color and re-uploaded.
For another project, I added an option to copy-paste SVG code instead of image, so I can get it using dangerouslySetHTML
Nov 23, 2021, 9:20 AM
Thanks
user H
, I hope to keep it simple for the editors to upload new or change the SVG-illustrations. However it’s good to know there are a few different approaches, eventhough they seem a bit more cumbersome 👍
Nov 23, 2021, 9:29 AM
I hope sanity provides an option to render SVG as raw.
Nov 23, 2021, 9:32 AM
You can add the origin to your project and it should work, I believe?
sanity cors add <http://localhost:3000>
Nov 23, 2021, 11:54 AM
Thanks
user Z
, I’ll try that. Is this the same as setting cors origins through the sanity manage project-dashboard?
Nov 23, 2021, 12:00 PM
Yep (credentials are not needed for these origins)
Nov 23, 2021, 12:01 PM
user Z
Is SVG Raw format something Sanity considered? There are so many benefits of including &lt;svg&gt; inline instead of &lt;img src&gt;.
Nov 23, 2021, 12:03 PM
I'm not sure I understand what that entails? Getting the contents of the file through a GROQ query?
Nov 23, 2021, 12:03 PM
Hm,
sanity cors add <http://localhost:3000>
didn’t seem to help. I still get the same CORS-error when trying to load the svg’s inline.

My bad, I managed to add the wrong URL. It works perfectly now. Thanks for the help
user Z
:party_parrot:
Nov 23, 2021, 12:08 PM
user Z
Here's an example: Editors uploads an SVG icon, Its in black color. Using it in frontend as &lt;img src=""&gt; we have no way to change the SVG Color or other properties. But if sanity provides an option to fetch the actual &lt;svg&gt; code, we can use that along with "currentColor" to change the icon COLOR.
Make sense?

I have experienced this issue in my last 2 projects and 1 ongoing project. So this is something many people would love too..
Nov 23, 2021, 1:02 PM
You can do that if you set up a CORS origin as above and fetching it using XHR/fetch.
I
guess it would be cool to fetch it through GROQ, but there's some implications of that. SVGs can potentially be megabytes in size after all.
Nov 23, 2021, 1:06 PM
yeah a GROQ function would be awesome. Even if the size is big, normal rendering will also take same size as Sanity currently does not compress SVG
Nov 23, 2021, 1:09 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.

Was this answer helpful?